HTML & CSS

Understand the anatomy of an HTML document: DOCTYPE, html, head, and body elements, and how browsers parse them into a document tree.

Use headings, paragraphs, lists, and inline text elements to structure written content with proper semantic meaning.

Embed images and create hyperlinks between pages using anchor tags, and understand relative vs absolute paths.

Choose the right elements (article, section, nav, aside, main, header, footer) to convey meaning, improving accessibility and SEO.

Build interactive forms with text fields, checkboxes, selects, and buttons, and understand form submission basics.

Display tabular data correctly and embed audio, video, and iframes into web pages.

You can write well-structured, semantic HTML documents from scratch.

Target elements with type, class, ID, attribute, and combinator selectors, and understand how specificity determines which rules win.

Learn how browsers resolve conflicting rules through origin, specificity, and source order, and how properties inherit from parent elements.

Understand content, padding, border, and margin, and how box-sizing changes the calculation of an element's total size.

Choose between px, em, rem, %, vw/vh, and other units depending on context, and understand how they scale.

Apply colors using hex, rgb, hsl, and modern color functions, and control background images, gradients, and layering.

You understand how CSS rules are applied and can style individual elements with confidence.

Understand block vs inline vs inline-block behavior and how elements naturally flow on the page before any layout intervention.

Remove elements from normal flow or offset them using the five positioning schemes and understand stacking contexts.

Distribute space and align items along a single axis using flex containers, enabling powerful row and column layouts.

Create two-dimensional layouts with explicit rows and columns, grid areas, and gap control for complex page structures.

Understand float-based layouts for maintaining older codebases, and how clearfix works.

You can build any common page layout using Flexbox, Grid, or a combination of both.

Write breakpoints that adapt styles based on viewport width, height, orientation, and other device characteristics.

Serve appropriately sized images using srcset, sizes, and the picture element to save bandwidth and improve load times.

Design from the smallest screen up, using min-width breakpoints to progressively enhance layouts for larger viewports.

Style components based on their parent container's size rather than the viewport, enabling truly reusable responsive components.

You can build layouts that look great on phones, tablets, and desktops.

Control font families, sizes, line height, letter spacing, and use web fonts or variable fonts for polished text rendering.

Add smooth state changes with CSS transitions and build keyframe animations for engaging visual feedback.

Translate, rotate, scale, and skew elements to create visual effects and interactive UI without changing document flow.

Define reusable values with --var syntax, scope them to selectors, and dynamically change themes or design tokens.

Use :has(), :is(), :where(), :not(), ::before, ::after, and other pseudo selectors for precise, concise styling.

Use mathematical and logical CSS functions to create fluid, adaptive sizing without media queries.

Write nested selectors directly in CSS (no preprocessor needed), keeping related styles grouped and readable.

You leverage modern CSS features for maintainable, dynamic stylesheets.

Ensure your markup and styles support screen readers, keyboard navigation, focus management, and sufficient color contrast.

Organize stylesheets at scale using BEM, utility-first patterns, or CSS Modules to avoid specificity wars and naming collisions.

Minimize render-blocking CSS, reduce unused styles, and understand how browsers paint and composite layers.

Inspect, debug, and experiment with styles in real time using the Elements panel, computed styles, and layout overlays.

You write accessible, performant, well-organized HTML and CSS suitable for real-world projects.