Commit 1: enter all the content and order of how it will appear on the smallest supported screen. No structure, just literally only text and media nodes
Commit 2: enclose content in semantic tags. No layout considerations, just semantics. Headings get the appropriate <h#>
tags, copy gets <p>
tags, anchors get <a>
tags, buttons get <button>
tags, etc.
Commit 3: create an HTML layout out of block elements. <header>
, <section>
, <footer>
, <nav>
, <ul>
, <ol>
, etc. Sibling elements must have the same display value, otherwise nest them. E.g. a <span>
can't be the sibling of a <div>
. We still haven't written any CSS.
Commit 4: style all "inline" content, which encompasses elements with display: inline by default (e.g. text nodes, anchors, and spans). Styles should include resets, text colors, font sizes, line heights, font weights, etc. No margins, no padding, no heights, no widths (unless they are part of a CSS reset). No media queries, just get those inline elements styled for the smallest supported screen size
Commit 5: style all "inline-block-like" elements, which encompasses elements with display: inline-block by default, e.g. inputs, buttons, selects, images, media tags, etc. These elements get values like background-color, text color, border-radius, resets, pseudoelement styles, etc. Ideally they are not given special width and height values. Instead, they should fill up their container element, which will be styled in the next commit. Note: in the final product, display: inline-block should be used sparingly, if at all. If you have an item with a defined height and width, its alignment can be controlled with more precision with other paradigms such as display: flex
Commit 6: style all "block-like" content, which encompasses elements with display: block, flex, grid, table, etc. These elements get values for margin, padding, width, height, max-width, etc. No media queries yet. The HTML + CSS should be substantially finished for the smallest screen at this point
Commit 7: implement media queries as specified in the specs. Start with the smaller breakpoints and make your way up