CF

Modern HTML & CSS From The Beginning Course

24h 21m 52s
English
Paid

Modern HTML & CSS From The Beginning Course is a 200-lesson 24 hours 21 minutes self-paced course by Brad Traversy. Unlock your potential by mastering HTML and CSS from the ground up with our comprehensive course.

Course facts

Lessons
200
Duration
24 hours 21 minutes
Level
All levels
Language
English
Updated
Instructor
Brad Traversy
Price
Premium

Unlock your potential by mastering HTML and CSS from the ground up with our comprehensive course. Whether you're a complete beginner or a seasoned developer looking to refine your skills, this course is designed to cater to your needs.

Course Overview

Dive into hours of immersive training with structured modules that cover everything from CSS properties and concepts to practical mini-projects. Challenge yourself with three full-fledged projects, which you’ll deploy on popular platforms like Netlify and Vercel.

Key Learning Outcomes

  • Structured Learning Path: Includes modules, mini-projects, assignments, and 3 comprehensive real-world projects.
  • HTML & CSS Foundations: Master semantic HTML5 markup and essential CSS basics.
  • Advanced Layout Techniques: Explore the Box Model, positioning, Flexbox, and CSS Grid.
  • Responsive Design: Learn how to create mobile-friendly websites using media queries, flexible layouts, and relative units.
  • Dynamic Styling: Implement transitions, transformations, and animations with keyframes.
  • BEM Methodology: Gain proficiency in using the Block Element Modifier approach for cleaner code.
  • Version Control & Deployment: Learn to use Git for version control and deploy sites efficiently.

Who teaches Modern HTML & CSS From The Beginning Course? Brad Traversy

Brad Traversy thumbnail

Brad Traversy is a US developer behind Traversy Media — one of the largest independent web-development YouTube channels, with millions of subscribers and one of the most-viewed introductory tutorial libraries on the platform. He has been publishing daily-or-near-daily web development content continuously for nearly a decade and has anchored a generation of self-taught developers' first exposure to HTML, CSS, JavaScript, and the modern framework landscape.

The course catalog (sold via Udemy and the standalone Traversy platform) covers the full web-development stack: HTML and CSS fundamentals, JavaScript, React (including Next.js), Vue, Node.js, Express, MongoDB, full-stack MERN applications, Tailwind CSS, modern CSS layout, and the surrounding tooling. Brad's teaching style is calm, patient, and deliberately accessible to absolute beginners.

The CourseFlix listing under this source carries over 17 Brad Traversy courses spanning that range. Material is paid and aimed primarily at self-taught developers building real proficiency with web development from a clean start.

