Top 9 Recommended HTML CSS Self-Study Materials! [September 2023]

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

Want to learn Web Design & Web Development Skills? Then this is the RIGHT course For you! Many languages came and disappear but JavaScript is language that is enjoying a high run and demand in the programming world. The very first things you need to learn HTML5, CSS3, JavaScript and JQuery to become a Web Developer and off-course some Web Design Guidelines. This course will exactly teach you all these New Skills to become a good Web Developer. In this course, you will also learn Web Design Guidelines, which you can apply to Real World Websites.

This course will first give basic understanding of HTML5, CSS3, JavaScript, JQuery and then by combining all these skills, you will Build a Modern Looking Responsive Website which will look Great on all the Small and Wide Screens.

JavaScript is THE most important programming language you need to learn as a web developer - and with this course, you make sure that you will not miss a single thing you have to know as a JavaScript developer!

This is the most comprehensive and modern course you can find on JavaScript - it's based on all my JavaScript knowledge AND teaching experience. It's both a complete guide, starting with the core basics of the language, as well as an extensive reference of the JavaScript language and environment, ensuring that both newcomers as well as experienced JavaScript developers get a lot out of this course!

It's a huge course because it's packed with important knowledge and helpful content. From the core basics, over advanced concepts and JavaScript specialties, all the way up to expert topics like performance optimization and testing - this course has it all. My goal was to create your go-to resource for the JavaScript language, which you can not just use for learning it but also as a resource you can come back to and look up important topics.

1. Introduction of web design
2. Basic requirements to build web applications
3. Web terminology
4. Web server
5. Web site
6. Web page
7. Basics
8. Introduction of HTML
9. Brief discription on HTML
10. Structure of Html document scope
11. Body Section
12. Headings,paragraph and Blockquotes
13. Introduction of headings
14. Example of headings
15. Introduction of paragraph and blockquotes
16. Example of paragraph and blockquotes
17. Ordered list and unordered list
18. Introduction of Ordered list
19. Example of ordered list
20. Introduction of Unordered list
21. Example of Unordered list
22. Blankspaces,pre-formatted text,Acronyms,Details and summary
23. Line break in html
24. Blankspaces in Html
25. Pre-formatted text in Html
26. Acronyms in Html
27. Details and Summary in Html
28. Datalist with terms and definitions
29. Introduction of Datalist
30. Example of Datalist with terms and definitions
31. Text formatting in Html
32. Introduction to text formatting in Html
33. Explanation of font element with example
34. Explanation of font styles with example
35. Explanation of font effects with example
36. Images in Html
37. Explanation of Image Element in Html
38. Example of image element
39. Links in Html
40. Explanation of Horizontal line
41. Introduction to Links in Html
42. Explanation of Intra links with Example
43. Explanation of inter links with example
44. Tables in Html
45. Explanation of Tables in Html
46. Example of Tables in Html
47. Forms in Html
48. Explanation of forms in Html
49. Example of forms in Html
50. Example of Dropdownlist and Listbox
51. Fieldset,Radio Button and Checkbox with Examples
52. Explanation of Progress and Meter
53. Explanation on Textarea and buttons
54. Marquee in HTML
55. Styles in Html
56. Explanation of styles in Html with examples
57. Introduction of CSS
58. Explanation on Type selectors in CSS
59. Javascript
60. javascript introduction
61. Integrating Javascript into HTML page
62. javascript Refering HTML elements
63. javascript output properties and methods
64. javascript output properties and methods part-2
65. Handling inputs in javascript
66. Javascript Variables
67. Javascript Datatypes
68. Non-primitive types in javascript
69. Javascript Regular-expressions
70. Javascript Operators
71. javascript Operators part-2
72. javascript Control-flow statements
73. javascript Built-in objects
74. javascript Browser objects
75. Javascript Browser objects part-2
76. Javascript Events
77. Real-world food delivery application

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

