From Zero to Web Hero: Learn HTML & CSS from Scratch

About Course

Welcome to “From Zero to Web Hero: Learn HTML & CSS from Scratch.” My name is Deen Muhammad, and I’ve been building websites for almost 6 years. Throughout my career, I’ve honed my skills in creating functional, visually appealing sites using HTML and CSS. This course is designed to take you from a complete beginner to someone who can confidently build and design their own websites. Whether you’re looking to start a career in web development or simply want to create your own personal site, this course will provide you with the essential tools and knowledge to succeed. Let’s embark on this exciting journey together

1. HTML Essentials:
Understanding the structure of a webpage.
Using tags, elements, and attributes to create content.
Creating headers, paragraphs, lists, links, images, and tables.
2. CSS Fundamentals:
Styling HTML elements with colors, fonts, and layouts.
Using CSS selectors, classes, and IDs to apply styles.
Understanding the box model, padding, margins, and borders.
3. Responsive Design:
Making your website mobile-friendly using media queries.
Implementing flexible layouts with percentages and viewport units.
Using CSS Flexbox and Grid for advanced layouts.
4. Page Structure & Navigation:
Building multi-page websites with consistent navigation.
Creating and styling navigation bars and menus.
Understanding semantic HTML and its benefits for accessibility.
5. Forms & Inputs:
Creating forms for user input with various form elements.
Styling forms and inputs for better user experience.
Validating form data with HTML attributes.
6. Project-Based Learning:
Applying your skills by building a fully functional website from scratch.
Hands-on exercises and mini-projects to reinforce learning.
Real-world examples and best practices in web development.
7. Deployment Basics:
Preparing your website for the web.
Understanding the basics of hosting and domain names.
Uploading your website to a live server.
By the end of this course, you’ll have the confidence and skills to create and style your own professional-looking websites using HTML and CSS.

Course Content

Section 1 : Welcome And Step Up Everything

Structure and Projects Details
Read Before You Start!
A High-Level Overview of Web Development
Setting Up Our Code Editor
Your Very First Webpage!
Downloading Material that I Use
Watch Before You Start!

Section 2: HTML Fundamentals

Introduction to HTML Part 1
Introduction to HTML Part 2
HTML Document Structure
Text Elements
More Text Elements: Lists
Images and Attributes
Hyperlinks
Structuring our Page
A Note on Semantic HTML
Installing Additional VS Code Extensions
CHALLENGE No: 1
CHALLENGE No: 2

Section 3: CSS Fundamentals

Introduction Part 1
Introduction Part 2
Inline, Internal and External CSS
Styling Text
Combining Selectors
Class and ID Selectors
Working With Colors
Pseudo-classes
Styling Hyperlinks
Using Chrome DevTools
CSS Theory #1: Conflicts Between Selectors
CSS Theory #2: Inheritance and the Universal Selector
CHALLENGE #1
CSS Theory #3: The CSS Box Model
Using Margins and Paddings
Adding Dimensions
Centering our Page
CHALLENGE #2
CSS Theory #4: Types of Boxes
CSS Theory #5: Absolute Positioning
Pseudo-elements
Developer Skill #1: Googling and Reading Documentation
Developer Skill #2: Debugging and Asking Questions
CHALLENGE #3

Section 4: Layouts: Floats, Flexbox, and CSS Grid Fundamentals

Section Introduction
The 3 Ways of Building Layouts
Using Floats
Clearing Floats
Building a Simple Float Layout
box-sizing: border-box
CHALLENGE #1
Introduction to Flexbox
A Flexbox Overview
Spacing and Aligning Flex Items
The flex Property
Adding Flexbox to Our Project
Building a Simple Flexbox Layout
CHALLENGE #2
Introduction to CSS Grid
A CSS Grid Overview
Sizing Grid Columns and Rows
Placing and Spanning Grid Items
Aligning Grid Items and Tracks
Building a Simple CSS Grid Layout
CHALLENGE #3

Section 5: Web Design Rules and Framework

Section Intro
Project Overview
Overview of Web Design and Website Personalities
Web Design Rules #1: Typography
Implementing Typography
Web Design Rules #2: Colors
Implementing Colors
Web Design Rules #3: Images and Illustrations
Web Design Rules #4: Icons
Implementing Icons
Web Design Rules #5: Shadows
Implementing Shadows
Web Design Rules #6: Border-radius
Implementing Border-radius
Web Design Rules #7: Whitespace
Web Design Rules #8: Visual Hierarchy
Implementing Whitespace and Visual Hierarchy
Web Design Rules #9: User Experience (UX)
The Website-Personalities-Framework
The Missing Piece: Steal Like An Artist!

