The HTML & CSS Bootcamp 2024 Edition

About Course

Learn HTML and CSS from scratch with this comprehensive course. This free HTML and CSS Bootcamp will teach you everything you need to know to build stunning websites. This course includes over 37 hours of high-quality video lessons, downloadable assets, quizzes, and exercises. You’ll learn the fundamentals of HTML, CSS, and web design, including:

Structuring documents with HTML
Creating text elements, tables, and forms
Working with selectors, color systems, and styling text elements in CSS
Critical CSS concepts like the box model, specificity, the cascade, and CSS units
Backgrounds, gradients, filters, positioning elements, transitions, and transformations
Complex CSS layouts using Flexbox and CSS Grid
Building responsive layouts for different screen sizes
A massive final project that combines everything you’ve learned.

This course is perfect for beginners and intermediate developers alike. It’s taught by an experienced teacher with a background in in-person coding bootcamps. This course includes dozens of exercises and challenges to help you practice your skills. Get access to our exclusive Discord community and learn from thousands of other students.

This course is completely free and available on Theetay. Get started today!

This course is offered from platforms like Udemy, Udacity, Coursera, MasterClass, NearPeer, and others. Find this and many other free online courses at Theetay.com.

Master HTML & CSS and build massive real-world projects, with no prior knowledge needed!
How to write well-structured and semantic HTML documents
Master tricky CSS concepts including the cascade, inheritance, and specificity
Work with CSS animations, transitions, pseudo-elements, gradients, and more
Get practice with dozens of exercises, quizzes, and challenges
Design beautiful websites from the ground up that look good on all screen sizes
Build reusable components, work with CSS variables, and write modern and clean CSS code

Course Content

01 – Introduction

A Message from the Professor
001 – Welcome Curriculum Overview.mp4

00:00
002 – Join Our Chat Community.html

00:00
003 – Important Note On Leaving Feedback.mp4

00:00
004 – A First Taste of HTML CSS.mp4

00:00
005 – How The Web Works.mp4

00:00
006 – The Roles of HTML CSS and JS.mp4

00:00
007 – Installing The Tools We Need.mp4

00:00
008 – Configuring VSCode.mp4

00:00
009 – Important Note On The Course Exercises.mp4

00:00

02 – HTML Basics

010 – Introducing HTML.mp4

00:00
011 – The Basic HTML Workflow.mp4

00:00
012 – The Paragraph Element.mp4

00:00
013 – Mozilla Developer Network.mp4

00:00
014 – Chrome Developer Tools.mp4

00:00
015 – Document Structure.mp4

00:00
016 – Creating HTML Comments.mp4

00:00
017 – Creating Headings.mp4

00:00
018 – HTML Basics Exercise.mp4

00:00
Section Quiz

03 – More HTML

019 – Working With HTML Lists.mp4

00:00
020 – The Em Strong B and I Elements.mp4

00:00
021 – Nesting Elements.mp4

00:00
022 – Superscript and Subscript.mp4

00:00
023 – Inline Vs Block Elements.mp4

00:00
024 – Creating Links.mp4

00:00
025 – Other Types of Links.mp4

00:00
026 – Creating Images.mp4

00:00
027 – Pasta Recipe Exercise.mp4

00:00
Section Quiz

04 – Working With Forms

028 – Creating Text Inputs and Buttons.mp4

00:00
029 – The Form Element.mp4

00:00
030 – Name and Placeholder Attributes.mp4

00:00
031 – Properly Labelling Form Controls.mp4

00:00
032 – Other Types of Inputs.mp4

00:00
033 – Checkboxes Textareas and Range Inputs.mp4

00:00
034 – Selects and Radio Button Groupings.mp4

00:00
035 – Course Landing Page Form Exercise.mp4

00:00
Section Quiz

05 – Other Elements

06 – CSS Basics

041 – Getting Our Starter Code.mp4

00:00
042 – Working Within Inline Styles.mp4

00:00
043 – Writing Internal Styles.mp4

00:00
044 – External Styles The Best Way To Write Styles.mp4

00:00
045 – Quick Note on Codepen.mp4

00:00
046 – Anatomy of CSS.mp4

00:00
047 – The Element Selector.mp4

00:00
048 – CSS Basics Exercise.mp4

00:00
Section Quiz

07 – The World of CSS Colors

049 – Working with backgroundcolor.mp4

00:00
050 – Quick Tip MDN Comments.mp4

