Understanding HTML and CSS

17h 52m 36s
English
Paid
July 20, 2024
Deeply understand Semantic HTML, CSS, Flexbox, Grid, learn to read the specifications, and more. In this course you'll gain a deep understanding of HTML and CSS, as we dive into how these technologies really work. We'll look at the problems HTML and CSS are trying to solve and how they solve them. We'll dive into how browser rendering engines really work. We'll gain confidence to read and understand the HTML and CSS specifications, so you can continue to teach yourself in the future and keep your skills fresh.
More

Along the way we’ll follow our core philosophy of “Don’t Imitate, Understand”. Simply copying others’ projects won’t help you when faced with a real-world job that doesn’t look like the projects you’ve copied. To succeed in a real world job, you need to truly understand.

This course is designed for beginners to learn from scratch, but also to break experienced developers out of bad habits.

Some things you will learn in this course are:

  • Learn to author semantic HTML.

  • Learn how semantic HTML improves the accessibility of your user interface.

  • Learn to read and understand the HTML and CSS specifications, so you can continue to teach yourself.

  • Understand how browser rendering engines work, under the hood.

  • Gain a deep understanding of the browser DOM.

  • Gain a proper understanding of the CSS cascade, inheritance, and specificity.

  • Understand advanced CSS features such as Flexbox and Grid.

If you are new to HTML and CSS: you will learn fundamentals and skills that will help you the rest of your career.

If you are an experienced developer: you will learn to reset your mental models, understand and rely on the official specifications, and dramatically improve your day-to-day development experience.

Watch Online Understanding HTML and CSS

