Top 9 Recommended HTML CSS Self-Study Materials! [November 2024]

*** The #1 bestselling HTML and CSS course on Udemy! ***

*** Completely re-built from scratch in July 2021 (35+ hours video) ***

"Having gone through other related courses on other platforms, I can say this course is the most practical and readily applicable course on web design and development I have taken." — Bernie Pacis

Open a new browser tab, type in www.omnifood.dev, and take a look around. I will wait here...

...

Amazing, right? What if you knew exactly how to design and build a website like that, completely from scratch? How amazing would that be?

Well, I'm here to teach you HTML, CSS, and web design, all by building the stunning website that you just saw, step-by-step.

So, after finishing this course, you will know exactly how to build a beautiful, professional, and ready-to-launch website just like Omnifood, by following a 7-step process. And it will even look great on any computer, tablet, and smartphone.

But what if you want to build a completely different website? Well, no problem! I designed the course curriculum with exactly this goal: to enable you to design and build any website that you can think of, not just copy the course project.

So, in order to become a confident and independent developer, capable of building your own websites in the future, you will learn:

• The fundamentals of modern and semantic HTML, CSS, and building layouts in a small separate project, which will prepare you for the main course project (www.omnifood.dev). This includes modern flexbox and CSS Grid!

• How to design beautiful websites, by learning a web design framework I created just for this course. It consists of easy-to-use guidelines for design aspects like typography, colors, images, spacing, and more (this is like a small standalone course!).

• How to use well-established website components and layout patterns in order to come up with professional-looking designs

• How to make any website work on any mobile device, no matter the design and layout (responsive design)

• How to use the 7 steps of building a professional website in practice: planning, sketching, designing, building, testing, optimizing, and launching

• How to find and use free design assets such as images, fonts, and icons

• Important developer skills such as reading documentation, fixing code errors on your own, and using professional web development tools

Does this sound like fun? Then join me and 200,000+ other developers and start building websites today!

Or are you not sold yet and need to know more? No problem, just keep reading...

[01] Why should you learn HTML and CSS in the first place?

Building websites allows you to do fun and creative work, from anywhere in the world, and it even pays well. Web development is one of the most future-proof and highest-paying industries in the world. And HTML and CSS is the entry point to this world!

But you already know all this, that's why you want to learn HTML and CSS too. Well, you came to the right place!

This is the best and most complete course for starting your web development journey that you will find on Udemy. It's an all-in-one package that takes you from knowing nothing about HTML and CSS, to building beautiful websites using tools and technologies that professional web developers use every single day.

[02] Why is this course so unique and popular?

Reason #1: The course is completely project-based

Simple demos are boring, and therefore you're gonna learn everything by building actual projects! In the final project (www.omnifood.dev), together we hand-code a beautiful and responsive landing page for a fictional company that I made up just for the course.

Reason #2: You will not just learn how to code

Coding is great, but it's not everything! That's why we will go through the entire 7-step process of building and launching our website project.

So the huge Omnifood project will teach you real-world skills to build real-world HTML and CSS websites: how to plan projects and page layouts, how to implement designs using HTML and CSS techniques, how to write clean and organized code, how to optimize websites for good speed performance, and many more.

On top of that, this course has a huge focus on beautiful design. In fact, this is the only course on the market that focuses on both coding and designing, together.

Reason #3: I'm the right teacher for you

With the right guidance and a well-structured curriculum, building websites can be quite easy and fun to learn. With a bunch of random tutorials and YouTube videos? Not so much. And that's where I come in.

My name is Jonas, I'm an experienced web developer and designer, and one of Udemy's top instructors. I have been teaching this bestselling course since 2015 to over 200,000 developers, always listening to feedback and understanding exactly how students actually learn.

Using that feedback, I recently rebuilt this course from scratch and designed the ideal course curriculum for every type of student. It's a unique blend of projects, deep explanations, theory lectures, and challenges. I'm sure you're gonna love it!

[03] Why is this course so long?

Reason #1: I take time to explain every single concept that I teach, so that you actually learn, and not just copy code from the screen (this is a course, not a tutorial)

Reason #2: I go into topics that other HTML and CSS courses shy away from: professional web design, component and layout patterns, some CSS theory, website planning in theory and practice, and developer skills. I believe you need all of this to be successful!

Reason #3: There is a lot of repetition, so that you actually assimilate and practice what you learn. Practice is the single most important ingredient to learning, and therefore I provide plenty of opportunities for you to sharpen your skills

[04] Here is what's also included in the package:

• Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business students)

• Professional English captions (not the auto-generated ones)

• Downloadable design assets + starter code and final code for each section

• Downloadable slides for 20+ theory videos (not boring, I promise!)

• Access to countless free design and development resources that I curated over many years

• Free support in the course Q&A

• 10+ coding challenges to practice your new skills (solutions included)

[05] This course is for you if...

• ... you are a complete beginner with no idea of how to build a website.

