Course: CSS

Understand what CSS is, how it fits into the frontend stack and how to use the examples and challenges in this course.

Set up a practical CSS workflow with an editor, browser DevTools and quick experimentation in CodePen.

Learn how CSS rules are written, how comments work and how a stylesheet is linked to HTML.

Learn why reset or normalize belongs at the beginning of a project and how a modern baseline makes the rest of your CSS more predictable.

Understand how the browser decides which rule wins when several styles target the same element.

Learn how specificity scores are calculated, when one rule wins over another and why you should avoid !important.

Learn how to target HTML elements with tag, class and id selectors, and how to group selectors when the same rule should apply to several elements.

Understand how the actual size of an element is calculated and how to control its spacing.

Master absolute and relative units to create flexible and readable designs.

Master intrinsic sizing in CSS so components adapt to content without breaking layouts.

Customize lists without losing semantics: clear bullets, continuous numbering and modern layouts.

Style tables so they stay readable with zebra rows, sensible alignment and responsive patterns that do not sacrifice clarity.

Learn how to control document flow with `display` and place elements with `position` without breaking the layout, so common CSS behaviors stop feeling mysterious and start feeling predictable.

Learn to define colors precisely and ensure good contrast.

Use CSS custom properties as a living design system with reusable tokens, cleaner theming and runtime styling without duplicated rules.

Build more coherent, accessible and predictable color palettes with a color space that maps more closely to human perception.

Create linear, radial and conic gradients with real visual intent, then prototype faster with a small gradient generator workflow.

Master modern `background` usage with shorthand syntax, multiple layers and practical UI patterns that avoid relying on heavy image assets.

Use `mask-image`, gradients and SVG to create visual cutouts, fades and focus effects without modifying the original asset.

Create useful color combinations for UI work and export reusable gradient tokens for buttons, cards, heroes and visual systems.

Build a stronger type system for real interfaces with system fonts, fluid scales, visual hierarchy and small readability improvements that make a big difference.

Improve performance and typographic precision by using one font file for many weights, widths and styles.

Avoid awkward title wraps and lonely last words by using `text-wrap` to improve readability and visual balance.

Use shadows to create depth, hierarchy and readability without pushing the UI into muddy, overdesigned territory.

Build a visual utility for interface shadows with precise control over offset, blur, spread, opacity and layered depth.

Control SVG icons and illustrations with modern CSS using `fill`, `stroke`, variables and lightweight motion.

Master `border-image`: the 9-slice model, `slice`/`width`/`repeat` control, fallbacks and reusable patterns for real components.

Use CSS filters in real interfaces with complete `filter()` functions, readable glass panels and practical performance guidelines.

Use `::before` and `::after` to build decorations, overlays and UI details without adding extra HTML.

Create simple illustrations with CSS using borders, pseudo-elements, gradients and transforms.

Master modern centering techniques with Flexbox, Grid, `margin: auto` and the `place-*` properties, without relying on legacy hacks.

Master Flexbox through axes, alignment, distribution, wrapping and item-level control with real examples and an interactive lab.

Build fluid patterns with flexible rows and columns for decorative blocks, visual lists and card systems.

Master CSS Grid through lines, areas, auto-placement, subgrid and real layout patterns for modern interfaces.

Build a utility for repeatable visual patterns with Grid by controlling columns, cell size, gap and density.

Learn how to inherit parent grid rows or columns so independent child components align to the same structural guides.

Master the most important positioning pair in CSS: use `relative` to create a local reference and `absolute` to leave the flow without losing control.

Learn when an element should anchor to the viewport with `fixed` and when it should follow its container scroll with `sticky`.

Understand modern CSS positioning as a predictable system for layering, interaction and structure, not as an old patching tool.

Learn how to use `anchor-name`, `position-anchor` and `anchor()` to place tooltips, popovers and contextual UI around another element with much less manual glue.

Apply styles based on screen size, orientation or user preferences with `@media`. Learn mobile-first thinking and the viewport meta tag.

Build adaptable interfaces with fluid layout, `clamp()`, modern media queries, container queries and accessibility-aware preference handling.

Learn how to adapt a component to the size of its own container with `@container`, `container-type` and container query units such as `cqi` and `cqw`.

Implement robust dark mode with CSS tokens, system preference support and manual override without breaking accessibility.

Master professional responsive navigation patterns with hamburger menus and off-canvas panels using Tailwind, Bootstrap, Flexbox and Grid.

