Videos / Web Dev

Episode 1 of 16 · Web development, end to end

HTML and CSS: the document, and the box model that lays it out

Chapters

1. A page is a tree0:00
2. Anatomy of an element0:16
3. The parser builds the tree0:32
4. Div soup0:48
5. The accessibility tree1:06
6. The div with a click1:24
7. Five opinions, one paragraph1:39
8. The order it resolves in1:56
9. Three numbers2:15
10. The specificity war2:33
11. What travels down2:49
12. Taming the cascade3:06
13. Four boxes, nested3:22
14. Width is only the content3:37
15. Border-box3:51
16. Margins collapse4:07
17. Padding you can click4:24
18. Block, inline, both4:38
19. Normal flow4:54
20. The hacks that came first5:09
21. Flexbox: one axis5:25
22. How an item negotiates5:44
23. Grid: two axes6:00
24. As many columns as fit6:18
25. Relative to what, exactly6:35
26. Em compounds6:51
27. Min-width, and only7:07
28. The component asks its slot7:24
29. Type without steps7:39
30. Three more, and done7:56
31. The pipeline8:15
32. Parse, and what blocks it8:32
33. Style, then reflow8:51
34. Paint, then composite9:09
35. Which properties are cheap9:27
36. Read, then write9:42
37. The whole thing9:57

HTML and CSS: the document, and the box model that lays it out. Open any web page and what the browser actually holds is not a page. It is a tree. One root element, branches nested inside branches, and every piece of text hanging off one of the

Mark as watchedSaved in this browser only.