• ... you already know a bit of HTML and CSS from some tutorials or videos, but struggle to put together a good-looking, complete website.

• ... you are a designer and want to expand your skills into HTML and CSS, because all your designer friends are learning how to code (they are smart!).

Basically, if you are an HTML and CSS master, and build the most beautiful websites in the world, then DON'T take the course. Everyone else: you should take the course, today.

So, does all of this sound great? Then join me and 200,000+ other developers and start your web development journey today!

1. Welcome and First Steps
2. Course Structure and Projects
3. Read Before You Start!
4. A High-Level Overview of Web Development
5. Setting Up Our Code Editor
6. Your Very First Webpage!
7. Downloading Course Material
8. Watch Before You Start!
9. HTML Fundamentals
10. Section Intro
11. Introduction to HTML
12. HTML Document Structure
13. Text Elements
14. More Text Elements: Lists
15. Images and Attributes
16. Hyperlinks
17. Structuring our Page
18. A Note on Semantic HTML
19. Installing Additional VS Code Extensions
20. CHALLENGE #1
21. CHALLENGE #2
22. CSS Fundamentals
23. Section Intro
24. Introduction to CSS
25. Inline, Internal and External CSS
26. Styling Text
27. Combining Selectors
28. Class and ID Selectors
29. Working With Colors
30. Pseudo-classes
31. Styling Hyperlinks
32. Using Chrome DevTools
33. CSS Theory #1: Conflicts Between Selectors
34. CSS Theory #2: Inheritance and the Universal Selector
35. CHALLENGE #1
36. CSS Theory #3: The CSS Box Model
37. Using Margins and Paddings
38. Adding Dimensions
39. Centering our Page
40. CHALLENGE #2
41. CSS Theory #4: Types of Boxes
42. CSS Theory #5: Absolute Positioning
43. Pseudo-elements
44. Developer Skill #1: Googling and Reading Documentation
45. Developer Skill #2: Debugging and Asking Questions
46. CHALLENGE #3
47. Layouts: Floats, Flexbox, and CSS Grid Fundamentals
48. Section Intro
49. The 3 Ways of Building Layouts
50. Using Floats
51. Clearing Floats
52. Building a Simple Float Layout
53. box-sizing: border-box
54. CHALLENGE #1
55. Introduction to Flexbox
56. A Flexbox Overview
57. Spacing and Aligning Flex Items
58. The flex Property
59. Adding Flexbox to Our Project
60. Building a Simple Flexbox Layout
61. CHALLENGE #2
62. Introduction to CSS Grid
63. A CSS Grid Overview
64. Sizing Grid Columns and Rows
65. Placing and Spanning Grid Items
66. Aligning Grid Items and Tracks
67. Building a Simple CSS Grid Layout
68. CHALLENGE #3
69. Web Design Rules and Framework
70. Section Intro
71. Project Overview
72. Overview of Web Design and Website Personalities
73. Web Design Rules #1: Typography
74. Implementing Typography
75. Web Design Rules #2: Colors
76. Implementing Colors
77. Web Design Rules #3: Images and Illustrations
78. Web Design Rules #4: Icons
79. Implementing Icons
80. Web Design Rules #5: Shadows
81. Implementing Shadows
82. Web Design Rules #6: Border-radius
83. Implementing Border-radius
84. Web Design Rules #7: Whitespace
85. Web Design Rules #8: Visual Hierarchy
86. Implementing Whitespace and Visual Hierarchy
87. Web Design Rules #9: User Experience (UX)
88. The Website-Personalities-Framework
89. The Missing Piece: Steal Like An Artist!
90. Components and Layout Patterns
91. Section Intro
92. Web Design Rules #10 - Part 1: Elements and Components
93. Building an Accordion Component - Part 1
94. Building an Accordion Component - Part 2
95. Building a Carousel Component - Part 1
96. Building a Carousel Component - Part 2
97. Building a Table Component - Part 1
98. Building a Table Component - Part 2
99. CHALLENGE #1: Building a Pagination Component
100. Web Design Rules #10 - Part 2: Layout Patterns
101. Building a Hero Section - Part 1
102. Building a Hero Section - Part 2
103. Building a Web Application Layout - Part 1
104. Building a Web Application Layout - Part 2
105. Omnifood Project – Setup and Desktop Version
106. Section Intro
107. The 7 Steps to a Great Website
108. Defining and Planning the Project (Steps 1 and 2)
109. Sketching Initial Layout Ideas (Step 3)
110. First Design and Development Steps (Step 4)
111. Responsive Design Principles
112. How rem and max-width Work
113. Building the Hero - Part 1
114. Building the Hero - Part 2
115. Building the Hero - Part 3
116. Building the Header
117. Building the Navigation
118. Setting Up a Reusable Grid
119. Building the How-It-Works Section - Part 1
120. Building the How-It-Works Section - Part 2
121. Building the Featured-In Section
122. Building the Meals Section - Part 1
123. Building the Meals Section - Part 2
124. Building the Meals Section - Part 3
125. Building the Testimonials Section - Part 1
126. Building the Testimonials Section - Part 2
127. Building the Pricing Section - Part 1
128. Building the Pricing Section - Part 2
129. Building the Features Part
130. Building the Call-To-Action Section - Part 1
131. Building the Call-To-Action Section - Part 2
132. Building the Call-To-Action Section - Part 3
133. Building the Footer - Part 1
134. Building the Footer - Part 2
135. Omnifood Project – Responsive Web Design
136. Section Intro
137. How Media Queries Work
138. How to Select Breakpoints
139. Responding to Small Laptops
140. Responding to Landscape Tablets
141. Responding to Tablets
142. Building the Mobile Navigation
143. Responding to Smaller Tablets
144. Responding to Phones
145. Omnifood Project – Effects, Optimizations and Deployment
146. Section Intro
147. A Short Introduction to JavaScript
148. Making the Mobile Navigation Work
149. Implementing Smooth Scrolling
150. Implementing a Sticky Navigation Bar
151. Browser Support and Fixing Flexbox Gap in Safari
152. Testing Performance With Lighthouse
153. Adding Favicon and Meta Description
154. Image Optimizations
155. Deployment to Netlify
156. Making the Form Work With Netlify Forms
157. The End!
158. Where to Go from Here
159. My Other Courses + Updates