Join premium to watch
Go to premium
# Title Duration
1 Introduction 03:02
2 Tools and Setup 00:56
3 Trees 00:15
4 Conceptual Aside: Data Structures 03:43
5 The Language of Trees 02:23
6 Engine Aside: Not Really a Tree 01:31
7 Traversal and Search 01:47
8 HTML 00:55
9 A Document 02:24
10 Conceptual Aside: User Agents 03:48
11 Markup: Describing Content 03:24
12 Language: Consistent Meaning 02:11
13 Conceptual Aside: Semantics and Authoring 01:52
14 Tags, Attributes, and Elements 02:10
15 Elements and Trees 02:32
16 Markup is Everywhere 02:37
17 Conceptual Aside: Specifications 01:31
18 The HTML Specification 07:16
19 Conceptual Aside: Author vs Implementor 02:05
20 Content Models and Kinds of Content 02:45
21 The Document 00:13
22 A Starting Point 00:50
23 Document Types 01:23
24 The Root 02:54
25 Metadata 03:54
26 Content 01:48
27 Document Sections 00:13
28 The Outline 04:20
29 Self-Contained Compositions 06:02
30 Thematic Groupings 06:06
31 Tangential Content 04:06
32 Headings and Rank 05:21
33 Headers and Footers 03:34
34 Addresses 03:07
35 Grouping Things 00:12
36 Paragraphs 02:20
37 Did You Catch The Invalid Markup? 00:49
38 Quotes 02:16
39 Unordered Lists 02:48
40 Ordered Lists 01:59
41 A Quick Check 01:24
42 Association Lists 07:31
43 Multidimensional Content 10:14
44 Multidimensional Content and Doing It Wrong 05:11
45 Dominant Content 02:33
46 div and Doing It Wrong 08:43
47 Text Itself 00:28
48 Emphasis 07:46
49 Importance 03:01
50 Side Comments 02:04
51 Have You Found The Invalid Markup? 01:03
52 Line Breaks 05:38
53 Author's Comments 02:09
54 span and Doing It Wrong 03:10
55 The Browser and the DOM 00:33
56 Conceptual Aside: HTTP 08:21
57 Anchor Tags and Hypertext 05:16
58 Conceptual Aside: User Agents (again) 01:36
59 Conceptual Aside: The Browser 02:17
60 Blink: A Rendering Engine 02:28
61 Engine Aside: Parsing 02:11
62 Named Character References 04:18
63 Conceptual Aside: Objects 01:25
64 Conceptual Aside: Models 02:46
65 The Document Object Model 02:35
66 Building the DOM 08:00
67 Conceptual Aside: Developer Tools 01:53
68 The Inspector 08:34
69 Anchor Tags (again) 08:10
70 Engine Aside: Gecko 02:12
71 Engine Aside: WebKit 01:40
72 Accessibility 00:14
73 Conceptual Aside: Accessibility 00:39
74 Conceptual Aside: Screen Readers 01:44
75 Semantics and Accessibility 08:59
76 ARIA 02:20
77 Interactivity 00:23
78 Navigation 01:49
79 Engine Aside: Forms and HTTP 04:41
80 Forms, Fields, and Labels 15:16
81 Buttons 07:01
82 More Fields 09:57
83 Even More Fields 08:59
84 JavaScript Frameworks 00:32
85 Conceptual Aside: DOM Manipulation 02:18
86 React, Angular, Vue, and HTML Authoring 05:49
87 Stylesheets and Querying Trees 00:22
88 Conceptual Aside: Querying a Tree 02:01
89 The CSS Specifications 11:46
90 User Agent Stylesheet 07:03
91 Type Selectors 02:20
92 Declarations 02:24
93 Inheritance 02:38
94 Author Stylesheets 04:12
95 Universal Selector 04:20
96 Attribute Selectors 09:31
97 ID Selector 03:13
98 Class Selector 06:35
99 Grouping Selectors 05:58
100 Combinators: Descendant 04:15
101 Combinators: Child 03:12
102 Combinators: Next-Sibling 02:49
103 Combinators: Subsequent Sibling 01:59
104 Conceptual Aside: CSS Standards and Drafts 06:39
105 Browser Support (caniuse and MDN) 06:19
106 Child-Indexed Pseudo-classes 08:21
107 Typed Child-Indexed Pseudo-classes (and Debugging a Problem) 14:14
108 Location Pseudo-classes 03:45
109 User Action Pseudo-classes 02:43
110 Negation Pseudo-class 02:13
111 Pseudo-elements 02:50
112 The Cascade 16:00
113 Importance 06:59
114 Specificity 07:36
115 Order of Appearance 03:05
116 Cascade Layers and @import 06:35
117 inherit, initial, and Specified Values 08:04
118 Matches-Any Pseudo-Class 03:16
119 Specificity-Adjustment Pseudo-Class 05:19
120 Optimization 04:14
121 Engine Aside: The CSSOM 01:52
122 Box Model 00:27
123 Conceptual Aside: Rendering 03:05
124 Visual Formatting Model 04:37
125 Box Model 04:32
126 Viewport and Coordinates 02:59
127 Engine Aside: Layout 01:27
128 Conceptual Aside: Pixels, Pixel Density, and Reference Pixels 03:04
129 Units and Computed Values 09:46
130 Engine Aside: Intrinsic Size 02:18
131 Box Sizing 20:06
132 Conceptual Aside: Functions 02:04
133 Calc, min, max, clamp 03:02
134 Engine Aside: Formatting Contexts 03:54
135 Box Position 00:18
136 Positioning Schemes 01:38
137 Static 02:09
138 Relative 03:59
139 Absolute 05:33
140 Fixed 02:29
141 Sticky 01:29
142 Painting 00:19
143 Engine Aside: Painting 01:32
144 Visibility 01:24
145 Z-Index 13:40
146 Images: img 08:26
147 Flow 00:19
148 Display 01:59
149 Block 11:22
150 Float 04:35
151 Inline, Vertical Align, Line-Height and More 11:57
152 flow-root and BFCs 03:22
153 Conceptual Aside: Multilingual Support 03:28
154 Writing Mode 08:01
155 Direction 02:48
156 Text-Orientation 03:25
157 Logical Properties 14:05
158 Inline-Block 01:04
159 None 02:22
160 Table, List-Item, and More 02:59
161 Flexbox 00:12
162 Flex Formatting Context 08:13
163 Flow Direction 14:14
164 Display Order 04:43
165 Wrapping and Overflow 04:26
166 Flex 15:00
167 Alignment 09:34
168 Collapse 03:00
169 Inline-Flex 01:42
170 Grid 00:19
171 Grid Formatting Context 10:14
172 Conceptual Aside: Fractional Units 01:45
173 Track Sizing 09:35
174 Item Placement 10:09
175 Track Repetition 05:35
176 Alignment and Spacing 06:41
177 Layering 01:41
178 A Visual Change 08:05
179 Fonts, Colors, and More 00:22
180 Fonts 05:26
181 Hexadecimal, RBG, and Named Colors 06:48
182 Opacity 01:37
183 Backgrounds 01:51
184 Transitions 04:28
185 Animations 07:13
186 Images: SVGs 04:20
187 A Semantic Change 03:25
188 Visual Design and User Experience 07:26
189 Responsiveness and Querying Media 00:27
190 Conceptual Aside: Media 00:42
191 Media Queries 03:20
192 Viewports and Zoom 03:23
193 Media Features 07:51
194 Media Query Range Syntax 03:46
195 Mobile First 04:03
196 Images: srcset and picture 01:19
197 Print 01:21
198 Saving Time and Effort 00:09
199 Custom Properties for Cascading Variables 05:18
200 Minification 02:37
201 HTML Validation 02:11
202 CSS Frameworks 00:10
203 Being Better Than Frameworks 05:15
204 Game Changing CSS 03:38
205 CSS Nesting 00:46
206 The Nesting Module 06:45
207 Nesting in Practice 07:05
208 & and Pseudo-classes 03:55
209 at-rules and Nesting 06:52
210 CSS Layers 00:58
211 Cascade Layers (@layer) 05:21
212 Defining Layers 09:57
213 Layers and the Cascade 03:49
214 Layers in Practice 06:18
215 Container Queries and Units (@container) 00:45
216 The Containment Module 06:09
217 Containment Contexts and Queries 10:44
218 Container Query Units 02:47
219 Container Queries in Practice 07:56
220 The superpower of :has 00:21
221 The Relational Pseudo-class 03:52
222 :has in Practice 05:58
223 :has in Practice (Part 2) 04:04
224 Native Over Custom 02:28
225 Landing Page 00:46
226 Analyzing the Designer's Prototype 04:36
227 Page Structure: HTML Authoring 05:09
228 Navigation: HTML Authoring 02:10
229 Hero: HTML Authoring 02:57
230 Features: HTML Authoring 02:05
231 About Us: HTML Authoring 01:01
232 Contact Us: HTML Authoring 02:23
233 Footer: HTML Authoring 01:53
234 Layout: CSS Authoring 08:37
235 Navigation: CSS Authoring 17:35
236 Hero: CSS Authoring 06:30
237 Features: CSS Authoring 08:12
238 About Us: CSS Authoring 01:45
239 Contact Us: CSS Authoring 05:54
240 Footer: CSS Authoring 03:39
241 Dashboard 00:40
242 Analyzing the Designer's Prototype 01:32
243 Page Structure: HTML Authoring 02:43
244 Navigation: HTML Authoring 00:56
245 Metrics: HTML Authoring 04:12
246 Table: HTML Authoring 01:38
247 Analytics: HTML Authoring 01:08
248 Footer: HTML Authoring 00:28
249 Layout: CSS Authoring 05:36
250 Navigation: CSS Authoring 03:40
251 Metrics: CSS Authoring 06:06
252 Table: CSS Authoring 03:39
253 Analytics: CSS Authoring 01:05
254 Footer: CSS Authoring 01:30
255 Conclusion 00:10
256 You Are An Author 01:59

Similar courses to Understanding HTML and CSS

Wizard zines. Zine 14 pack
Page Transitions

Page Transitionssuperhi.com

Duration 4 hours 10 minutes 33 seconds
100 Days Of Code: The Complete Web Development Bootcamp 2022
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
The HTML & CSS Bootcamp 2023 Edition

The HTML & CSS Bootcamp 2023 Editionudemy

Duration 37 hours 18 minutes 8 seconds
CSS Layout Masterclass

CSS Layout MasterclassNomad Coders

Duration 6 hours 49 minutes 41 seconds
Ultimate PHP, Laravel, CSS & Sass! Learn PHP, Laravel & Sass
The Ultimate HTML5 & CSS3 Series: Part 1
Composing Layouts in React

Composing Layouts in Reactfullstack.io

Duration 4 hours 38 minutes 12 seconds