Section 6: Components and Layout Patterns

Section Intro
Web Design Rules #10 – Part 1: Elements and Components
Building an Accordion Component – Part 1
Building an Accordion Component – Part 2
Styling Forms for Better User Experience
Building a Carousel Component – Part 1
Building a Carousel Component – Part 2
Building a Table Component – Part 1
Building a Table Component – Part 2
CHALLENGE #1: Building a Pagination Component
Web Design Rules #10 – Part 2: Layout Patterns
Building a Hero Section – Part 1
Building a Hero Section – Part 2
Building a Web Application Layout – Part 1
Building a Web Application Layout – Part 2

Section 7: Deen Demos Project – Setup and Desktop Version

Section Intro
The 7 Steps to a Great Website
Defining and Planning the Project (Steps 1 and 2)
Sketching Initial Layout Ideas (Step 3)
First Design and Development Steps (Step 4)
Responsive Design Principles
How rem and max-width Work
Building the Hero – Part 1
Building the Hero – Part 2
Building the Hero – Part 3
Building the Header
Building the Navigation
Setting Up a Reusable Grid

Section 8: Deen Demos Project – Responsive Web Design

Section 9: Deen Demos Project – Effects, Optimizations and Deployment

Section Intro
A Short Introduction to JavaScript
Making the Mobile Navigation Work
Final Words and Course Wrap-Up
Implementing Smooth Scrolling
Implementing a Sticky Navigation Bar
Browser Support and Fixing Flexbox Gap in Safari
Testing Performance With Lighthouse
Adding Favicon and Meta Description
Image Optimizations
Deployment
Making the Form Work

Section 10: The End! With client hunting

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

Section 1 : Welcome And Step Up Everything

Structure and Projects Details

Read Before You Start!

A High-Level Overview of Web Development

Setting Up Our Code Editor

Your Very First Webpage!

Downloading Material that I Use

Watch Before You Start!

Section 2: HTML Fundamentals

Introduction to HTML Part 1

Introduction to HTML Part 2

HTML Document Structure

Text Elements

More Text Elements: Lists

Images and Attributes

Hyperlinks

Structuring our Page

A Note on Semantic HTML

Installing Additional VS Code Extensions

CHALLENGE No: 1

CHALLENGE No: 2

Section 3: CSS Fundamentals

Introduction Part 1

Introduction Part 2

Inline, Internal and External CSS

Styling Text

Combining Selectors

Class and ID Selectors

Working With Colors

Pseudo-classes

Styling Hyperlinks

Using Chrome DevTools

CSS Theory #1: Conflicts Between Selectors

CSS Theory #2: Inheritance and the Universal Selector

CHALLENGE #1

CSS Theory #3: The CSS Box Model

Using Margins and Paddings

Adding Dimensions

Centering our Page

CHALLENGE #2

CSS Theory #4: Types of Boxes

CSS Theory #5: Absolute Positioning

Pseudo-elements

Developer Skill #1: Googling and Reading Documentation

Developer Skill #2: Debugging and Asking Questions

CHALLENGE #3

Section 4: Layouts: Floats, Flexbox, and CSS Grid Fundamentals

Section Introduction

The 3 Ways of Building Layouts

Using Floats

Clearing Floats

Building a Simple Float Layout

box-sizing: border-box

CHALLENGE #1

Introduction to Flexbox

A Flexbox Overview

Spacing and Aligning Flex Items

The flex Property

Adding Flexbox to Our Project

Building a Simple Flexbox Layout

CHALLENGE #2

Introduction to CSS Grid

A CSS Grid Overview

Sizing Grid Columns and Rows

Placing and Spanning Grid Items

Aligning Grid Items and Tracks

Building a Simple CSS Grid Layout

CHALLENGE #3

Section 5: Web Design Rules and Framework

Section Intro

Project Overview

Overview of Web Design and Website Personalities

Web Design Rules #1: Typography

Implementing Typography

Web Design Rules #2: Colors

Implementing Colors

Web Design Rules #3: Images and Illustrations