Understanding HTML and CSS
17h 52m 36s
English
Paid
Course description
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.
Read more about the course
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
Watch Online Understanding HTML and CSS
0:00
/ #1: Introduction
All Course Lessons (256)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction Demo | 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 |
Unlock unlimited learning
Get instant access to all 255 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsSimilar courses
CSS for JavaScript Developers
Sources: Josh Comeau
Learn CSS confidently with this interactive course designed for JavaScript developers. Understand CSS systems to enhance your web development skills and...
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
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
Flexbox Simplified
Sources: kevin powell
Flexbox is a wonderful tool that opens up the world of responsive layouts, but it can be hard to predict exactly what's going to happen when we use it, and it's full of sometime...
4 hours 41 minutes 57 seconds
Full-Stack Web Developer Bootcamp with Real Projects
Sources: udemy
This Course covers full process of web development from scratch till deployment with domain name. We will use Node, Express, MongoDB to build Server side which
22 hours 11 minutes 13 seconds
Want to join the conversation?
Sign in to comment