Welcome to the "Mastering HTML5 and CSS3 (Part 3 - Advanced Level)" course

Do you want to know more about HTML & CSS?

... Or maybe you want to know what responsive web design is and how you can create responsive web templates

... Or maybe you want to create a responsive web template from scratch, and don’t you know how to start

... Or maybe you want to be a professional front-end developer

So, this course is suitable for you. Everything that you need to be professional in creating web templates, you will learn here. In this course you will learn advanced topics in HTML & CSS that contains:

• Using multimedia in your HTML documents

• Create a simple login form step-by-step and solve the problems that we encounter

• More complicated CSS selectors: Pseudo-classes , Pseudo-elements, attribute selectors and combine different selectors

• Fundamentals of Responsive Web Design (RWD) to create templates that will work in all devices correctly

• Using Canvas & SVG

• Create simple animations in CSS & HTML

• ...

So, if you are looking for a way to simply learn these topics in HTML & CSS, just stop your searches and start this course here.

What is included in this course?

• Downloadable design assets from the start to the end for each day

• HD quality videos, easy to find and reference

• Step-by-step guide for each topic in HTML5  & CSS3

• A cheat-sheet for different types of selectors in CSS

If you are not familiar with the basics of HTML & CSS, you can watch my other course in this topic and come back here to learn more.

If you already know what HTML is and how you can create a simple template, don't hesitate and join my course. Hope you enjoy and learn!!

1. Introduction
2. Introduction
3. Day 1: Multimedia in HTML
4. What is Multimedia?
5. Video in HTML
6. Audio in HTML
7. Day 2: Get user's data using forms
8. HTML Forms - Part 1
9. HTML Forms - Part 2
10. Form Elements
11. Day 3: Continue with forms
12. Different Input Types for Form - Part 1
13. Different Input Types for Form - Part 2
14. Different Input Types for Form - Part 3
15. Input Types Attributes
16. Day 4: Using Advanced CSS rules in Login Form
17. Create a Login Form
18. Login Form: Box-Sizing in CSS
19. Login Form: Position in CSS
20. Day 5: More About CSS Selectors
21. CSS Variables
22. CSS pseudo-classes
23. CSS pseudo-elements
24. Attribute Selectors in CSS
25. Selector Combinators in CSS
26. Day 6: Responsive Web Design Fundamentals
27. Responsive Web Design (RWD)
28. Media Queries
29. Make images responsive
30. Responsive Font Size
31. Sample Responsive Menu
32. Day 7 : Advanced Topics in CSS
33. CSS z-index
34. CSS Transition
35. CSS Transform
36. Canvas & SVG
37. Math Functions in CSS

Are you eager to build amazing and responsive websites using HTML and CSS? You're in the right place!

Welcome to the 7-Day Web Developer Bootcamp

In just one week, you'll master the technologies, concepts, and theory behind HTML and CSS. More importantly, you'll apply your new skills through a series of practical projects.

Start Your Web Development Journey Here

HTML and CSS are the foundational languages of the web and essential for a successful career in tech. This course is the perfect starting point for beginners.

Learn by Doing

Our course emphasizes hands-on learning with coding exercises, quizzes, mini-projects, and major projects designed to enhance your skills through active recall.

Why Choose This Course?

We value your time, which is why our course is direct and to the point. Like a boot camp, we focus on the key concepts of web development, delivered through:

• Precise voiceovers

• Animated visuals

• Concise explanations

Course Structure

