The Basics of Web-Design Layout: Learn How To Describe Your Design With HTML & CSS
Rich From TapTapKaboom · Multi-hyphenate Artist
A working developer breaks down box model, positioning and floats live in the browser, but the promised project never gets past raw padding numbers and inline JavaScript.
What it actually teaches
The course opens with a metaphor that carries the whole thing: HTML elements as boxes stacked top to bottom, each one expanding to fit its contents unless told otherwise. From there it works through the box model (content, padding, border, margin), the five positioning schemes, floats, z-index, and the calc() function, before landing on a build-along project that recreates a Sketch-designed landing page in HTML and CSS. The teacher, Rich, frames it around a real memory: not knowing why elements start top-left, when to use float versus position, or how to center something, problems anyone who taught themselves HTML in the 2000s will recognize immediately.
The strongest material is the box-sizing lesson, where a 400px-wide box with 50px padding and a 20px border is inspected in DevTools to show it rendering at 540px, then fixed by switching to border-box. It is a small, concrete demonstration of a mistake nearly every beginner makes, and seeing the computed width in the inspector does more than any diagram would. The margin-collapsing example that follows, where a 30px bottom margin and a 30px top margin overlap into a single 30px gap instead of 60px, is handled the same way: shown live, explained simply, filed away as a thing to watch for rather than a rule to memorize.
Where it gets thinner
The positioning section is comprehensive on paper (static, relative, absolute, fixed, sticky are all covered) but leans heavily on a single popup component as the example for absolute and fixed positioning, and sticky positioning gets a caveat-heavy explanation about browser support and prefixes rather than a clean demonstration of its main use case, a header that sticks after scrolling past a hero section. Floats are taught mainly through text-wrapping around images, which is the classic use case but a fading one, and the course does not address the layout hacks (clearfix, overflow hidden) that floats historically required for anything beyond wrapping text.
The most significant gap is structural rather than a missing topic: flex and grid, the layout tools actually used to build modern web pages, are explicitly ruled out of scope. That is a defensible choice for a beginner course focused on fundamentals, but it means a student finishes with a strong grip on how a page used to be built and has to go looking elsewhere for how one is built now. The project section compounds this by spending large stretches on manual pixel tweaking, margin-top of 50px, then 40px, then 35px, until something looks right, rather than teaching a repeatable method for getting there.
The verdict
As a fundamentals course this delivers what it promises: a working mental model of the box model, positioning, and the mechanics HTML and CSS use to lay out a page. It rewards someone who has poked at CSS without understanding it and wants the underlying logic filled in. It falls short of being a complete layout course because it stops exactly where real layout work begins, and the project, while a genuine end-to-end build with GitHub commits and deployment via Surge, spends more time on trial-and-error pixel values than on teaching a system for arriving at them.
The standout
The live CodePen demo of collapsing margins, where two 30px margins overlap into a single 30px gap, makes an invisible CSS behavior visible in a way most references never manage.
What you will learn
- How the CSS box model actually adds up width (content-box vs border-box) so padding and borders stop breaking your layouts
- The five positioning types (static, relative, absolute, fixed, sticky) and when each one applies
- How floats pull elements out of normal flow and how clear resets the next element after them
- The difference between block, inline and inline-block display types and how to override browser defaults
- How to center elements horizontally with margin auto and vertically with calc() and negative margins
- How margin collapsing silently eats the smaller of two touching margins
Best for: A designer or junior developer who already writes some HTML and CSS but still guesses at float, position and box-sizing rather than understanding why the browser does what it does.
Skip it if: Anyone who has already built a few real layouts and understands the box model, since flex and grid, the two layout tools actually used for modern pages, are explicitly left out.