00:00
051 – Named Colors.mp4

00:00
052 – Understanding RGB Colors.mp4

00:00
053 – Hexadecimal Colors.mp4

00:00
054 – RGBA Colors and Opacity.mp4

00:00
055 – Colors Quiz.mp4

00:00
056 – CSS Inheritance.mp4

00:00
057 – CSS Colors Exercise.mp4

00:00
Section Quiz

08 – Styling Text

058 – Changing Fonts with FontFamily.mp4

00:00
059 – Fontsize fontweight and fontstyle.mp4

00:00
060 – Changing Text Alignment.mp4

00:00
061 – Lineheight letterspacing and wordspacing.mp4

00:00
062 – Adding Custom Fonts With Google Fonts.mp4

00:00
063 – Styling Text Exercise.mp4

00:00
064 – Creating Text Shadows.mp4

00:00
065 – Our First Mini Project Cantilever.mp4

00:00
Section Quiz

09 – More Text Styling

10 – Selectors Pt 1

11 – The Box Model

079 – Introducing The Box Model.mp4

00:00
080 – Working With Borders.mp4

00:00
081 – Width Height and Percentages.mp4

00:00
082 – Adding Padding to Elements.mp4

00:00
083 – Working With Margins.mp4

00:00
084 – The Alternate Box Model.mp4

00:00
085 – The Display Property.mp4

00:00
086 – Display None.mp4

00:00
087 – Negative Margin Margin Auto.mp4

00:00
088 – Margin Collapsing WTF.mp4

00:00
089 – A Common Layout Pattern.mp4

00:00
090 – Min and Max Width.mp4

00:00
091 – Rounding Elements With Border Radius.mp4

00:00
092 – Box Shadows.mp4

00:00
093 – Working With Overflow.mp4

00:00
094 – Ski Resort Exercise.mp4

00:00
Section Quiz

12 – Artist Portfolio Project

095 – Introducing Our Project.mp4

00:00
096 – Basic Project Setup.mp4

00:00
097 – Writing The Navbar Markup.mp4

00:00
098 – Styling The Navbar.mp4

00:00
099 – Finishing Up The Navbar.mp4

00:00
100 – Creating The Photo Grid.mp4

00:00
101 – Continuing The Photo Grid.mp4

00:00
102 – Finishing The Photo Grid.mp4

00:00
103 – Adding The Footer Content.mp4

00:00
Section Quiz

13 – Specificity and The Cascade

104 – Section Introduction.mp4

00:00
105 – The Sibling Combinator.mp4

00:00
106 – Working With PseudoClasses.mp4

00:00
107 – Styling PseudoElements.mp4

00:00
108 – CSS Selectors Pt 2 Exercise.mp4

00:00
109 – The Basics of Specificity.mp4

00:00
110 – Inline Styles and Specificity.mp4

00:00
111 – Calculating Specificity Values.mp4

00:00
112 – important and The Cascade.mp4

00:00
113 – Wrapping Up The Cascade.mp4

00:00
Section Quiz

14 – Blog Post Project

114 – Introducing Our Blog Post Project.mp4

00:00
115 – Centering The Main Content.mp4

00:00
116 – Working on Typography.mp4

00:00
117 – Creating the Headline Section.mp4

00:00
118 – Implementing Our Headings.mp4

00:00
119 – Adding In Code Styles.mp4

00:00
120 – Creating the Footer.mp4

00:00
121 – Writing The Full Size Hero.mp4

00:00
Section Quiz

15 – CSS Units

16 – Hazel CV Project

129 – Introducing The Project.mp4

00:00
130 – Setting Up The Navbar.mp4

00:00
131 – Finishing The Navbar.mp4

00:00
132 – Starting The Hero Content.mp4

00:00
133 – Making The Skills Section.mp4

00:00
134 – Creating The Blog Section.mp4

00:00
135 – Adding The Events Section.mp4

00:00
136 – Making A Simple Footer.mp4

00:00
Section Quiz

17 – Backgrounds Gradients Filters

137 – Working With Background Images.mp4

00:00
138 – Controlling BackgroundRepeat.mp4

00:00
139 – Sizing Our Background.mp4

00:00
140 – Positioning Background.mp4

00:00
141 – Working With BackgroundClip.mp4

00:00
142 – Background Exercise.mp4

00:00
143 – An Important Note About Gradients.mp4

00:00
144 – Creating Linear Gradients.mp4