We begin with a comprehensive HTML course, ensuring that even those with no prior coding experience can follow along and start building projects right away.

The primary focus of this course is CSS, covering everything from basic syntax to advanced concepts. We break down complex ideas into digestible information, ensuring you understand how browsers interpret your CSS code.

One of the most critical aspects of the course is Responsive Web Design, where you'll master CSS Flexbox and Grid Layouts to create responsive layouts for real-world projects.

Course Features

• 5+ hours of animated video explanations

• Mini-projects in every section

• Quizzes and coding exercises for reinforcement

• Source code available for every lesson

• 2 complete website projects

About Us

We are Fabian and Pavel from Berlin. As freelance developers, we specialize in creating full-stack web applications for clients. Our mission is to share our programming knowledge with aspiring developers like you.

Our unique teaching style on YouTube has united thousands of web developers worldwide. This course aims to deliver quality education on a larger scale, providing more in-depth learning than possible in short YouTube videos.

Frequently Asked Questions

Do I need any prior knowledge?

    No prior coding experience is required. Absolute beginners will learn everything step-by-step.

What tools or software are required?

    A computer with internet access. We'll guide you through setting up any necessary software.

1. About the Course | Material | Downloads
2. Welcome to DAY 1 | Course Outline
3. Install Visual Studio Code
4. Download Course Material
5. DAY 1: HTML5 Fundamentals
6. What is HTML?
7. Create your first web page with HTML
8. Tags and Attributes
9. How to use the Code Editor Visual Studio Code
10. The Basic HTML Structure
11. Setting up a Live Server (Automatic Browser Refresh)
12. Add Images to your website
13. How to specify relative paths
14. Understanding HTML Images (Attributes)
15. Supplementary Lesson: Semantic HTML Tags
16. Text Formatting Tags
17. Add Hyperlinks to your website (anchor Tag)
18. Create Bookmark Links
19. Lists
20. Comments
21. HTML Beginner Project
22. Solution Code for the HTML Beginner Project
23. HTML Introduction
24. DAY 1: Advanced HTML Concepts
25. What to expect
26. Forms
27. Input Types
28. Developer Tools: How to Inspect a Website in the Browser
29. How to create tables ( tag)
30. Create a simple Layout with a table
31. Add Videos to your web page
32. Embed YouTube Videos
33. Define Tooltips
34. DAY 1: Introduction into CSS
35. What is CSS?
36. CSS Syntax
37. How to implement CSS in your HTML Code
38. Colors
39. Classes and IDs
40. CSS Introduction
41. DAY 2: CSS Basics Section
42. Welcome to DAY 2 | Section Outline
43. Control the Height and Width of Elements
44. Add Borders to your elements
45. The Border Shorthand
46. Margins
47. The Boxmodel
48. Boxsizing Border Box
49. Universal Selector
50. Understand the CSS Boxmodel
51. Block-level vs. inline-level elements
52. Display Property
53. Rounded Corners (border-radius property)
54. Text Styling Properties
55. Font Settings
56. font-family and font-weight
57. Center Elements
58. CSS fundamentals
59. DAY 3: CSS Intermediate Section
60. Welcome to DAY 3 | Section Outline
61. Background Property (Add Images to your website)
62. Transparent Colors, Alpha Values and Opacity
63. Linear-Gradient and Radial-Gradient
64. Shadows
65. Combinators
66. Attribute Selector
67. Pseudo-Classes
68. Transitions
69. Positions
70. Positions Mini Project: Create a Popup
71. Pseudo-Elements
72. CSS Variables | Custom Properties (Modern CSS Concept)
73. Crucial CSS concepts
74. DAY 4: Beginner Project | Create a multi-page website
75. Welcome to DAY 4 | Section Outline
76. Navigation Bar
77. Homepage
78. About Page
79. min-width and max-width
80. Products Page
81. Login Page
82. DAY 4: CSS Animations
83. Animations
84. Mini Project: Create a Loading Screen Animation
85. DAY 5: CSS Flexbox & Responsive Web Design
86. Welcome to DAY 5 | Section Outline
87. Horizontal and Vertical Alignment
88. flex-direction and gap
89. space-between, space-around, space-evenly
90. flex-wrap | align-content vs. align-items
91. Nested Flexbox Layouts & column-gap vs. row-gap
92. flex-grow vs. flex-shrink
93. Combine Flexbox with min-width & max-width
94. Media Queries
95. Extra Tips and Summary
96. PROJECT: Build a Responsive Flexbox Layout
97. SOLUTION: Build a Responsive Flexbox Layout
98. DAY 6: CSS Grid
99. Welcome to DAY 6 | Section Outline
100. Columns and Rows
101. Alignment within a grid cell
102. Automatic Columns and Rows for infinite grids
103. grid-auto-flow
104. Stretch Element Across Multiple Cells
105. Create a complex Bento Grid with grid-template-areas
106. Create Responsive CSS Grid Layouts with GRID WRAPPING
107. What comes next?
108. DAY 6 EXTRA: Modern CSS Mix
109. About this section
110. Create a Responsive Navigation Bar with Sidebar Animation
111. :not() and :has() pseudo-classes
112. Create Border Animations using conic-gradients and custom-properties
113. DAY 7 PROJECT: Build & Deploy a Portfolio Website
114. Welcome to DAY 7 | Section Outline
115. Preparations
116. Header Exercise
117. Header Section
118. My Skillset Section
119. Project Section
120. Footer & Responsive Web Design
121. Deploy the website (optional)
122. NEXT STEPS
123. Final thoughts