This is a purely project-based course. It is geared toward beginners, but intermediate developers can also enjoy creating new things. This course includes 50 mini projects in HTML, CSS & JavaScript that relate to the DOM (Document Object Model). Here is a list of what we will create in this course:

1. Expanding Cards

2. Progress Steps

3. Rotating Navigation Animation

4. Hidden Search Widget

5. Blurry Loading

6. Scroll Animation

7. Split Landing Page

8. Form Wave

9. Sound Board

10. Dad Jokes

11. Event Keycodes

12. Faq Collapse

13. Random Choice Picker

14. Animated Navigation

15. Incrementing Counter

16. Drink Water

17. Movie App

18. Background Slider

19. Theme Clock

20. Button Ripple Effect

21. Drag N Drop

22. Drawing App

23. Kinetic Loader

24. Content Placeholder

25. Sticky Navbar

26. Double Vertical Slider

27. Toast Notification

28. Github Profiles

29. Double Click Heart

30. Auto Text Effect

31. Password Generator

32. Good Cheap Fast

33. Notes App

34. Animated Countdown

35. Image Carousel

36. Hoverboard

37. Pokedex

38. Mobile Tab Navigation

39. Password Strength Background

40. 3d Background Boxes

41. Verify Account UI

42. Live User Filter

43. Feedback UI Design

44. Custom Range Slider

45. Netflix Mobile Navigation

46. Quiz App

47. Testimonial Box Switcher

48. Random Image Feed

49. Todo List

50. Insect Catch Game

    
    

Many people jump into a frontend framework too early. Learning vanilla JavaScript and understanding how the document object model works are essential before moving to a framework. This course teaches you this by creating real-world projects of all types.

You will also learn more about HTML5 and CSS including semantic tags in your markup, basic CSS properties such as colors, alignment, flexbox, and shadows as well as creating responsive layouts with CSS media queries, CSS custom properties, animations/transitions, and more.

50 projects may seem like a lot, but we were able to make them small enough to where you can complete a project in just a few hours. Of course, this depends on your skill level.