Learn `translate`, `rotate`, `scale`, `skew`, perspective and `preserve-3d` to create fluid interactions and more advanced visual compositions.

Combine transitions and `@keyframes` to bring UI to life with smooth hover states, loaders, pulses and more controlled motion patterns.

Learn how to register CSS variables with `@property` so the browser understands their real type and can animate them reliably in gradients, progress bars, angles and dynamic themes.

Learn how to transition intrinsic sizes such as `height: auto` with native CSS, when to use `interpolate-size`, what problem it solves and how to leave a reasonable fallback.

Learn how to design smoother scroll experiences with CSS through section snapping, sticky interface elements and an applied introduction to scroll-linked animation patterns.

Learn how to connect CSS animations directly to scrolling with `scroll()` and `view()`, so you can build reading progress bars, reveal effects and parallax scenes with better performance and much less code.

Learn how the View Transitions API lets the browser animate between one interface state and the next, so you can create page changes and UI swaps that feel polished without building the whole effect manually.

Master modern functional selectors to reduce duplication, control specificity and build visual logic without JavaScript.

Learn how to reduce repetition, control specificity and build maintainable selectors with `:is()`, `:where()` and `:not()` in real interface patterns.

Master `:has()` so you can style parents and relationships between elements, with practical patterns for forms, cards and interface states.

Learn how checkbox and radio states can drive simple UI interactions in pure CSS, while understanding the accessibility and maintainability limits that tell you when JavaScript is the better tool.

Write more hierarchical and maintainable style sheets with native CSS nesting, reducing selector repetition without relying on a preprocessor.

Learn how to detect support for new CSS features so advanced styling is applied only where it works, while the site stays resilient everywhere else.

Learn how to write resilient CSS with real fallbacks, `@supports`, vendor-prefix tooling and a progressive-enhancement mindset, so modern features improve the experience without breaking older environments.

Learn how to build fluid layouts and typography without hacks by using CSS native math functions.

Introduce native conditional logic into your style sheets. Learn how to switch properties based on variable values without writing a line of JavaScript.

Structure CSS with `@layer` so priority is explicit, conflicts are reduced and styles scale without leaning on `!important`.

Learn how to structure CSS for real projects with naming conventions, cascade layers, component boundaries and review habits that reduce technical debt instead of feeding it.

Learn how to reduce rendering work with `will-change`, `content-visibility`, containment and intrinsic placeholders, so complex interfaces stay responsive even on slower devices.

Learn how PostCSS fits into a professional styling workflow, and configure practical plugins such as Autoprefixer and `postcss-preset-env` so modern CSS can ship with realistic browser support.

Use Sass as a practical layer on top of CSS to organize design tokens, control nesting and reuse recurring patterns with mixins, while still compiling to clean output the team can review.

Learn how to use Tailwind in real product work: utility-first styling, responsive and state variants, and the team habits that stop utility classes from turning into hard-to-maintain markup.

Learn how Bootstrap 5 helps you build interfaces quickly with a predictable grid, responsive utility classes and production-ready components, while still requiring enough CSS understanding to use it with good judgment.

Learn how to design robust headers with branding, adaptive navigation, sticky behavior and visible keyboard focus so the top area of the interface stays useful instead of becoming visual clutter.

Compare ten realistic ways to solve responsive navigation, from the checkbox hack and `details` to `popover`, `dialog`, `aria-expanded` and WAAPI, so you can choose the right mechanism instead of copying one pattern everywhere.

Learn how to build a professional card component with Tailwind CSS, Bootstrap, pure Flexbox and CSS Grid, so you can compare framework-driven speed against native CSS control while keeping the same structural goal.

Learn how to choose between brutalist, editorial, glass, ticket, polaroid and minimal card styles according to brand tone, visual hierarchy and the kind of content the interface needs to communicate.

Study four realistic ways to build sliders and media galleries: horizontal movement with `transform`, scene changes with fade, native touch behavior with scroll snap and more expressive reveal transitions with `clip-path`.

Build a modern gallery with CSS Grid, stable cropping and accessible micro-interactions, so image collections stay clean across different screen widths and mixed source formats.

Learn how to build clear, maintainable sidebars with a two-column layout, active states and sticky behavior so long-form content and documentation stay navigable without overwhelming the page.

Learn how to design scalable footers with clean semantics, responsive Grid and a modern sticky-footer pattern, so the bottom area of the page stays useful instead of feeling like an afterthought.

Use this lesson as a practical map of reliable CSS resources so you know where to look for reference, compatibility, experimentation and inspiration without wasting time on noisy search results.