Have you been coding CSS for some time, but want to take your game to the next level? Do you feel confused with CSS jargon like inheritance, specificity, or the cascade?

What if there was one resource, one place, where you could learn all the advanced and modern CSS techniques and properties you've been reading about?

Good news: there is!

Welcome to "Advanced CSS and Sass", the most advanced, the most modern, and the most complete CSS course on the internet. It's everything you want in an advanced CSS course, and more.

You will learn complex CSS animations, advanced responsive design techniques, flexbox layouts, Sass, CSS architecture, fundamental CSS concepts, and so much more.

Like in all my courses, you will build beautiful and carefully designed projects, that will make you proud of yourself and leave you ready to build complex projects on your own.

After finishing this course, you will:

1) Be up to speed with the most modern and advanced CSS properties and techniques;

2) Have mastered the cutting-edge layout technologies Flexbox and CSS Grid;

3) Be ready to build responsive layouts for all kinds of devices and situations;

4) Truly understand how CSS works behind the scenes;

5) Be able to architect large CSS codebases for reusability and maintainability using Sass.

Please note that this course is NOT for absolute beginners, so you should already be at an intermediate level in HTML and CSS (please check out my other course if that's not the case).

This course is massive, coming in at 28+ hours. Here is exactly what you will learn:

• Tons of modern cutting-edge CSS techniques to create stunning designs and effects: clip-path, background-clip, mask-image, background-blend-mode, shape-outside, filter, backdrop-filter, object-fit, transform, column-count, hyphens, perspective, calc() and custom CSS properties;

• Advanced CSS animations with @keyframes, animation, and transition;

• Advanced CSS selectors, pseudo-classes, and pseudo-elements required for modern CSS development;

• How CSS works behind the scenes: the cascade, specificity, inheritance, value processing, the visual formatting model, the box model, box types, positioning schemes, and stacking contexts;

• CSS architecture: The 7-1 rule, component-based design, the BEM methodology, writing reusable, maintainable, and scalable code;

• Introduction to Sass: variables, nesting, partials, imports, mixins, functions, extends, and more;

• Using Sass in real-world projects: setting global variables, building for reusability, architecting CSS, and managing media queries;

• The NPM ecosystem: setting up a development process to compile Sass and automatic browser reload, and creating a build process to concatenate, prefix, and compress CSS files;

• Modern responsive design: fluid grids, layout types, flexible images, using media queries to test for different screen widths, pixel densities, and touch capabilities;

• Advanced responsive design workflows: mobile-first vs desktop-first strategies, selecting breakpoints, em vs rem units and feature queries to test for browser support;

• Responsive images in HTML and CSS for faster pageloads: resolution switching, density switching, art direction;

• SVG images in HTML and CSS: how and why to use SVG, generating SVG sprites, changing SVG colors in CSS and best practices;

• Videos in HTML and CSS: building a background video effect;

• Flexbox layouts: main concepts, introduction to both flex container and flex item-specific properties, advanced positioning techniques applied to a huge real-world project;

• CSS Grid layouts: main concepts, CSS grid vs flexbox, and layout techniques applied to a real-world project. This part alone could be an entire course!

Why should you take this course?

So you saw that the course is absolutely full-packed with content. But maybe you're still not sure if you should actually learn advanced CSS?

That's probably because CSS is so easy to get started with. In fact, most developers highly underestimate the importance and power of CSS. But nothing could be further away from the truth!

CSS is what makes our design come to life. And there is so much we can do with it! Mastering advanced techniques like flexbox, CSS grid, and animations, will give you an edge over many CSS developers out there who still use outdated methods.

Plus, CSS can become a real nightmare when you try to master it, and when you have to maintain large projects. So having a good grasp on fundamental concepts is an absolute must for any serious front-end developer.

And this course will help you with all that!

So, should you take this course? The answer is most likely a big YES!

And I packed so much content into this course, that no matter if you're just starting out, or if you're already an experienced front-end developer, there is definitely gonna be something for you in this course.

And this is what you get by signing up today:

• 28h of Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business students)

• Professional English captions (not the auto-generated ones)

• Downloadable design assets + starter code and final code for each section

• Downloadable slides for theory videos (not boring, I promise!)

• Free support in the course Q&A

