CSS Course

css mastery frontend engineering browser rendering core web vitals design systems interview capstone

css introduction css — cascading style sheets — is the language browsers use to style html. it controls colors, fonts,

css syntax every css rule has the same anatomy: a selector that picks elements, and a declaration block of property/value

css selectors selectors decide which elements your rules apply to. css has dozens of selector types — knowing the right

css how to there are three places to write css — and choosing the right one matters for performance and

css comments comments document your stylesheet for future-you and your teammates. css supports a single comment syntax: anything between /*

css errors css fails silently. there's no console error when a property is mistyped — the browser just skips it.

css colors color is the most-used css feature. modern css supports many color systems, and picking the right one affects

css backgrounds backgrounds are how you fill an element with color, images, gradients, or patterns. css lets you layer multiple

css borders borders draw a visible (or invisible) edge around an element's padding box. they're used for cards, inputs, dividers,

css margins margin is the transparent space outside an element's border. it pushes other elements away. master margins and you've

css padding padding is the space inside an element, between its content and its border. where margin pushes others away,

css height / width width and height set the size of an element's content box (or border box, with box-sizing).

css box model every element is a rectangular box made of four layers: content, padding, border, and margin. this is

css outline outline draws a line around an element outside the border, but unlike border it doesn't take up space

css text text properties control alignment, spacing, decoration, and transformation. good typography is mostly nailing line-height, color contrast, and letter

css fonts fonts shape the entire personality of your site. css lets you pick families, weights, sizes, and styles —

css icons icons can be added with icon fonts (font awesome), inline svg, or css pseudo-elements. svg is the modern

css links links have multiple states — unvisited, visited, hover, active, focused — each stylable independently. treat each one intentionally

css lists lists have their own styling family: bullets, numbers, custom markers, and spacing. css lets you customize or completely

css tables tables have unique layout rules. css gives you control over borders, spacing, alignment, and zebra striping — essential

css display the display property controls how an element generates a box and how its children lay out. most layout

css max-width max-width caps how wide an element can grow. combined with width: 100%, it's the foundation of every responsive

css position the position property changes how an element is placed in the document flow. it's the foundation of overlays,

css position offsets when position is set to anything other than static, the offset properties — top, right, bottom, left

css z-index z-index controls stacking order — which element renders on top when they overlap. it only works on positioned

css overflow overflow decides what happens when content is bigger than its container. values: visible (default, content escapes), hidden (clipped),

css float float was the original way to do multi-column layout. today it's mostly used for one thing: wrapping text

css inline-block inline-block lets an element flow with text (inline) while still respecting width, height, and vertical spacing (block). mostly

css align alignment in modern css is mostly the job of flexbox and grid. the old approaches (text-align, vertical-align, margin:

css combinators combinators describe the relationship between two selectors — descendant, child, sibling. they let you target elements based on

css pseudo-classes pseudo-classes target elements in a specific state or position — hovered, focused, first-child, the third checkbox checked. they're

css pseudo-elements pseudo-elements style a part of an element — its first letter, its first line, or content inserted before/after.

css opacity opacity sets the transparency of an entire element, including its children. values from 0 (invisible) to 1 (opaque).

css navigation bars navigation bars are the most-built css component on the web. the modern recipe is a flex container

css dropdowns a pure-css dropdown reveals a menu when you hover or focus a parent. great for desktop nav menus;

css image gallery image galleries are a grid showcase. repeat(auto-fill, minmax(180px, 1fr)) creates a responsive masonry-like grid with no js.

css image sprites image sprites combine many small images into one file, reducing http requests. each icon is a background-image

css attribute selectors attribute selectors target elements based on their html attributes — type, href, data-*, aria states. they keep

css forms forms are full of unstyled defaults that look different in every browser. css gives you full control —

css counters css counters generate numbering automatically — chapter numbers, nested outline lists, even step indicators. three properties: counter-reset (start),

css units css units fall into two camps: absolute (px, cm) and relative (em, rem, %, vw, vh, ch). picking

css inheritance some properties inherit from parent to child by default (color, font-family, line-height). others don't (margin, padding, border, background).

css specificity when two rules target the same element with different declarations, specificity decides who wins. knowing how it's calculated

css !important adding !important to a declaration makes it beat normal-specificity rules. it's a sledgehammer — sometimes necessary (utility frameworks,

css math functions css has built-in math functions: calc(), min(), max(), and clamp(). they make layouts adapt without media queries.

css optimization faster css = faster pages. the wins come from smaller files, fewer renders, and better-organized rules. most sites

css accessibility good css makes apps usable for everyone — keyboard users, screen reader users, people with low vision, color

css website layout most websites have the same skeleton: header, nav, main, sidebar, footer. css grid lets you express that

css rounded corners border-radius rounds the corners of any element. use a single value for all four corners, or up

css border images border-image lets you use an image as a border, slicing it into 9 pieces (corners, edges, middle)

css gradients gradients are smooth color transitions rendered by the browser — no images required. three types: linear, radial, conic.

css shadows shadows create depth and hierarchy. css has two: box-shadow (around elements) and text-shadow (around text). css frontend engineering

css text effects modern css can do gradients on text, multi-line truncation, glowing effects, and more — without images or

css custom fonts @font-face loads a custom font from your server. combine with font-display: swap so text renders immediately in

css 2d transforms transforms move, rotate, scale, and skew elements without affecting layout. they're gpu-accelerated, so animating them is fast.

css 3d transforms add a third dimension with translatez, rotatex/y, and perspective. used for card flips, parallax tilts, and cube

css transitions transitions smoothly animate property changes between two states — usually a hover or class toggle. they're the simplest

css animations animations use @keyframes to define multi-step motion that runs continuously or on demand. where transitions handle state changes,

css tooltips a pure-css tooltip shows extra info on hover or focus, using a positioned ::after pseudo-element with the message

css image styling css lets you mask, crop, filter, and frame images — turning every into a styled component. combine

css image modal an image lightbox can be built with the native :target pseudo-class — no js needed. click a

css image centering center an image horizontally with `margin: 0 auto` (it must be display: block) or by placing it

css image filters filter applies real-time visual effects to images and elements: blur, brightness, contrast, grayscale, sepia, hue-rotate, drop-shadow, saturate,

css image shapes shape-outside lets text wrap around non-rectangular shapes — circles, polygons, or even an image's alpha channel. pair

css object-fit object-fit decides how an image (or video) fills its box. cover crops to fill; contain fits inside; fill

css object-position object-position chooses which part of the image stays visible after object-fit: cover crops it. defaults to 50% 50%

css masking mask-image hides parts of an element using an image's alpha channel — perfect for fade-out edges, custom shapes,

css buttons buttons are the most-styled component on the web. a great button is comfortable to click, has a clear

css pagination pagination is a flex row of numbered links with hover and active states. keep it minimal: 1–2 sibling

css multiple columns column-count and column-width turn long text into newspaper-style columns. the browser handles the flow automatically. css frontend

css user interface ui properties tweak how forms, cursors, and resizable elements behave: appearance, cursor, resize, caret-color, accent-color, user-select. css

css variables custom properties (css variables) let you store values once and reuse them. they're the foundation of theming, dark

css @property @property formally registers a custom property with a type, default, and inheritance — enabling css variables to be

css box sizing box-sizing decides whether width includes padding+border (border-box) or only the content (content-box, the default). always set border-box

css media queries media queries apply styles based on the device — viewport width, orientation, color scheme, motion preferences, hover

flexbox intro flexbox is a one-dimensional layout system — it arranges children along a single axis (row or column) and

flex container container properties: flex-direction (row/column), flex-wrap, justify-content (main axis), align-items (cross axis), gap. css frontend engineering

flex items item properties: flex-grow (consume extra space), flex-shrink (give up space when crowded), flex-basis (starting size), and the shorthand

flex responsive flex-wrap + min-width on items create responsive layouts without media queries — items wrap to a new line

grid intro grid is a two-dimensional layout system — rows and columns at once. where flex aligns along one axis,

grid container container properties: grid-template-columns, grid-template-rows, gap, grid-template-areas, justify-items, align-items, justify-content, align-content. css frontend engineering

grid items item properties: grid-column, grid-row, grid-area, justify-self, align-self. items can span multiple cells and override container alignment. css frontend

grid 12-column layout a 12-column grid is the de-facto framework layout. css grid makes it trivial — and you can

css @supports @supports applies styles only if the browser understands a given property/value — perfect for progressive enhancement. css frontend

rwd intro responsive web design (rwd) is the practice of building one page that adapts to phones, tablets, and desktops.

rwd viewport the viewport meta tag tells mobile browsers to render at device width instead of zooming out a fake

rwd grid view a responsive grid uses fractional units and auto-fit/minmax to adapt to any width without media queries. css

rwd media queries for genuine layout changes (sidebar collapses to drawer, nav becomes hamburger), use media queries. keep the count

rwd images responsive images scale with their container and serve appropriately-sized files. combine `width: 100%; height: auto` with the ``

rwd videos make videos responsive by setting width: 100% and using aspect-ratio to maintain proportion. embeds (youtube, vimeo) use the

rwd frameworks frameworks like tailwind, bootstrap, and bulma ship pre-built responsive utilities so you stop writing breakpoint css by hand.

rwd templates pre-built responsive templates jump-start projects. use them to study patterns: nav, hero, feature grid, pricing, footer. css frontend

css certificate complete this course and the included quizzes to demonstrate your css skills. a certificate signals to employers and

sass tutorial sass (syntactically awesome style sheets) is a css preprocessor: a superset of css that adds variables, nesting, mixins,

how browsers parse html html parsing converts byte streams into a live dom through tokenization and tree construction — the

cssom construction cssom construction parses css bytes into the css object model — a separate tree from the dom that

dom vs cssom dom and cssom are sibling trees: dom describes document structure and semantics; cssom describes style rules and

render tree creation render tree creation walks the dom, consults computed styles from cssom, and builds the set of nodes

layout engine layout engines calculate geometry — position and size of every render object. blink's layoutng (chrome), gecko's fragment-based layout

reflow reflow (layout) recalculates element geometry when the layout tree becomes dirty. reading offsetwidth after mutating width forces synchronous layout

repaint repaint records draw operations when visual properties change without geometry changes — color, background, visibility, outline. cheaper than reflow

composite layers composite layers are gpu-backed surfaces the compositor thread can transform and opacity-animate without main-thread layout or paint. blink's

critical rendering path the critical rendering path (crp) is the minimum sequence: dom + cssom → render tree → layout

browser optimization browser optimizations — incremental layout, display lists, tile rasterization, bfcache, preload scanner, off-main-thread compositing — hide pipeline cost

core web vitals core web vitals — lcp, inp (replacing fid), and cls — are heavily influenced by css architecture.

largest contentful paint largest contentful paint (lcp) measures when the largest visible content element paints. css delays lcp through render-blocking

cumulative layout shift cumulative layout shift (cls) scores unexpected layout movement. css fixes: reserve space with aspect-ratio, min-height, and explicit

first input delay first input delay (fid) measured delay from first interaction to main thread availability — largely replaced by

layout thrashing layout thrashing (forced synchronous layout) occurs when javascript interleaves dom geometry reads (offsetwidth, getboundingclientrect) with style writes —

paint optimization paint optimization reduces main-thread draw cost by shrinking invalidation regions, avoiding expensive effects on large areas, and promoting

reflow optimization reflow optimization limits layout recalculation scope and frequency. css contain: layout, fixed dimensions, flex/grid instead of js layout,

animation performance animation performance requires choosing properties the compositor can animate — transform and opacity. @keyframes animating width, margin, or

gpu acceleration gpu acceleration moves layer compositing and rasterization to the gpu process (viz in chromium). css triggers gpu paths

css performance profiling css performance profiling is a repeatable workflow: reproduce scenario → chrome devtools performance trace → identify recalculate

bem bem (block, element, modifier) is a naming methodology that maps css selectors to ui component boundaries — not a

oocss oocss (object-oriented css), articulated by nicole sullivan at yahoo, separates structure from skin and container from content. staff engineers

smacss smacss (scalable and modular architecture for css) by jonathan snook categorizes css into five types — base, layout, module,

itcss itcss (inverted triangle css) by harry roberts orders css in increasing specificity — settings, tools, generic, elements, objects, components,

atomic css atomic css assigns one declaration per class — .m-1 { margin: 4px }, .text-red { color: red }

utility first css utility-first css is an authoring workflow — build uis by composing low-level utility classes in markup first,

css modules css modules scope class names at build time — import styles from './button.module.css' yields hashed selectors like button_primary_x7f2a

scoped css scoped css limits style rules to a component subtree — vue's <style scoped> adds data attributes, shadow dom

css in react css in react spans styled-components, emotion, stylex, vanilla-extract, linaria, and tailwind-in-jsx — staff engineers evaluate based on

css in angular css in angular uses component encapsulation modes — emulated (default), shadowdom, and none — plus ::ng-deep (deprecated),

css in vue css in vue centers on single file components — <style scoped>, css modules in sfc, :deep()/:slotted()/:global(), and

design tokens design tokens are the smallest named design decisions — color, space, typography, motion, elevation — stored as data

theme architecture theme architecture defines how visual variants — light, dark, high-contrast, brand a/b — propagate through css without duplicating

typography systems typography systems codify type scale, line height, font weight, letter-spacing, and responsive fluid rules as tokens and utility

color systems color systems structure palettes into primitives (hue ramps), semantic roles (text, surface, border, interactive), and state layers (hover,

component libraries component libraries package ui as versioned apis — react/vue/angular components with encapsulated styles, tokens, and documentation. staff engineers

enterprise design systems enterprise design systems extend component libraries with governance — contribution models, design ops, token pipelines, adoption metrics,

multi brand design systems multi-brand design systems serve one codebase with multiple visual identities — holding company portfolios, franchise networks,

dark mode architecture dark mode architecture is not "invert colors" — it is a second semantic theme map with adjusted

white label platforms white-label platforms let customers rebrand the product — logo, colors, typography, sometimes layout density — while sharing

mobile first design mobile-first design authors base css for narrow viewports first, then adds min-width media queries to enhance for

fluid typography fluid typography scales font size smoothly between minimum and maximum bounds across viewport width — typically via clamp(min,

fluid layouts fluid layouts use proportional widths, flex/grid fr units, minmax(), and clamp on gaps and margins — avoiding rigid

container queries container queries (@container) apply styles based on a parent container's size — not the viewport. staff engineers use

responsive images responsive images in css complement html srcset — using object-fit, object-position, aspect-ratio, image-set() for art direction backgrounds, and

responsive media responsive media css covers video, iframe embeds, svg, and canvas — using aspect-ratio boxes, intrinsic ratio wrappers, and

modern viewport units modern viewport units — svh, lvh, dvh (small/large/dynamic viewport height), svw, lvw, dvh, and vi/vb (inline/block) —

foldable device design foldable device design addresses dual-screen and fold-aware layouts — css env(fold-left), env(fold-top), env(fold-width), env(fold-height) fold viewport segments,

wcag 2.2 wcag 2.2 css conformance maps w3c success criteria to concrete stylesheet decisions — focus visibility, target size, contrast,

accessibility audits css accessibility audits combine automated scanners (axe-core, lighthouse, pa11y), design-token linting, and manual keyboard/screen-reader review to catch visual

screen readers screen reader compatible css ensures visual styling does not break name, role, state exposure — hiding content incorrectly,

keyboard navigation keyboard navigation css makes every interactive surface operable without a pointer — visible focus, logical tab order support,

focus management css focus management complements javascript focus traps in modals, drawers, and spa route changes — scroll-margin for fixed

accessible forms accessible form css pairs with semantic html — visible labels, error states beyond color alone, adequate touch targets,

color contrast systems color contrast systems encode wcag 4.5:1 (text aa) and 3:1 (ui component aa) into design tokens —

accessibility testing css accessibility testing with lighthouse and axe-core forms the automated backbone of enterprise a11y programs — catching contrast,

xss fundamentals xss fundamentals and css intersect when attacker-controlled strings enter style attributes, url() values, expression() legacy ie, and javascript

css based attacks css-based attacks exploit the stylesheet layer for ui redressing, data exfiltration, clickjacking assistance, and history sniffing —

content security policy content security policy for css controls which stylesheets load, whether inline styles execute, and from which origins

iframe security iframe security and css combine sandbox attributes, frame-ancestors csp, pointer-events layering, and sizing constraints to prevent clickjacking, ui

secure form design secure form design css prevents visual phishing patterns, autofill spoofing, credential overlay attacks, and misleading ui that

clickjacking prevention clickjacking prevention css complements frame-ancestors csp and x-frame-options — using frame-busting fallbacks (legacy), ui overlap audits, pointer-events discipline,

design netflix homepage netflix homepage css architecture delivers immersive hero imagery, horizontal content rails, responsive breakpoints from tv to mobile,

design amazon product page amazon product page css architecture optimizes conversion on dense information layout — gallery, buy box, reviews,

design youtube layout youtube layout css architecture balances persistent sidebar navigation, fluid video grid, watch page theater mode, and mini-player

design saas dashboard saas dashboard css architecture delivers dense data ui — sidebar, top bar, kpi cards, charts, tables —

design admin portal admin portal css architecture prioritizes data density, role-based layouts, bulk action toolbars, filter panels, and audit-log tables

design banking dashboard banking dashboard css architecture combines trust-forward visual design, strict security css (no user themes), accessible transaction tables,

design analytics platform analytics platform css architecture handles filter-heavy exploration ui, time-range controls, metric cards, chart grids, pivot tables, and

netflix frontend architecture netflix ships ui to tvs, mobile, and web with radically different rendering constraints. their css architecture emphasizes

amazon ui architecture amazon product pages are among the highest-traffic css surfaces on the web: dense information hierarchy, buy-box urgency,

airbnb design system airbnb's design system (dls) codifies css across web and native-aligned tokens — spacing, typography, color semantics, and

spotify web ui spotify web player combines persistent chrome (sidebar, now-playing bar), scrollable content areas, and gpu-accelerated album art transitions.

linkedin frontend platform linkedin's frontend platform serves feed, jobs, messaging, and ads in one persistent shell. css architecture spans micro-frontends,

beginner: css fundamentals css fundamentals — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops

beginner: box model box model — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops

beginner: selectors selectors — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops reward trade-offs,

beginner: colors & typography colors & typography — 25 interview questions with traps, follow-ups, and production context. practice out loud;

beginner: layout basics layout basics — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops

beginner: flexbox flexbox — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops reward trade-offs,

beginner: grid grid — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops reward trade-offs,

beginner: responsive css responsive css — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops

intermediate: cascade & specificity cascade & specificity — 25 interview questions with traps, follow-ups, and production context. practice out loud;

intermediate: positioning positioning — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops reward trade-offs,

intermediate: flexbox patterns flexbox patterns — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops

intermediate: grid patterns grid patterns — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops

intermediate: animation animation — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops reward trade-offs,

intermediate: variables & theming variables & theming — 25 interview questions with traps, follow-ups, and production context. practice out loud;

intermediate: css architecture css architecture — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops

intermediate: performance performance — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops reward trade-offs,

advanced: rendering pipeline rendering pipeline — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops

advanced: containment containment — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops reward trade-offs,

advanced: container queries container queries — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops

advanced: subgrid subgrid — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops reward trade-offs,

advanced: css houdini css houdini — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops

advanced: accessibility accessibility — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops reward trade-offs,

advanced: debugging debugging — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops reward trade-offs,

advanced: scale & migration scale & migration — 25 interview questions with traps, follow-ups, and production context. practice out loud;

architect: design systems design systems — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops

architect: multi-tenant css multi-tenant css — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops

architect: migration strategy migration strategy — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops

architect: trade-offs trade-offs — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops reward trade-offs,

capstone: netflix landing page capstone: netflix landing page synthesizes hero billboard layout, dark-first tokens, responsive typography, email capture form styling,

capstone: amazon product page capstone: amazon product page requires a 12-column responsive grid, image gallery, sticky buy box, variant swatches,

capstone: enterprise admin dashboard capstone: enterprise admin dashboard combines sidebar navigation, collapsible layout, data-dense tables, filter panels, modal dialogs, and

capstone: multi tenant saas platform capstone: multi-tenant saas platform implements white-label theming where each tenant overrides brand tokens (--brand-primary, --brand-logo-url)

capstone: design system library capstone: design system library delivers a publishable css + component package: tokens, reset, button, input, card,

capstone: dark/light theme platform capstone: dark/light theme platform builds system-aware theming with prefers-color-scheme, manual override, persistence, no flash of wrong