CourseFlix

Modern HTML & CSS From The Beginning Course

24h 21m 52s
English
Paid

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.

About the Author: Brad Traversy

Brad Traversy thumbnail

Brad Traversy is the developer behind Traversy Media, one of the largest and most-recommended programming YouTube channels. Brad began teaching on YouTube in 2009 and has shipped a steady stream of free tutorials and paid Udemy courses ever since.

His teaching style is project-driven: most tutorials build a complete application from blank file to deployed product. The catalog covers full-stack web development, MERN-stack apps, PHP, Python, and the periodic refresh of HTML/CSS basics. Brad's "Modern HTML & CSS From The Beginning" and "MERN Stack Front To Back" are still among the most-recommended starting points for self-taught developers.

Watch Online 200 lessons

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

Related courses

  • Advanced CSS & JavaScript Projects thumbnail

    Advanced CSS & JavaScript Projects

    Sources: zerotomastery.io
    Master CSS and JavaScript by creating real projects! Develop applications like a quiz, an expense tracker, and a podcast player. You will learn...
    15 hours 24 minutes 29 seconds 5 / 5
  • Build a Podcast Player with JavaScript, CSS and Node.js thumbnail

    Build a Podcast Player with JavaScript, CSS and Node.js

    Sources: zerotomastery.io
    Learn to create a full-stack podcast player using JavaScript, CSS, and Node.js. Develop skills in web development and add a project to your portfolio.
    8 hours 30 minutes 51 seconds
  • 100 Days Of Code: The Complete Web Development Bootcamp 2024 thumbnail

    100 Days Of Code: The Complete Web Development Bootcamp 2024

    Sources: Academind Pro
    Learn web development from A to Z in 100 days (or at your own pace) - from "basic" to "advanced", it's all included!
    78 hours 51 minutes 55 seconds
  • 50 Projects In 50 Days - HTML, CSS & JavaScript thumbnail

    50 Projects In 50 Days - HTML, CSS & JavaScript

    Sources: udemy, Brad Traversy
    Build 50 small web projects with HTML, CSS, and JavaScript. You learn DOM work, events, layout, and simple APIs. This course gives you clear steps.
    18 hours 13 minutes 45 seconds
  • Create Animated Breaking News Graphics with HTML, CSS and JavaScript thumbnail

    Create Animated Breaking News Graphics with HTML, CSS and JavaScript

    Sources: zerotomastery.io
    Master the creation of dynamic overlays and animations for streams, scoreboards, and TV graphics. Learn the principles of working with animation and web technol
    2 hours 40 minutes 39 seconds
  • Sass - from beginner to real world thumbnail

    Sass - from beginner to real world

    Sources: kevin powell
    Sass has become an essential language to learn for front-end developers. It helps you write your code faster, pull off things that sometimes seem like magic, an
    8 hours 2 minutes 59 seconds