• Lots of small challenges are included in the videos so you can track your progress.

If you're still with me at this point, then please watch the promo video to take a look at the course projects, and I promise you will be amazed :)

After that, I hope to welcome you as a new student in my course. I'm sure you're gonna love it!

1. Welcome, Welcome, Welcome!
2. Welcome to the Most Advanced CSS Course Ever!
3. READ BEFORE YOU START!
4. Setting up Our Tools
5. Natours Project — Setup and First Steps (Part 1)
6. Section Intro
7. Project Overview
8. Building the Header - Part 1
9. Building the Header - Part 2
10. Creating Cool CSS Animations
11. Building a Complex Animated Button - Part 1
12. Building a Complex Animated Button - Part 2
13. How CSS Works: A Look Behind the Scenes
14. Section Intro
15. Three Pillars of Writing Good HTML and CSS (Never Forget Them!)
16. How CSS Works Behind the Scenes: An Overview
17. How CSS is Parsed, Part 1: The Cascade and Specificity
18. Specificity in Practice
19. How CSS is Parsed, Part 2: Value Processing
20. How CSS is Parsed, Part 3: Inheritance
21. Converting px to rem: An Effective Workflow
22. How CSS Renders a Website: The Visual Formatting Model
23. CSS Architecture, Components and BEM
24. Implementing BEM in the Natours Project
25. Introduction to Sass and NPM
26. Section Intro
27. What is Sass?
28. First Steps with Sass: Variables and Nesting
29. First Steps with Sass: Mixins, Extends and Functions
30. A Brief Introduction to the Command Line
31. NPM Packages: Let's Install Sass Locally
32. NPM Scripts: Let's Write and Compile Sass Locally
33. The Easiest Way of Automatically Reloading a Page on File Changes
34. Natours Project — Using Advanced CSS and Sass (Part 2)
35. Section Intro
36. Converting Our CSS Code to Sass: Variables and Nesting
37. Implementing the 7-1 CSS Architecture with Sass
38. Review: Responsive Design Principles and Layout Types
39. Building a Custom Grid with Floats
40. Building the About Section - Part 1
41. Building the About Section - Part 2
42. Building the About Section - Part 3
43. Building the Features Section
44. Building the Tours Section - Part 1
45. Building the Tours Section - Part 2
46. Building the Tours Section - Part 3
47. Building the Stories Section - Part 1
48. Building the Stories Section - Part 2
49. Building the Stories Section - Part 3
50. Building the Booking Section - Part 1
51. Building the Booking Section - Part 2
52. Building the Booking Section - Part 3
53. Building the Footer
54. Building the Navigation - Part 1
55. Building the Navigation - Part 2
56. Building the Navigation - Part 3
57. Building a Pure CSS Popup - Part 1
58. Building a Pure CSS Popup - Part 2
59. Natours Project — Advanced Responsive Design (Part 3)
60. Section Intro
61. Mobile-First vs Desktop-First and Breakpoints
62. Let's Use the Power of Sass Mixins to Write Media Queries
63. Writing Media Queries - Base, Typography and Layout
64. Writing Media Queries - Layout, About and Features Sections
65. Writing Media Queries - Tours, Stories and Booking Sections
66. An Overview of Responsive Images
67. Responsive Images in HTML - Art Direction and Density Switching
68. Responsive Images in HTML - Density and Resolution Switching
69. Responsive Images in CSS
70. Testing for Browser Support with @supports
71. Setting up a Simple Build Process with NPM Scripts
72. Wrapping up the Natours Project: Final Considerations
73. Trillo Project — Master Flexbox!
74. Section Intro
75. Why Flexbox: An Overview of the Philosophy Behind Flexbox
76. A Basic Intro to Flexbox: The Flex Container
77. A Basic Intro to Flexbox: Flex Items
78. A Basic Intro to Flexbox: Adding More Flex Items
79. Project Overview
80. Defining Project Settings and Custom Properties
81. Building the Overall Layout
82. Building the Header - Part 1
83. Building the Header - Part 2
84. Building the Header - Part 3
85. Building the Navigation - Part 1
86. Building the Navigation - Part 2
87. Building the Hotel Overview - Part 1
88. Building the Hotel Overview - Part 2
89. Building the Description Section - Part 1
90. Building the Description Section - Part 2
91. Building the User Reviews Section
92. Building the CTA Section
93. Writing Media Queries - Part 1
94. Writing Media Queries - Part 2
95. Wrapping up the Trillo Project: Final Considerations
96. A Quick Introduction to CSS Grid Layouts
97. Section Intro
98. Why CSS Grid: A Whole New Mindset
99. Quick Setup for This Section
100. Creating Our First Grid
101. Getting Familiar with the fr Unit
102. Positioning Grid Items
103. Spanning Grid Items
104. Grid Challenge
105. Grid Challenge: A Basic Solution
106. Naming Grid Lines
107. Naming Grid Areas
108. Implicit Grids vs. Explicit Grids
109. Aligning Grid Items
110. Aligning Tracks
111. Using min-content, max-content and the minmax() function
112. Responsive Layouts with auto-fit and auto-fill
113. Nexter Project — Master CSS Grid Layouts!
114. Project Overview and Setup
115. Building the Overall Layout - Part 1
116. Building the Overall Layout - Part 2
117. Building the Features Section - Part 1
118. Building the Features Section - Part 2
119. Building the Story Section - Part 1
120. Building the Story Section - Part 2
121. Building the Homes Section - Part 1
122. Building the Homes Section - Part 2
123. Building the Gallery - Part 1
124. Building the Gallery - Part 2
125. Building the Footer
126. Building the Sidebar
127. Building the Header - Part 1
128. Building the Header - Part 2
129. Building the Realtors Section
130. Writing Media Queries - Part 1
131. Writing Media Queries - Part 2
132. Browser Support for CSS Grid
133. Wrapping up the Nexter Project: Final Considerations
134. That's It, Everyone!
135. See You Next Time, CSS Master!
136. My Other Courses + Updates