1. Introduction
2. Welcome
3. My Environment & Setup
4. Project Starter Boilerplate
5. Course Projects Code & Demos
6. Day 1 - Expanding Cards
7. Project Intro
8. Initial Cards
9. Expanding Effect
10. Day 2 - Progress Steps
11. Project Intro
12. Creating The Steps
13. Step Functionality
14. Day 3 - Rotating Navigation
15. Project Intro
16. Content & Circle Styling
17. Rotate & Slide Effect
18. Day 4 - Hidden Search Widget
19. Project Intro
20. Hidden Search Widget
21. Day 5 - Blurry Loading
22. Project Intro
23. Background Image & Loading Text
24. Load Blur Effect
25. Day 6 - Scroll Animation
26. Project Intro
27. Scroll Animation
28. Day 7 - Split Landing Page
29. Project Intro
30. Split Landing Page HTML & CSS
31. Adding The Hover Effect
32. Day 8 - Form Wave Animation
33. Project Intro
34. Styling The Form
35. Adding The Wave Effect
36. Day 9 - Sound Board
37. Project Intro
38. Sound Board Project
39. Day 10 - Dad Jokes
40. Project Intro
41. Jokes HTML & CSS
42. Working With Fetch & HTTP Requests/Responses
43. Fetching & Displaying Jokes
44. Day 11 - Event KeyCodes
45. Project Intro
46. Key Boxes HTML & CSS
47. Display Key Codes
48. Day 12 - FAQ Collapse
49. Project Intro
50. FAQ Boxes
51. Toggle Buttons
52. Day 13 - Random Choice Picker
53. Project Intro
54. Choice Picker UI
55. Create Tags
56. Select Random Tag
57. Day 14 - Animated Navigation
58. Project Intro
59. Nav Styling
60. Icon Styling & Active Toggle
61. Day 15 - Incrementing Counter
62. Project Intro
63. Counters HTML & CSS
64. Create & Display Increment
65. Day 16 - Drink Water
66. Project Intro
67. Create & Style The Cups
68. Fill Small Cups
69. Update Big Cup
70. Day 17 - Movie App
71. Project Intro
72. Movies UI Layout
73. Fetching Data From The API
74. Adding Movies To The DOM
75. Day 18 - Background Slider
76. Project Intro
77. HTML & CSS
78. Changing Slides
79. Day 19 - Theme Clock
80. Project Intro
81. Starting The Clock
82. Finish Clock Styling
83. Mode & Clock Function
84. Day 20 - Button Ripple Effect
85. Project Intro
86. Button Style & Animation
87. Button Click Effect
88. Day 21 - Drag N Drop
89. Project Intro
90. Create Drop Boxes
91. Drag Drop Events
92. Day 22 - Drawing App
93. Project Intro
94. Drawing Pad UI
95. Canvas Shapes
96. Mouse Events & Drawing
97. Toolbox Controls
98. Day 23 - Kinetic CSS Loader
99. Project Intro
100. Kinetic CSS Loader
101. Day 24 - Content Placeholder
102. Project Intro
103. Card HTML
104. Card CSS
105. Animation Timeout Effect
106. Day 25 - Sticky Navbar
107. Project Intro
108. Website Content & Style
109. Navbar CSS & JS
110. Day 26 - Double Vertical Slider
111. Project Intro
112. Vertical Slider UI
113. Vertical Slider Function
114. Day 27 - Toast Notification
115. Project Intro
116. Create Toast Notifications
117. Day 28 - Github Profiles
118. Project Intro
119. Github Profile Card
120. Fetching Profile Data With Axios
121. Dynamic Profile Cards
122. Adding Repos To Card
123. Day 29 - Double Heart Click
124. Project Intro
125. HTML & CSS
126. Show Heart Based On Click Position
127. Day 30 - Auto Text Effect
128. Project Intro
129. Auto Text Effect
130. Day 31 - Password Generator
131. Project Intro
132. Password Generator UI
133. Random Functions
134. Generate Password
135. Copy Password To Clipboard
136. Day 32 - Good, Cheap, Fast Checkboxes
137. Project Intro
138. Style Checkboxes
139. Check Ball Animation
140. JavaScript Logic
141. Day 33 - Notes App
142. Project Intro
143. Notes HTML & CSS
144. Adding Notes To The DOM
145. Save Notes To Local Storage
146. Day 34 - Animated Countdown
147. Project Intro
148. Counter & Final Sections
149. In & Out Animations
150. Dynamic Animation With JS
151. Day 35 - Image Carousel
152. Project Intro
153. Carousel UI
154. Carousel Functionality
155. Day 36 - Hoverboard
156. Project Intro
157. Styling The Board Squares
158. Hoverboard Effect
159. Day 37 - Pokedex
160. Project Intro
161. Pokedex UI & Styling
162. Fetching Pokemon Data
163. Creating The Pokemon Cards
164. Day 38 - Mobile Tab Navigation
165. Project Intro
166. Create & Style UI
167. Navigation Effect
168. Day 39 - Password Strength Background
169. Project Intro
170. Creating The Form & Background
171. Change Blur On Input
172. Day 40 - 3D Background Boxes
173. Project Intro
174. Creating The Button & Boxes
175. Background Position & Rotate Event
176. Day 41 - Verify Account UI
177. Project Intro
178. Verify Account UI Project
179. Day 42 - Live User Filter
180. Project Intro
181. User List UI
182. Fetch & Filter Users
183. Day 43 - Feedback UI Design
184. Project Intro
185. Feedback Boxes
186. Select & Submit Feedback
187. Day 44 - Custom Range Slider
188. Project Intro
189. Styling The Range
190. Label Value & Movement
191. Day 45 - Netflix Navigation
192. Project Intro
193. Netflix Nav - Part 1
194. Netflix Nav - Part 2
195. Day 46 - Quiz App
196. Project Intro
197. Quiz UI
198. Quiz Functionality
199. Day 47 - Testimonial Box Switcher
200. Project Intro