CF

The HTML & CSS Bootcamp 2023 Edition

37h 18m 8s
English
Paid

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!

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 317 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Welcome & Curriculum Overview
All Course Lessons (317)
#Lesson TitleDurationAccess
1
Welcome & Curriculum Overview Demo
06:03
2
Important Note On Leaving Feedback!
02:02
3
A First Taste of HTML & CSS
11:11
4
How The Web Works
07:38
5
The Roles of HTML, CSS, and JS
07:16
6
Installing The Tools We Need
03:15
7
Configuring VSCode
05:23
8
Important Note On The Course Exercises
02:12
9
Introducing HTML
04:00
10
The Basic HTML Workflow
05:00
11
The Paragraph Element
05:50
12
Mozilla Developer Network
02:11
13
Chrome Developer Tools
03:48
14
Document Structure
05:05
15
Creating HTML Comments
04:08
16
Creating Headings
09:49
17
HTML Basics Exercise
10:27
18
Working With HTML Lists
08:25
19
The Em, Strong, B, and I Elements
09:08
20
Nesting Elements
01:52
21
Superscript and Subscript
02:20
22
Inline Vs. Block Elements
03:10
23
Creating Links
07:04
24
Other Types of Links
07:36
25
Creating Images
08:06
26
Pasta Recipe Exercise
12:07
27
Creating Text Inputs and Buttons
04:34
28
The Form Element
06:50
29
Name and Placeholder Attributes
06:53
30
Properly Labelling Form Controls
04:01
31
Other Types of Inputs
05:10
32
Checkboxes, Textareas, and Range Inputs
06:11
33
Selects and Radio Button Groupings
07:45
34
Course Landing Page Form Exercise
14:48
35
Spans
06:30
36
Divs
05:21
37
Tables
09:18
38
Semantic Markup
07:11
39
Semantic Elements
07:19
40
Getting Our Starter Code
02:20
41
Working Within Inline Styles
04:30
42
Writing Internal Styles
04:51
43
External Styles: The Best Way To Write Styles
04:29
44
Quick Note on Codepen
02:21
45
Anatomy of CSS
05:04
46
The Element Selector
03:15
47
CSS Basics Exercise
02:40
48
Working with background-color
02:17
49
Quick Tip: MDN & Comments
04:21
50
Named Colors
04:04
51
Understanding RGB Colors
07:30
52
Hexadecimal Colors
08:17
53
RGBA Colors and Opacity
05:52
54
Colors Quiz
05:02
55
CSS Inheritance
06:02
56
CSS Colors Exercise
08:08
57
Changing Fonts with Font-Family
12:07
58
Font-size, font-weight, and font-style
08:53
59
Changing Text Alignment
04:13
60
Line-height, letter-spacing, and word-spacing
04:50
61
Adding Custom Fonts With Google Fonts
11:33
62
Styling Text Exercise
12:36
63
Creating Text Shadows
07:07
64
Our First Mini Project: Cantilever
16:07
65
Text-transform & text-decoration
07:56
66
The ID Selector
05:41
67
The Class Selector
06:12
68
Styling Lists
08:27
69
Styling Links and :hover Pseudo-Class
07:41
70
The Font Shorthand Property
04:35
71
Leafy Seadragon Exercise
09:48
72
The Universal Selector
05:17
73
The Attribute Selector
07:21
74
Grouping Selectors
04:26
75
Descendant & Child Combinators
08:19
76
Compound Selectors
04:24
77
CSS Selectors Exercise
08:15
78
Introducing The Box Model
05:28
79
Working With Borders
07:22
80
Width, Height, and Percentages
06:53
81
Adding Padding to Elements
06:34
82
Working With Margins
05:04
83
The Alternate Box Model
06:29
84
The Display Property
11:34
85
Display: None
03:53
86
Negative Margin & Margin Auto
06:25
87
Margin Collapsing: WTF?
05:14
88
A Common Layout Pattern
02:42
89
Min and Max Width
04:25
90
Rounding Elements With Border Radius
03:18
91
Box Shadows
06:38
92
Working With Overflow
06:44
93
Ski Resort Exercise
13:27
94
Introducing Our Project
03:02
95
Basic Project Setup
05:12
96
Writing The Navbar Markup
04:08
97
Styling The Navbar
11:19
98
Finishing Up The Navbar
11:27
99
Creating The Photo Grid
05:06
100
Continuing The Photo Grid
13:26
101
Finishing The Photo Grid
10:06
102
Adding The Footer Content
16:08
103
Section Introduction
00:47
104
The Sibling Combinator
04:36
105
Working With Pseudo-Classes
15:04
106
Styling Pseudo-Elements
04:42
107
CSS Selectors Pt. 2 Exercise
13:03
108
The Basics of Specificity
08:01
109
Inline Styles and Specificity
02:08
110
Calculating Specificity Values
09:49
111
!important and The Cascade
06:05
112
Wrapping Up The Cascade
06:28
113
Introducing Our Blog Post Project
03:25
114
Centering The Main Content
06:34
115
Working on Typography
13:30
116
Creating the Headline Section
13:16
117
Implementing Our Headings
10:00
118
Adding In Code Styles
11:49
119
Creating the Footer
09:35
120
Writing The Full Size Hero
10:02
121
Absolute Units: Pixels, Centimeters, and More!
10:18
122
Working With Percentages
05:15
123
The Joy of Rem Units
07:44
124
Understanding The Em Unit
08:17
125
Vw and Vh Units
06:32
126
Which Units Should You Use?
03:03
127
Working With Floats
07:08
128
Introducing The Project
02:47
129
Setting Up The Navbar
07:35
130
Finishing The Navbar
05:05
131
Starting The Hero Content
06:52
132
Making The Skills Section
09:47
133
Creating The Blog Section
11:22
134
Adding The Events Section
07:00
135
Making A Simple Footer
04:59
136
Working With Background Images
08:33
137
Controlling Background-Repeat
02:38
138
Sizing Our Background
05:51
139
Positioning Background
05:56
140
Working With Background-Clip
02:13
141
Background Exercise
05:42
142
An Important Note About Gradients!
00:52
143
Creating Linear Gradients
05:39
144
Radial, Conic, and Repeating Gradients
08:09
145
The Background Shorthand Property
04:32
146
Fancy CSS Filters
05:29
147
Introducing Positioning
04:59
148
Relative Positioning
05:01
149
Controlling Layers With Z-Index
03:00
150
Absolute Positioning Pt 1
06:25
151
Absolute Positioning Pt 2
04:53
152
Creating A Button Badge
14:38
153
Fixed Positioning
04:36
154
Positioning Exercise #1
04:30
155
Positioning Exercise #2
06:05
156
Positioning Exercise #3
05:31
157
Introducing Transitions
04:24
158
The Basic Transition Syntax
06:34
159
Working With Multiple Transitions
03:23
160
Transition Timing Functions
05:40
161
Transition Delays
02:18
162
Understanding Animation Performance
09:52
163
Introducing Transforms
06:24
164
Other Types of Transformations
07:55
165
Transform Origin
02:36
166
Building Fancy Button Hover Effects
17:08
167
Introducing Flexbox
06:32
168
Display: Flex and Flex Axis
05:38
169
Working With Flex-Direction
05:12
170
Flexbox Exercise 1
02:19
171
Flex-Wrap
08:14
172
Justify-Content
10:10
173
Flexbox Exercise 2
02:12
174
Align-Items
06:29
175
Flexbox Exercise 3
02:44
176
Align-Content
05:46
177
Flexbox Exercise 4
04:34
178
Align-Self
03:43
179
Flexbox Exercise 5
04:37
180
The Flex-Grow Property
11:10
181
Controlling Shrinkage With Flex-Shrink
05:07
182
Flex-Basis: Important & Confusing
06:26
183
The Flex Shorthand Property
07:35
184
The Order Flex-Item Property
07:35
185
Flexbox Patterns: Building A Simple Navbar
09:12
186
Flexbox Patterns: Nested Flex Containers
05:12
187
Flexbox Patterns: Centering Content
04:33
188
Flexbox Patterns: Building A Card Layout
07:00
189
Introducing The Cost Estimator Project
02:33
190
Building Our Container
07:54
191
Creating The Top Tabs
08:07
192
Positioning The Tabs Underline
08:03
193
Creating The Active Tab Styles
11:57
194
Adding The Toggle Section
10:44
195
Building The Sessions Card
06:59
196
Creating The Slider
14:33
197
Creating The Two Price Cards
08:06
198
Finishing Up The Price Cards
11:35
199
Introducing Responsive Design
06:35
200
Our First Media Query
07:15
201
More On Media Queries
06:22
202
Working With Media Features
06:05
203
Media Query Logical Operators
03:07
204
Media Queries Exercise
05:32
205
Media Queries Level 4 & 5
05:18
206
Common Responsive Breakpoints
08:56
207
Creating a Simple Responsive Navbar
08:44
208
Responsive Flexbox Grid Demo
06:28
209
Mobile First vs. Desktop First Design
04:43
210
Building a Simple Mobile-First Layout
06:06
211
Making Cantilever Responsive
07:40
212
Making Potter Portfolio Responsive
09:27
213
Making Hazel CV Project Responsive
17:19
214
Making Cost Estimator Responsive
09:13
215
Introducing CSS Grid
06:52
216
Enabling CSS Grid
05:30
217
Grid-Template-Columns
05:29
218
Grid-Template-Rows
05:11
219
Grid Exercise 1
02:52
220
Grid-Template Shorthand Property
04:06
221
The Minmax() Function
08:28
222
Working With Repeat()
03:33
223
Fit-Content
03:03
224
Controlling Grid Gaps
03:46
225
Grid Exercise 2
02:45
226
Working with Grid Lines
05:18
227
Positioning Grid Items
07:43
228
The Span Keyword
03:24
229
The Grid-Area Shorthand Property
06:12
230
Naming Our Grid Lines
06:53
231
Grid-Template-Areas
07:53
232
Using Grid-Template-Areas With Rows & Cols
06:23
233
Grid-Auto-Flow
05:17
234
Grid Auto Columns & Rows
04:24
235
Autofit and Autofill
07:12
236
Introducing Our Grid Project
04:30
237
Creating Image Overlay Pt 1
10:32
238
Creating Image Overlay Pt 2
05:51
239
Adding In Our Images
05:39
240
Positioning Our Images On The Grid
07:35
241
Making Our Grid Layout Responsive
10:09
242
Fixing Our Image Overlays
03:06
243
Building The Navbar
10:08
244
Finalizing The Navbar and Footer
07:05
245
Creating The Hamburger Button
12:30
246
Introducing Keyframes Animations
04:20
247
Defining @keyframes
06:13
248
More Practice With @Keyframes
07:56
249
Animation Delay, Repeat, and More!
06:27
250
Reusing Animations
02:03
251
Animation Shorthand Property
04:23
252
Building A Simple Spinner Animation
04:14
253
Creating a More Complex Loader
08:55
254
The Animation Fill Mode Property
04:54
255
Introducing Our Animated Drawer
02:41
256
Writing The Individual Bar Animations
07:55
257
A Lightspeed Crash Course In JavaScript
09:05
258
Making Our Hamburger Button Work
06:38
259
Creating The Mobile Drawer Menu
06:57
260
Animating The Drawer Slide-Out
07:30
261
Introducing Before and After
05:05
262
Creating Decorative Quotes With Pseudo-Elements
07:36
263
Gradient Borders With Pseudo-Elements
06:30
264
Fancy Animated Buttons With Pseudo-Elements
08:21
265
Super Fancy Animated Spinner With Pseudo-Elements
07:31
266
Custom Form Controls With Pseudo-Elements
13:19
267
Introducing CSS Variables
03:21
268
Writing CSS Variables
07:17
269
The :root pseudo-class
03:53
270
Variables and Media Queries
02:32
271
Using Variables For Sizes
04:40
272
Introducing Calc()
05:43
273
The Rules of Calc()
05:37
274
Another Example of Using Calc()
05:02
275
Introducing Swipe
07:50
276
Setting Up Our Font Variables
05:57
277
Defining Basic Heading Styles
07:25
278
Writing General Link Styles
05:16
279
Defining Body Styles
04:09
280
Creating our Text Classes - Subtitle, Secondary Text
11:36
281
Defining Our Button Styles - Primary & Secondary Buttons
12:52
282
Creating Our Buttons With Animated Icons
05:08
283
Building The Navbar
12:12
284
Defining Our Two-Column Layout Classes
11:56
285
Writing The Hero Markup
04:50
286
Styling The Page Hero
13:12
287
Building The Partners Grid Section
09:15
288
Adding The Unified Platform Section
15:01
289
Creating Our Graphic Photos Grid
08:06
290
Writing Our Reusable Card Class
07:22
291
Adding The Integrations Section
16:57
292
Defining The Why Swipe Section
09:21
293
Creating The Global Section
14:59
294
Positioning The Globe Image
06:00
295
Adding The Virtual Events Section Markup
07:51
296
Styling The Virtual Events Section
20:06
297
Building The Getting Started Section
12:21
298
Writing The Page Footer Markup
07:03
299
Styling The Page Footer
13:49
300
Adding The First Angled Stripe
08:19
301
Finishing The Angled Stripes
09:07
302
Creating The Animated Gradient Hero Background
11:12
303
Fixing An Issue With Our Angled Stripes
04:18
304
Starting To Make Swipe Responsive
07:43
305
Making The Partners Grid Responsive
08:24
306
Making The Unified Platform Section Responsive
05:59
307
Making The Integrations Section Responsive
09:01
308
Making The Why Swipe Section Responsive
06:50
309
Making The Global Section Responsive
05:40
310
Making The Virtual Events Section Responsive
08:38
311
Making The Bottom of The Page Responsive
10:34
312
Making The Page Hero Responsive
25:31
313
Adding Our Responsive Navbar
11:20
314
Responsive Tweaks To Background Stripes
14:38
315
Cleaning Up Our CSS
10:59
316
Fixing A Minor Issue With Border Radius
05:04
317
Fixing Another Minor Issue With Partners Grid
07:03
Unlock unlimited learning

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

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
The course is designed to be approachable for complete beginners as well as intermediate developers. There are no strict prerequisites, but familiarity with basic computer operations and a willingness to engage with interactive exercises will be beneficial. The course starts with fundamental topics like 'A First Taste of HTML & CSS' and 'How The Web Works', making it suitable for those new to web development.
What projects will I build during the course?
Throughout the course, you will work on numerous projects and exercises that focus on building and styling web components. You will have opportunities to recreate components, build layouts, and practice HTML and CSS through exercises such as the 'Pasta Recipe Exercise' and the 'Course Landing Page Form Exercise'. These projects are designed to reinforce your learning and give you practical experience in web design.
Who is the target audience for this course?
The course is aimed at a wide range of learners, from complete beginners interested in learning web development to intermediate developers looking to enhance their skills in HTML, CSS, and web design. The course covers a broad range of topics and includes practical exercises, making it useful for anyone looking to build their own websites or pursue a career in web development.
How does this course compare in depth and scope to other web design courses?
This course offers a comprehensive introduction to HTML and CSS, with 317 lessons totaling over 37 hours of content. It includes dozens of exercises and challenges, which is more interactive than many other online courses. While many courses may cover similar topics, this course emphasizes practical exercises and projects, allowing students to apply what they learn in real-world scenarios.
What specific tools or platforms will I learn to use in this course?
The course covers essential tools for web development, including configuring and using VSCode, a popular code editor. You will also learn to use Chrome Developer Tools for debugging and inspecting web pages. Additionally, the course introduces the Mozilla Developer Network (MDN) as a valuable resource for HTML and CSS documentation.
What topics are not covered in this course?
The course focuses primarily on HTML, CSS, and web design fundamentals. It does not cover JavaScript in detail, although it briefly touches on the roles of HTML, CSS, and JS in web development. Advanced web technologies such as server-side programming, databases, or full-stack development are also not part of this course's curriculum.
What is the estimated time commitment for completing this course?
The course consists of 317 lessons with a total runtime of approximately 37 hours. Given the interactive nature of the course, which includes numerous exercises and projects, students should expect to spend additional time on practice outside of the video lessons. Completing the course at a steady pace could take several weeks, depending on the time dedicated per week.