**Brand new HTML & CSS course, just released in February 2023**

** Check out the promo video to see the beautiful, responsive projects we build in this course! **

This course will teach you everything you need to know about HTML, CSS, and web design to build your own stunning websites from scratch. Instead of just watching me code, you’ll learn how to structure and build any website you can think of.

My background is in teaching in-person bootcamp programs around the world, where I work directly with students to help them learn web development and change careers. This course is based on all my experience in the classroom. Unlike most Udemy courses, this course includes dozens of exercises and challenges which ask you to recreate components, build layouts, and practice HTML and CSS. Practice is the most important tool I have to help you learn, and this course includes lots of it!

This course covers a huge amount of information, but it’s designed to be approachable for complete beginners and intermediate developers alike.

• We start with the basics of HTML: structuring documents, creating text elements, tables, and forms. Then we learn about semantic markup and creating accessible webpages

• Next, we cover the basics of CSS: working with selectors, color systems, and styling text elements.

• From there, we cover critical CSS concepts including the box model, specificity, the cascade, and CSS units.

• Next you’ll learn all about backgrounds, gradients, filters, positioning elements, working with transitions and transformations, and many other more intermediate CSS properties.

• We then spend nearly 10 hours learning how to create complex CSS layouts using Flexbox and CSS Grid. We then build multiple projects with complicated layouts.

• You’ll learn how to build responsive layouts that look good on all screen sizes, from large desktops to tablets and mobile devices.

• Finally, we wrap up the course with our massive final project that we build together from scratch. This project combines everything we’ve learned in the course into one huge website built with thousands of lines of HTML & CSS. Check out the promo video to learn more about the final project.

  
  

This course includes:

• Over 37 hours of high quality videos

• Downloadable assets, starter coder, and solutions for all sections

• Dozens of exercises, challenges, and quizzes

• Downloadable slides and cheatsheets, including beautiful diagrams and syntax references

• Included support in the course Q&A forums

• Access to our exclusive discord community with thousands of students

About me (your instructor)

I’m a teacher with extensive real-world teaching experience. I’ve taught thousands of students how to code at my in-person coding bootcamps around the globe. My graduates work at companies including Google, Tesla, Apple, Airbnb, and pretty much any big company you can name. My in-person teaching background informs the online experiences I create for students. Unlike most Udemy instructors, I’ve actually taught this material in a classroom full of students for nearly a decade. I know what works and what doesn’t work!

