Semantic HTML
Choose elements for meaning rather than appearance. Headings create an outline; landmarks such as header, nav, main and footer identify page regions.
<main>
<article>
<h1>Page title</h1>
<p>Meaningful content.</p>
</article>
</main>Accessibility is foundational
Use native controls, visible focus styles, labelled form fields, useful alternative text and sufficient colour contrast. Test every page with a keyboard and semantic inspection tools.
Prefer native HTML: a real button already supports keyboard focus and activation. A clickable div does not.
Flexbox and Grid
Flexbox aligns content on one main axis. Grid coordinates rows and columns. Use each for the problem it was designed to solve.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}Mobile-first responsive design
Start with the smallest useful layout and progressively enhance it at wider breakpoints. Prefer fluid sizes and content-driven layouts over targeting specific devices.