freeCodeCamp.org on YouTube · Open on YouTube
Core skills: building for the web · Advanced beginner · Lesson 16 of 98 · 2 h 15 min video, then about 1 week of practice
HTML and CSS: semantic structure and modern layout
After this you can build an accessible, responsive page layout with semantic HTML, Flexbox and Grid.
Why it matters
A generalist does not need to be a CSS expert, but you do need to build an interface that works on a phone, uses the right HTML elements, and can be used with a keyboard. Semantic HTML (buttons that are `<button>`, forms with labels) gives you accessibility almost for free. Focus on Flexbox for one-dimensional layout and Grid for two-dimensional, and build a few layouts from screenshots without a tutorial. Trap: reaching for a CSS framework before you understand the box model. You will not be able to debug it.
How to use this resource
Thorough Flexbox course. Pair it with the semantic HTML video and MDN for Grid.