What lessons are included in Modern HTML & CSS From The Beginning Course?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 200 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome To The Course
All Course Lessons (200)
#Lesson TitleDurationAccess
1
Welcome To The Course Demo
05:08
2
How The Web Works
07:33
3
The Role Of HTML & CSS In Web Development
06:36
4
VS Code & Environment
06:33
5
Premium Docs
01:54
6
Section Intro
01:09
7
Creating & Opening HTML Files
05:45
8
HTML Tags & Attributes
05:09
9
Document Structure
06:13
10
Live Server & Prettier
05:21
11
Sandbox Files Setup
03:10
12
Meta Tags & Search Engines
09:52
13
Headings, Paragraphs & Text Emphasis
08:57
14
Browser Devtools Intro
05:08
15
Lists
05:33
16
Anchor Tags (Links)
08:31
17
Images
05:55
18
Block vs. Inline Elements
06:44
19
Line Breaks, Horizontal Rules & Entities
06:03
20
Divs & Spans
05:55
21
Classes & IDs
06:43
22
Semantic Elements
06:36
23
Emmet Crash Course
08:37
24
Keyboard Shortcuts
08:57
25
Pricing Grid HTML Challenge
09:07
26
Section Intro
00:58
27
Form & Input Tags
05:06
28
Text-Based Inputs
06:56
29
Input Field Attributes
06:55
30
Select Boxes & Textareas
05:35
31
Checkboxes & Radio Buttons
05:02
32
Other Input Types
04:25
33
Datalist
07:51
34
HTML Form Challenge
05:33
35
Section Intro
00:49
36
Audio Element
06:41
37
Video Element
03:12
38
Image Map
04:53
39
Tables
05:34
40
Iframe
05:01
41
Global Attributes
09:16
42
SVG Element
06:20
43
Popover & Details
04:27
44
Progress & Meter
05:09
45
Section Intro
01:03
46
Implementing CSS
08:14
47
Basic Selectors
12:41
48
Fonts In CSS
07:13
49
Font & Text Properties
09:10
50
Colors (Color Names, Hex, RGB, HSL)
12:28
51
CSS Specificity
05:13
52
Backgrounds
09:40
53
Styling Links & Link States
04:25
54
Font Awesome Icons
07:32
55
CSS Basics Challenge
09:26
56
Section Intro
01:16
57
Box Model Explained
03:21
58
Sizing & Overflow
07:49
59
Padding
05:55
60
Margin
07:01
61
Universal Selector & Resetting
04:28
62
Borders
05:34
63
Display Property
08:05
64
Position Property
10:30
65
Box Shadow
04:23
66
Freelance Form Mini-Project
12:29
67
Shoe Cards Mini-Project
12:10
68
Section Intro
01:46
69
What Is Flexbox?
04:48
70
Flexbox Basics - Containers & Items
07:19
71
Align & Justify
10:20
72
Flex Properties & Dynamic Sizing
10:04
73
Flex Order
02:55
74
Flexbox Layout Challenge
07:22
75
Pricing Cards Mini-Project
21:31
76
Section Intro
01:41
77
What Is Responsive Design?
07:54
78
Flexible Layout & Percentages
06:56
79
rem & em Units
12:54
80
vh & vw Units
04:41
81
Media Queries
10:56
82
Responsive Pricing Grid
04:48
83
Responsive Flexbox Layout
06:16
84
Container Queries
07:55
85
Container Units
05:28
86
Project Intro
01:33
87
Setup & HTML
08:44
88
Base CSS & Header Styles
06:37
89
Main Content Flex & Alignment
04:25
90
Inner Styles
06:42
91
Mobile Layout & Media Queries
08:20
92
Section Intro
02:18
93
Custom Properties
10:34
94
Vendor Prefixes
03:35
95
Filters
07:04
96
Smooth Scroll Mini-Project
11:30
97
Sticky Nav & Style On Scroll
11:36
98
calc() Function
06:08
99
Nesting
12:27
100
Project Intro
03:47
101
Setup & Base CSS
05:56
102
Header & Navigation
09:51
103
Hero Text
06:40
104
Custom Properties
02:42
105
Gallery Section
07:49
106
Footer
05:56
107
About Page
09:28
108
Contact Page
15:53
109
Image Lightbox Effect
04:51
110
Section Intro
02:01
111
Intro To Git & GitHub
08:43
112
Generate SSH Keys
07:06
113
Git Workflow & Commands
09:42
114
Deploy Website To Netlify
03:55
115
Contact Form Submissions
04:05
116
Configure a Domain Name
03:46
117
Section Intro
01:11
118
What is Web Accessibility?
08:08
119
Skilltide Browser Extension
04:33
120
Screen Reader Testing
14:22
121
Role Attribute
17:08
122
ARIA Attributes
08:09
123
Aria Expanded & Dynamic Content
06:23
124
Section Intro
02:13
125
Attribute Selectors
06:45
126
Child & Sibling Combinators
06:57
127
Pseudo Elements
05:28
128
Pseudo Classes - first-child, last-child & nth-child
05:08
129
Pseudo Classes - first-of-type, last-of-type, nth-of-type
06:36
130
:before & :after Pseudo Classes
06:00
131
Image Overlay Using :before
09:46
132
is(), where() & has()
05:47
133
Styling Forms
11:03
134
Selectors Challenge
09:15
135
Section Intro
02:10
136
CSS Grid Overview
06:21
137
Grid Columns & Gap
08:24
138
repeat() & minmax()
03:38
139
Grid Rows
05:05
140
Grid Challenge 1
03:02
141
Align & Justify Properties
05:28
142
repeat() with autofill & autofit
05:49
143
Positioning & Spanning Rows & Columns
07:48
144
Named Grid Lines
06:08
145
Grid Challenge 2
03:45
146
CSS Grid & Media Queries
04:54
147
Grid Template Areas
07:19
148
Lumina Creative Grid Refactor
07:21
149
Section Intro
01:47
150
Transition Overview
03:46
151
Creating Transitions
06:03
152
Transform Property
06:39
153
Absolute Center With Transform/Translate
02:18
154
3D Transforms
07:15
155
JavaScript & CSS
12:21
156
Hamburger Menu
17:55
157
Keyframes - Part 1
07:44
158
Keyframes - Paart 2 (CSS Loader Animation)
09:09
159
3D Rotating Cube
09:12
160
Presentation Website Mini-Project
16:11
161
Project Intro
04:46
162
Project Setup
06:54
163
Desktop Navigation
10:25
164
Mobile Navigation
12:12
165
Hero Section
09:22
166
Hero SVG & Media Queries
09:15
167
Navbar Background On Scroll
05:40
168
Learn Section
10:59
169
Chapters Section
08:03
170
Summary Section
07:10
171
Info Section
08:01
172
Takeaways Section
07:00
173
Details & Author Section
11:19
174
Stats Section
11:47
175
Newsletter Form
06:37
176
Footer & Social Icons
11:31
177
Contact Page
12:21
178
Add Accessibility
11:51
179
Deploy To Vercel & Hook Up Form
08:41
180
Project Intro
05:33
181
BEM Methodology Explained
05:35
182
Project Setup
06:05
183
Navbar & Desktop Menu
09:44
184
Hamburger Button & Mobile Menu
13:30
185
Hero Section
15:57
186
Navbar Background On Scroll
02:50
187
Testimonials Section
09:42
188
Features Section & Grid
15:18
189
Features Mobile Layout
05:47
190
Preview Section
06:28
191
Animated Play Button
13:30
192
Video Modal
16:04
193
Details Area & Icons
14:41
194
Screenshots Section
05:32
195
Download Section
09:24
196
Footer
09:59
197
Create Details Page
03:47
198
Pricing Cards
13:25
199
Details Features
13:04
200
Course Wrap Up
03:23
Unlock unlimited learning

