Build Responsive Real-World Websites with HTML and CSS

About Course

Learn how to build responsive, real-world websites from scratch using HTML and CSS with this comprehensive course. This is a **completely free** course from Udemy, covering everything from basic principles to advanced techniques, like flexbox and CSS Grid.

This project-based course will take you through the entire process of designing and building a professional website, using the same tools and technologies that experienced web developers use. You’ll learn:

Fundamentals of modern HTML and CSS
Web design principles and best practices
Responsive design for optimal viewing on all devices
Building professional-looking websites with well-established components and layout patterns
Finding and using free design assets like images, fonts, and icons
Essential developer skills like reading documentation, troubleshooting code errors, and using professional web development tools

Join 200,000+ other developers and start building stunning websites today! This is a complete, all-in-one package, perfect for anyone interested in web development, whether you’re a beginner or have some prior experience.

This course includes:

High-definition video lessons
Professional English captions
Downloadable design assets, starter code, and final code for each section
Downloadable slides for theory videos
Access to countless free design and development resources
Free support in the course Q&A forum
10+ coding challenges with solutions

Start learning today and unlock your web development potential!

Become a modern and confident HTML and CSS developer, no prior knowledge needed!
Design and build a stunning real-world project for your portfolio from scratch
Modern, semantic and accessible HTML5
Modern CSS (previous CSS3), including flexbox and CSS Grid for layout
Important CSS concepts such as the box model, positioning schemes, inheritance, solving selector conflicts, etc.
A web design framework with easy-to-use rules and guidelines to design eye-catching websites
How to plan, sketch, design, build, test, and optimize a professional website
How to make websites work on every possible mobile device (responsive design)
How to use common components and layout patterns for professional website design and development
Developer skills such as reading documentation, debugging, and using professional tools
How to find and use free design assets such as images, fonts, and icons
Practice your skills with 10+ challenges (solutions included)

Course Content

Welcome and First Steps

A Message from the Professor
Course Structure and Projects

05:34
A High-Level Overview of Web Development

11:01
Setting Up Our Code Editor

08:52
Your Very First Webpage!

09:56
Downloading Course Material

04:21
Watch Before You Start!

05:44
Course Material Download Link

00:00

HTML Fundamentals

Section Intro

00:40
Introduction to HTML

04:18
HTML Document Structure

11:46
Text Elements

16:20
More Text Elements_ Lists

10:59
Images and Attributes

12:42
Hyperlinks

14:49
Structuring our Page

10:56
A Note on Semantic HTML

06:28
Installing Additional VS Code Extensions

07:14
CHALLENGE #1

11:50
CHALLENGE #2

17:12

CSS Fundamentals

Section Intro

00:56
Introduction to CSS

00:47
Inline

12:12
Styling Text

15:32
Combining Selectors

09:12
Class and ID Selectors

15:23
Working With Colors

24:08
Pseudo-classes

10:00
Styling Hyperlinks

09:43
Using Chrome DevTools

08:04
CSS Theory #1_ Conflicts Between Selectors

17:23
CSS Theory #2_ Inheritance and the Universal Selector

14:36
CHALLENGE #1

17:41
CSS Theory #3_ The CSS Box Model

08:05
Using Margins and Paddings

22:07
Adding Dimensions

08:03
Centering our Page

07:56
CHALLENGE #2

10:59
CSS Theory #4_ Types of Boxes

22:19
CSS Theory #5_ Absolute Positioning

16:04
Pseudo-elements

16:52
Developer Skill #1_ Googling and Reading Documentation

12:15
Developer Skill #2_ Debugging and Asking Questions

22:16
CHALLENGE #3

19:37

Layouts_ Floats, Flexbox, and CSS Grid Fundamentals

Section Intro

01:18
The 3 Ways of Building Layouts

05:18
Using Floats

17:22
Clearing Floats

07:22
Building a Simple Float Layout

08:46
box-sizing_ border-box

11:12
CHALLENGE #1

20:15
Introduction to Flexbox

09:43
A Flexbox Overview

07:35
Spacing and Aligning Flex Items

10:51
The flex Property

11:34
Adding Flexbox to Our Project

19:57
Building a Simple Flexbox Layout

12:15
CHALLENGE #2

14:13
Introduction to CSS Grid

10:58
A CSS Grid Overview

09:40
Sizing Grid Columns and Rows

13:54
Placing and Spanning Grid Items

13:00
Aligning Grid Items and Tracks

13:46
Building a Simple CSS Grid Layout

15:46
CHALLENGE #3