00:00
145 – Radial Conic and Repeating Gradients.mp4

00:00
146 – The Background Shorthand Property.mp4

00:00
147 – Fancy CSS Filters.mp4

00:00
Section Quiz

18 – Positioning

148 – Introducing Positioning.mp4

00:00
149 – Relative Positioning.mp4

00:00
150 – Controlling Layers With ZIndex.mp4

00:00
151 – Absolute Positioning Pt 1.mp4

00:00
152 – Absolute Positioning Pt 2.mp4

00:00
153 – Creating A Button Badge.mp4

00:00
154 – Fixed Positioning.mp4

00:00
155 – Positioning Exercise 1.mp4

00:00
156 – Positioning Exercise 2.mp4

00:00
157 – Positioning Exercise 3.mp4

00:00
Section Quiz

19 – Transitions and Transforms

158 – Introducing Transitions.mp4

00:00
159 – The Basic Transition Syntax.mp4

00:00
160 – Working With Multiple Transitions.mp4

00:00
161 – Transition Timing Functions.mp4

00:00
162 – Transition Delays.mp4

00:00
163 – Understanding Animation Performance.mp4

00:00
164 – Introducing Transforms.mp4

00:00
165 – Other Types of Transformations.mp4

00:00
166 – Transform Origin.mp4

00:00
167 – Building Fancy Button Hover Effects.mp4

00:00
Section Quiz

20 – Flexbox Part 1

168 – Introducing Flexbox.mp4

00:00
169 – Display Flex and Flex Axis.mp4

00:00
170 – Working With FlexDirection.mp4

00:00
171 – Flexbox Exercise 1.mp4

00:00
172 – FlexWrap.mp4

00:00
173 – JustifyContent.mp4

00:00
174 – Flexbox Exercise 2.mp4

00:00
175 – AlignItems.mp4

00:00
176 – Flexbox Exercise 3.mp4

00:00
177 – AlignContent.mp4

00:00
178 – Flexbox Exercise 4.mp4

00:00
179 – AlignSelf.mp4

00:00
180 – Flexbox Exercise 5.mp4

00:00
Section Quiz

21 – Flexbox Pt 2 Flex Items Patterns

181 – The FlexGrow Property.mp4

00:00
182 – Controlling Shrinkage With FlexShrink.mp4

00:00
183 – FlexBasis Important Confusing.mp4

00:00
184 – The Flex Shorthand Property.mp4

00:00
185 – The Order FlexItem Property.mp4

00:00
186 – Flexbox Patterns Building A Simple Navbar.mp4

00:00
187 – Flexbox Patterns Nested Flex Containers.mp4

00:00
188 – Flexbox Patterns Centering Content.mp4

00:00
189 – Flexbox Patterns Building A Card Layout.mp4

00:00
Section Quiz

22 – Cost Estimator Project

190 – Introducing The Cost Estimator Project.mp4

00:00
191 – Building Our Container.mp4

00:00
192 – Creating The Top Tabs.mp4

00:00
193 – Positioning The Tabs Underline.mp4

00:00
194 – Creating The Active Tab Styles.mp4

00:00
195 – Adding The Toggle Section.mp4

00:00
196 – Building The Sessions Card.mp4

00:00
197 – Creating The Slider.mp4

00:00
198 – Creating The Two Price Cards.mp4

00:00
199 – Finishing Up The Price Cards.mp4

00:00
Section Quiz

23 – Making Responsive Websites With Media Queries

200 – Introducing Responsive Design.mp4

00:00
201 – Our First Media Query.mp4

00:00
202 – More On Media Queries.mp4

00:00
203 – Working With Media Features.mp4

00:00
204 – Media Query Logical Operators.mp4

00:00
205 – Media Queries Exercise.mp4

00:00
206 – Media Queries Level 4 5.mp4

00:00
207 – Common Responsive Breakpoints.mp4

00:00
208 – Creating a Simple Responsive Navbar.mp4

00:00
209 – Responsive Flexbox Grid Demo.mp4

00:00
210 – Mobile First vs Desktop First Design.mp4

00:00
211 – Building a Simple MobileFirst Layout.mp4

00:00
Section Quiz

24 – Making Our Projects Responsive

25 – CSS Grid Part 1

216 – Introducing CSS Grid.mp4

00:00
217 – Enabling CSS Grid.mp4

00:00
218 – GridTemplateColumns.mp4