1. Introduction
2. Welcome & Curriculum Overview
3. Join Our Chat Community
4. Important Note On Leaving Feedback!
5. A First Taste of HTML & CSS
6. How The Web Works
7. The Roles of HTML, CSS, and JS
8. Quick Quiz On The Roles of HTML & CSS
9. Installing The Tools We Need
10. Configuring VSCode
11. Important Note On The Course Exercises
12. HTML Basics
13. Introducing HTML
14. The Basic HTML Workflow
15. The Paragraph Element
16. Mozilla Developer Network
17. Chrome Developer Tools
18. Document Structure
19. Creating HTML Comments
20. Creating Headings
21. HTML Basics Exercise
22. More HTML
23. Working With HTML Lists
24. The Em, Strong, B, and I Elements
25. Nesting Elements
26. Superscript and Subscript
27. Inline Vs. Block Elements
28. Creating Links
29. Other Types of Links
30. Creating Images
31. Pasta Recipe Exercise
32. Working With Forms
33. Creating Text Inputs and Buttons
34. The Form Element
35. Name and Placeholder Attributes
36. Properly Labelling Form Controls
37. Other Types of Inputs
38. Checkboxes, Textareas, and Range Inputs
39. Selects and Radio Button Groupings
40. Course Landing Page Form Exercise
41. Other Elements
42. Spans
43. Divs
44. Tables
45. Semantic Markup
46. Semantic Elements
47. CSS Basics
48. Getting Our Starter Code
49. Working Within Inline Styles
50. Writing Internal Styles
51. External Styles: The Best Way To Write Styles
52. Quick Note on Codepen
53. Anatomy of CSS
54. The Element Selector
55. CSS Basics Exercise
56. The World of CSS Colors
57. Working with background-color
58. Quick Tip: MDN & Comments
59. Named Colors
60. Understanding RGB Colors
61. Hexadecimal Colors
62. RGBA Colors and Opacity
63. Colors Quiz
64. CSS Inheritance
65. CSS Colors Exercise
66. Styling Text
67. Changing Fonts with Font-Family
68. Font-size, font-weight, and font-style
69. Changing Text Alignment
70. Line-height, letter-spacing, and word-spacing
71. Adding Custom Fonts With Google Fonts
72. Styling Text Exercise
73. Creating Text Shadows
74. Our First Mini Project: Cantilever
75. More Text Styling
76. Text-transform & text-decoration
77. The ID Selector
78. The Class Selector
79. Styling Lists
80. Styling Links and :hover Pseudo-Class
81. The Font Shorthand Property
82. Leafy Seadragon Exercise
83. Selectors Pt. 1
84. The Universal Selector
85. The Attribute Selector
86. Grouping Selectors
87. Descendant & Child Combinators
88. Compound Selectors
89. CSS Selectors Exercise
90. The Box Model
91. Introducing The Box Model
92. Working With Borders
93. Width, Height, and Percentages
94. Adding Padding to Elements
95. Working With Margins
96. The Alternate Box Model
97. The Display Property
98. Display: None
99. Negative Margin & Margin Auto
100. Margin Collapsing: WTF?
101. A Common Layout Pattern
102. Min and Max Width
103. Rounding Elements With Border Radius
104. Box Shadows
105. Working With Overflow
106. Ski Resort Exercise
107. Artist Portfolio Project
108. Introducing Our Project
109. Basic Project Setup
110. Writing The Navbar Markup
111. Styling The Navbar
112. Finishing Up The Navbar
113. Creating The Photo Grid
114. Continuing The Photo Grid
115. Finishing The Photo Grid
116. Adding The Footer Content
117. Specificity and The Cascade
118. Section Introduction
119. The Sibling Combinator
120. Working With Pseudo-Classes
121. Styling Pseudo-Elements
122. CSS Selectors Pt. 2 Exercise
123. The Basics of Specificity
124. Inline Styles and Specificity
125. Calculating Specificity Values
126. !important and The Cascade
127. Wrapping Up The Cascade
128. Cascade & Specificity Quiz
129. Blog Post Project
130. Introducing Our Blog Post Project
131. Centering The Main Content
132. Working on Typography
133. Creating the Headline Section
134. Implementing Our Headings
135. Adding In Code Styles
136. Creating the Footer
137. Writing The Full Size Hero
138. CSS Units
139. Absolute Units: Pixels, Centimeters, and More!
140. Working With Percentages
141. The Joy of Rem Units
142. Understanding The Em Unit
143. Vw and Vh Units
144. CSS Units Quiz
145. Which Units Should You Use?
146. Working With Floats
147. Hazel CV Project
148. Introducing The Project
149. Setting Up The Navbar
150. Finishing The Navbar
151. Starting The Hero Content
152. Making The Skills Section
153. Creating The Blog Section
154. Adding The Events Section
155. Making A Simple Footer
156. Backgrounds, Gradients, & Filters
157. Working With Background Images
158. Controlling Background-Repeat
159. Sizing Our Background
160. Positioning Background
161. Working With Background-Clip
162. Background Exercise
163. An Important Note About Gradients!
164. Creating Linear Gradients
165. Radial, Conic, and Repeating Gradients
166. The Background Shorthand Property
167. Fancy CSS Filters
168. Positioning
169. Introducing Positioning
170. Relative Positioning
171. Controlling Layers With Z-Index
172. Absolute Positioning Pt 1
173. Absolute Positioning Pt 2
174. Creating A Button Badge
175. Fixed Positioning
176. Positioning Exercise #1
177. Positioning Exercise #2
178. Positioning Exercise #3
179. Transitions and Transforms
180. Introducing Transitions
181. The Basic Transition Syntax
182. Working With Multiple Transitions
183. Transition Timing Functions
184. Transition Delays
185. Understanding Animation Performance
186. Introducing Transforms
187. Other Types of Transformations
188. Transform Origin
189. Building Fancy Button Hover Effects
190. Flexbox: Part 1
191. Introducing Flexbox
192. Display: Flex and Flex Axis
193. Working With Flex-Direction
194. Flexbox Exercise 1
195. Flex-Wrap
196. Justify-Content
197. Flexbox Exercise 2
198. Align-Items
199. Flexbox Exercise 3
200. Align-Content