HTML5 & CSS3 — Semantic Markup to Responsive Layouts
In short: Using elements that describe meaning — header, nav, main, article, section, aside, footer, button, headings — instead of generic div/span.
- Benefits: accessibility (screen readers use landmarks and roles), SEO (search engines understand structure), built-in behaviour (buttons are focusable and keyboard-operable), and readable code.
In short: Each element is content + padding + border + margin.
- With the default
content-box,widthsets only the content, so padding and border are added on top. - With
border-box,widthincludes content, padding and border, which makes sizing predictable — most projects set it globally.
In short: Specificity scores selectors as (ids, classes/attributes/pseudo-classes, elements);
- higher wins, inline styles beat selectors,
!importantbeats normal declarations, and with equal specificity the later rule wins. - Example:
#nav a(1,0,1) beats.menu a.active(0,2,1). - Keep specificity low with classes to avoid override wars.
In short: Flexbox is one-dimensional (a row or a column), content-driven — nav bars, toolbars, centring, distributing items.
- Grid is two-dimensional (rows and columns together), container-driven — page layouts, card galleries, forms.
- Often Grid for the overall layout and Flexbox inside components.
In short: Flexbox: parent display:flex; justify-content:center; align-items:center;.
- Grid: parent
display:grid; place-items:center;. - Horizontal only for a block with a width:
margin: 0 auto. - Absolute:
position:absolute; inset:0; margin:auto;with a set size, ortop:50%; left:50%; transform:translate(-50%,-50%).
In short: display:none removes the element from layout and the accessibility tree.
visibility:hiddenhides it but keeps its space and it can't be clicked.opacity:0makes it transparent but it keeps its space and still receives clicks and focus.
static (default flow), relative (offset from its normal place, anchor for absolute children), absolute (out of flow, relative to nearest positioned ancestor), fixed (relative to the viewport), sticky (behaves relative until a scroll offset, then fixed within its container).
Viewport meta tag, mobile-first CSS with min-width media queries, fluid layouts (Flexbox/Grid, %, fr, minmax, clamp), responsive images (max-width:100%, srcset, <picture>), relative units (rem), container queries for reusable components, testing on real devices and DevTools device mode, and avoiding fixed widths and horizontal scroll.
In short: Media queries apply styles based on the viewport/device (@media (min-width: 768px), prefers-color-scheme, prefers-reduced-motion, print).
- Container queries apply styles based on the size of a parent container (`container-type: inline-size;
- @container (min-width: 400px)`), so a component adapts wherever it is placed — e.g. a card in a narrow sidebar vs a wide main area.
In short: Semantic HTML, labels for inputs, alt text, real buttons/links, keyboard navigation with visible focus, colour contrast ≥ 4.5:1, logical heading order, lang attribute, ARIA only where native HTML can't (live regions, expanded states), respect reduced motion, and test with Lighthouse/axe and a screen reader.
- Target WCAG 2.1/2.2 AA.
In short: px is fixed;
emis relative to the element's/parent's font size (compounds when nested);remis relative to the root font size (predictable, respects user font settings);%is relative to the parent dimension;vw/vhare 1% of the viewport width/height (dvhaccounts for mobile browser bars).
In short: CSS custom properties exist at runtime: they cascade and inherit, can be changed by media queries, classes or JavaScript — perfect for themes and dark mode.
- Sass variables are compile-time constants, replaced in the output CSS; useful for build-time logic (loops, mixins), but cannot change in the browser.
In short: HTML → DOM, CSS → CSSOM, combined into the render tree → layout → paint → composite.
- CSS blocks rendering and sync scripts block parsing.
- Optimise: small/critical CSS first,
deferscripts, preload key fonts/images, compress and size images, avoid layout shifts by setting dimensions, animatetransform/opacity.
In short: A stacking context is an isolated layering group; z-index only compares elements within the same context.
- New contexts are created by positioned elements with
z-index,opacity < 1,transform,filter,isolation: isolateand others. - A child with
z-index: 9999can't escape a parent context that is below another element — fix the parent's stacking, not the child's number.
In short: Google's user-experience metrics: LCP (Largest Contentful Paint — loading, good ≤ 2.5 s), INP (Interaction to Next Paint — responsiveness, good ≤ 200 ms;
- replaced FID in 2024) and CLS (Cumulative Layout Shift — visual stability, good ≤ 0.1).
- Improve with optimised images and fonts, less JavaScript, and fixed dimensions for media and ads.
In short: Use DevTools device mode and find the element wider than the viewport (temporarily * { outline: 1px solid red }, or check elements whose right edge exceeds the width).
- Usual causes: fixed widths (
width: 500px), long unbroken text/URLs (overflow-wrap: anywhere), images withoutmax-width:100%,100vwwith a scrollbar, negative margins, tables and code blocks (wrap them in anoverflow-x:autocontainer), and grid/flex children that can't shrink (min-width: 0on grid/flex items,minmax(0, 1fr)).
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(4, 1fr); } }Or without breakpoints: grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); — columns appear as space allows.
In short: Set width/height (or aspect-ratio) on images, videos and iframes;
- reserve space for ads, banners and late-loading components (skeletons);
- use
font-display: swapwith similar fallback fonts orsize-adjust; - don't insert content above existing content after load;
- animate with
transforminstead of changing layout properties.