00:00
219 – GridTemplateRows.mp4

00:00
220 – Grid Exercise 1.mp4

00:00
221 – GridTemplate Shorthand Property.mp4

00:00
222 – The Minmax Function.mp4

00:00
223 – Working With Repeat.mp4

00:00
224 – FitContent.mp4

00:00
225 – Controlling Grid Gaps.mp4

00:00
226 – Grid Exercise 2.mp4

00:00
Section Quiz

26 – CSS Grid Part 2

227 – Working with Grid Lines.mp4

00:00
228 – Positioning Grid Items.mp4

00:00
229 – The Span Keyword.mp4

00:00
230 – The GridArea Shorthand Property.mp4

00:00
231 – Naming Our Grid Lines.mp4

00:00
232 – GridTemplateAreas.mp4

00:00
233 – Using GridTemplateAreas With Rows Cols.mp4

00:00
234 – GridAutoFlow.mp4

00:00
235 – Grid Auto Columns Rows.mp4

00:00
236 – Autofit and Autofill.mp4

00:00
Section Quiz

27 – Grid Project

237 – Introducing Our Grid Project.mp4

00:00
238 – Creating Image Overlay Pt 1.mp4

00:00
239 – Creating Image Overlay Pt 2.mp4

00:00
240 – Adding In Our Images.mp4

00:00
241 – Positioning Our Images On The Grid.mp4

00:00
242 – Making Our Grid Layout Responsive.mp4

00:00
243 – Fixing Our Image Overlays.mp4

00:00
244 – Building The Navbar.mp4

00:00
245 – Finalizing The Navbar and Footer.mp4

00:00
246 – Creating The Hamburger Button.mp4

00:00
Section Quiz

28 – Building Animations

247 – Introducing Keyframes Animations.mp4

00:00
248 – Defining keyframes.mp4

00:00
249 – More Practice With Keyframes.mp4

00:00
250 – Animation Delay Repeat and More.mp4

00:00
251 – Reusing Animations.mp4

00:00
252 – Animation Shorthand Property.mp4

00:00
253 – Building A Simple Spinner Animation.mp4

00:00
254 – Creating a More Complex Loader.mp4

00:00
255 – The Animation Fill Mode Property.mp4

00:00
Section Quiz

29 – Building A Mobile Drawer Navbar

30 – before and after PseudoElements

31 – Modern CSS

268 – Introducing CSS Variables.mp4

00:00
269 – Writing CSS Variables.mp4

00:00
270 – The root pseudoclass.mp4

00:00
271 – Variables and Media Queries.mp4

00:00
272 – Using Variables For Sizes.mp4

00:00
273 – Introducing Calc.mp4

00:00
274 – The Rules of Calc.mp4

00:00
275 – Another Example of Using Calc.mp4

00:00
Section Quiz

32 – Swipe Mega Project

276 – Introducing Swipe.mp4

00:00
277 – Setting Up Our Font Variables.mp4

00:00
278 – Defining Basic Heading Styles.mp4

00:00
279 – Writing General Link Styles.mp4

00:00
280 – Defining Body Styles.mp4

00:00
281 – Creating our Text Classes Subtitle Secondary Text.mp4

00:00
282 – Defining Our Button Styles Primary Secondary Buttons.mp4

00:00
283 – Creating Our Buttons With Animated Icons.mp4

00:00
Section Quiz

33 – Swipe Project Pt 2

284 – Building The Navbar.mp4

00:00
285 – Defining Our TwoColumn Layout Classes.mp4

00:00
286 – Writing The Hero Markup.mp4

00:00
287 – Styling The Page Hero.mp4

00:00
288 – Building The Partners Grid Section.mp4

00:00
289 – Adding The Unified Platform Section.mp4

00:00
290 – Creating Our Graphic Photos Grid.mp4

00:00
291 – Writing Our Reusable Card Class.mp4

00:00
292 – Adding The Integrations Section.mp4

00:00
293 – Defining The Why Swipe Section.mp4

00:00
Section Quiz

34 – Swipe Pt 3

294 – Creating The Global Section.mp4

00:00
295 – Positioning The Globe Image.mp4

00:00
296 – Adding The Virtual Events Section Markup.mp4

00:00
297 – Styling The Virtual Events Section.mp4

00:00
298 – Building The Getting Started Section.mp4

00:00
299 – Writing The Page Footer Markup.mp4

