CourseFlix

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

Course content

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

Related courses

  • Page Transitions thumbnail

    Page Transitions

    By: SuperHi
    Integrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.
    4 hours 10 minutes 33 seconds
  • 100 Days Of Code: The Complete Web Development Bootcamp 2024 thumbnail

    100 Days Of Code: The Complete Web Development Bootcamp 2024

    By: Academind Pro (Maximilian Schwarzmüller)
    100 Days of Code: Complete Web Development Bootcamp 2022 by Colt Steele — HTML, CSS, JavaScript, Node, Express, Mongo, and full-stack projects.
    78 hours 51 minutes 55 seconds
  • The Ultimate HTML5 & CSS3 Series: Part 3 thumbnailFree

    The Ultimate HTML5 & CSS3 Series: Part 3

    By: Mosh Hamedani (Code with Mosh)
    Join The Ultimate HTML5 & CSS3 Series Part 3 for a comprehensive learning experience. Build professional-quality websites with modern HTML5 and CSS3 techniques.
    5 hours 38 minutes 4 seconds 5 / 5

Frequently asked questions

What is The HTML & CSS Bootcamp 2023 Edition about?
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…
Who teaches The HTML & CSS Bootcamp 2023 Edition?
The HTML & CSS Bootcamp 2023 Edition is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is The HTML & CSS Bootcamp 2023 Edition?
The HTML & CSS Bootcamp 2023 Edition contains 317 lessons with a total runtime of 37 hours 18 minutes. All lessons are available to watch online at your own pace.
Is The HTML & CSS Bootcamp 2023 Edition free to watch?
The HTML & CSS Bootcamp 2023 Edition is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch The HTML & CSS Bootcamp 2023 Edition online?
The HTML & CSS Bootcamp 2023 Edition is available to watch online on CourseFlix at https://courseflix.net/course/the-html-css-bootcamp-2023-edition. The page hosts every lesson with the integrated video player; no download is required.