Get instant access to all 199 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to Modern HTML & CSS From The Beginning Course?

More courses by Brad Traversy

Frequently asked questions

What prerequisites should I have before enrolling in this course?
The course is designed for both complete beginners and those with some experience in web development. Familiarity with basic computer operations and internet browsing is recommended but not mandatory. The course covers foundational concepts, starting with how the web works, so no prior coding experience is necessary.
What types of projects will I work on during the course?
Throughout the course, you will engage in structured modules that include mini-projects and three full-fledged projects. These projects involve creating and deploying websites using platforms like Netlify and Vercel, allowing you to practice and apply your HTML and CSS skills in real-world scenarios.
Who is the target audience for this course?
This course is ideal for anyone interested in learning web development, from complete beginners to seasoned developers looking to refine their HTML and CSS skills. It offers a structured learning path that caters to a wide range of skill levels.
How does the course depth and scope compare to other HTML and CSS courses?
The course offers a comprehensive learning experience with 200 lessons covering both fundamental and advanced topics. It delves into HTML5 semantic markup, CSS basics, advanced layout techniques like Flexbox and CSS Grid, responsive design, and dynamic styling, providing a thorough understanding of HTML and CSS.
What specific tools or platforms will I learn to use in this course?
You will learn to use a variety of tools and platforms, including VS Code for editing, Live Server for previewing changes, and Git for version control. Additionally, the course covers deployment on platforms like Netlify and Vercel, and introduces tools like Browser Devtools and Prettier for efficient coding.
What topics are not covered in this course?
The course primarily focuses on HTML and CSS, and does not cover JavaScript, backend technologies, or advanced web development frameworks. It aims to provide a strong foundation in front-end development using HTML and CSS.
How much time should I expect to commit to completing the course?
The course consists of 200 lessons that cover a wide range of topics. The time commitment will vary depending on your learning pace, but it is designed to be a comprehensive program that offers hours of immersive training. Consistent effort over several weeks will likely be required to complete all modules and projects.