The HTML & CSS Bootcamp 2023 Edition

37h 18m 8s
English
Paid

Course description

**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.

Read more about the course

  • 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!

Watch Online

Join premium to watch
Go to premium
# Title Duration
1 Welcome & Curriculum Overview 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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

The Ultimate HTML5 & CSS3 Series: Part 3

The Ultimate HTML5 & CSS3 Series: Part 3

Sources: codewithmosh (Mosh Hamedani)
Have you always wanted to learn web development but didn't know where to start? Tired of lengthy, boring and outdated courses? This course is for you. A fun...
5 hours 38 minutes 4 seconds
The Ultimate HTML5 & CSS3 Series: Part 1

The Ultimate HTML5 & CSS3 Series: Part 1

Sources: codewithmosh (Mosh Hamedani)
Have you always wanted to learn web development but didn't know where to start? Tired of lengthy, boring and outdated courses? This course is for you. A fun...
2 hours 51 minutes 50 seconds
10 Mega Responsive Websites with HTML, CSS, and JavaScript

10 Mega Responsive Websites with HTML, CSS, and JavaScript

Sources: udemy
Welcome to the brand new course where you can learn about how to create modern and beautiful design templates for your websites. If you want to build and customize your portfoli...
21 hours 54 minutes 19 seconds
Advanced CSS & JavaScript Projects

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
Data Visualization + D3.js

Data Visualization + D3.js

Sources: superhi.com
Our Data Visualization course focuses on the practical aspects of working with data. In our 6-week long course, we’ll cover the basics of storytelling and worki
16 hours 48 minutes 54 seconds