07:47

Web Design Rules and Framework

Section Intro

02:18
Project Overview

06:13
Overview of Web Design and Website Personalities

12:36
Web Design Rules #1_ Typography

16:17
Implementing Typography

23:23
Web Design Rules #2_ Colors

13:40
Implementing Colors

18:12
Web Design Rules #3_ Images and Illustrations

14:57
Web Design Rules #4_ Icons

12:59
Implementing Icons

21:33
Web Design Rules #5_ Shadows

13:04
Implementing Shadows

12:08
Web Design Rules #6_ Border-radius

04:54
Implementing Border-radius

06:40
Web Design Rules #7_ Whitespace

13:10
Web Design Rules #8_ Visual Hierarchy

22:58
Implementing Whitespace and Visual Hierarchy

15:43
Web Design Rules #9_ User Experience (UX)

20:37
The Website-Personalities-Framework

30:59
The Missing Piece_ Steal Like An Artist!

10:26

Components and Layout Patterns

Section Intro

01:00
Web Design Rules #10 – Part 1_ Elements and Components

27:48
Building an Accordion Component – Part 1

25:31
Building an Accordion Component – Part 2

19:24
Building a Carousel Component – Part 1

21:25
Building a Carousel Component – Part 2

29:42
Building a Table Component – Part 1

10:04
Building a Table Component – Part 2

13:16
CHALLENGE #1_ Building a Pagination Component

24:10
Web Design Rules #10 – Part 2_ Layout Patterns

21:52
Building a Hero Section – Part 1

22:11
Building a Hero Section – Part 2

21:21
Building a Web Application Layout – Part 1

15:12
Building a Web Application Layout – Part 2

15:56

Omnifood Project _ Setup and Desktop Version

Section Intro

01:02
The 7 Steps to a Great Website

20:30
Defining and Planning the Project (Steps 1 and 2)

24:36
Sketching Initial Layout Ideas (Step 3)

07:36
First Design and Development Steps (Step 4)

15:21
Responsive Design Principles

08:37
How rem and max-width Work

16:06
Building the Hero – Part 1

16:12
Building the Hero – Part 2

29:27
Building the Hero – Part 3

23:57
Building the Header

15:15
Building the Navigation

15:55
Setting Up a Reusable Grid

21:23
Building the How-It-Works Section – Part 1

29:16
Building the How-It-Works Section – Part 2

35:12
Building the Featured-In Section

19:45
Building the Meals Section – Part 1

26:35
Building the Meals Section – Part 2

21:01
Building the Meals Section – Part 3

29:42
Building the Testimonials Section – Part 1

18:15
Building the Testimonials Section – Part 2

24:38
Building the Pricing Section – Part 1

24:00
Building the Pricing Section – Part 2

25:58
Building the Features Part

19:06
Building the Call-To-Action Section – Part 1

26:12
Building the Call-To-Action Section – Part 2

24:45
Building the Call-To-Action Section – Part 3

29:09
Building the Footer – Part 1

19:16
Building the Footer – Part 2

27:58

Omnifood Project _ Responsive Web Design

Omnifood Project _ Effects, Optimizations and Deployment

Section Intro

00:50
A Short Introduction to JavaScript

03:10
Making the Mobile Navigation Work

08:32
Implementing Smooth Scrolling

29:24
Implementing a Sticky Navigation Bar

28:02
Browser Support and Fixing Flexbox Gap in Safari

07:55
Testing Performance With Lighthouse

08:45
Adding Favicon and Meta Description

12:24
Image Optimizations

18:26
Deployment to Netlify

08:20
Making the Form Work With Netlify Forms

07:49

The End!

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

4.7

Total 3 Ratings

2 Ratings

1 Rating

0 Rating

Hassan Saleem

2 months ago

It was very helpful specially for a beginner to start web from HTML&CSS.

Abdullah Siddiqui

3 months ago

Very great course with descriptive teaching

Alishba Malik

3 months ago

good

About Course

What Will You Learn?

Course Content

Welcome and First Steps

A Message from the Professor

Course Structure and Projects

A High-Level Overview of Web Development

Setting Up Our Code Editor

Your Very First Webpage!

Downloading Course Material

Watch Before You Start!

Course Material Download Link

HTML Fundamentals

Section Intro

Introduction to HTML

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 #1

CHALLENGE #2

CSS Fundamentals

Section Intro

Introduction to CSS

Inline

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

Layouts_ Floats, Flexbox, and CSS Grid Fundamentals

Section Intro

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

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