00:00
300 – Styling The Page Footer.mp4

00:00
301 – Adding The First Angled Stripe.mp4

00:00
302 – Finishing The Angled Stripes.mp4

00:00
303 – Creating The Animated Gradient Hero Background.mp4

00:00
304 – Fixing An Issue With Our Angled Stripes.mp4

00:00
Section Quiz

35 – Swipe Pt 4 Making It Responsive

305 – Starting To Make Swipe Responsive.mp4

00:00
306 – Making The Partners Grid Responsive.mp4

00:00
307 – Making The Unified Platform Section Responsive.mp4

00:00
308 – Making The Integrations Section Responsive.mp4

00:00
309 – Making The Why Swipe Section Responsive.mp4

00:00
310 – Making The Global Section Responsive.mp4

00:00
311 – Making The Virtual Events Section Responsive.mp4

00:00
312 – Making The Bottom of The Page Responsive.mp4

00:00
313 – Making The Page Hero Responsive.mp4

00:00
314 – Adding Our Responsive Navbar.mp4

00:00
315 – Responsive Tweaks To Background Stripes.mp4

00:00
316 – Cleaning Up Our CSS.mp4

00:00
317 – Fixing A Minor Issue With Border Radius.mp4

00:00
318 – Fixing Another Minor Issue With Partners Grid.mp4

00:00
Section Quiz

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

01 – Introduction

A Message from the Professor

001 – Welcome Curriculum Overview.mp4

002 – Join Our Chat Community.html

003 – Important Note On Leaving Feedback.mp4

004 – A First Taste of HTML CSS.mp4

005 – How The Web Works.mp4

006 – The Roles of HTML CSS and JS.mp4

007 – Installing The Tools We Need.mp4

008 – Configuring VSCode.mp4

009 – Important Note On The Course Exercises.mp4

02 – HTML Basics

010 – Introducing HTML.mp4

011 – The Basic HTML Workflow.mp4

012 – The Paragraph Element.mp4

013 – Mozilla Developer Network.mp4

014 – Chrome Developer Tools.mp4

015 – Document Structure.mp4

016 – Creating HTML Comments.mp4

017 – Creating Headings.mp4

018 – HTML Basics Exercise.mp4

Section Quiz

03 – More HTML

019 – Working With HTML Lists.mp4

020 – The Em Strong B and I Elements.mp4

021 – Nesting Elements.mp4

022 – Superscript and Subscript.mp4

023 – Inline Vs Block Elements.mp4

024 – Creating Links.mp4

025 – Other Types of Links.mp4

026 – Creating Images.mp4

027 – Pasta Recipe Exercise.mp4

Section Quiz

04 – Working With Forms

028 – Creating Text Inputs and Buttons.mp4

029 – The Form Element.mp4

030 – Name and Placeholder Attributes.mp4

031 – Properly Labelling Form Controls.mp4

032 – Other Types of Inputs.mp4

033 – Checkboxes Textareas and Range Inputs.mp4

034 – Selects and Radio Button Groupings.mp4

035 – Course Landing Page Form Exercise.mp4

Section Quiz

05 – Other Elements

036 – Spans.mp4

037 – Divs.mp4

038 – Tables.mp4

039 – Semantic Markup.mp4

040 – Semantic Elements.mp4

Section Quiz

06 – CSS Basics

041 – Getting Our Starter Code.mp4

042 – Working Within Inline Styles.mp4

043 – Writing Internal Styles.mp4

044 – External Styles The Best Way To Write Styles.mp4

045 – Quick Note on Codepen.mp4

046 – Anatomy of CSS.mp4

047 – The Element Selector.mp4

048 – CSS Basics Exercise.mp4

Section Quiz

07 – The World of CSS Colors

049 – Working with backgroundcolor.mp4

050 – Quick Tip MDN Comments.mp4

051 – Named Colors.mp4

052 – Understanding RGB Colors.mp4

053 – Hexadecimal Colors.mp4

054 – RGBA Colors and Opacity.mp4

055 – Colors Quiz.mp4

056 – CSS Inheritance.mp4

057 – CSS Colors Exercise.mp4

Section Quiz

08 – Styling Text

058 – Changing Fonts with FontFamily.mp4

059 – Fontsize fontweight and fontstyle.mp4

060 – Changing Text Alignment.mp4

061 – Lineheight letterspacing and wordspacing.mp4

062 – Adding Custom Fonts With Google Fonts.mp4