A complete CSS learning path covering selectors, the cascade, layout, Flexbox, Grid, responsive design, custom properties, animation, accessibility, debugging and production-ready UI projects.
Bigyan GhimireThis course progresses from CSS fundamentals to modern layout systems and maintainable interface design. Each lesson includes a concept explanation, a practical stylesheet example, expected visual behaviour and a focused exercise.
You will build reusable components, responsive layouts and a complete landing page while learning how to debug CSS, respect accessibility preferences and keep styles organized as a project grows.
Connect a stylesheet and understand how browser styling works.
Connect a stylesheet and understand how browser styling works.
Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.
Learn the role of CSS and how style rules are applied.
A CSS rule contains a selector and declaration block. Each declaration combines a property and value. Browsers combine author styles with user-agent styles and other applicable rules.
p { color: #1f2937; font-size: 1rem; }Style a paragraph and inspect the computed styles.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Compare stylesheet placement and use an external file for maintainability.
External stylesheets can be reused and cached. Keep presentation separate from content where practical and link the stylesheet from head.
<link rel="stylesheet" href="css/styles.css">Move three inline styles into styles.css.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Learn declarations, units, colors, functions and comments.
CSS values include keywords, lengths, percentages, colors and functions such as calc() and clamp(). Invalid declarations are generally ignored.
/* Main page text */\nbody { color: #222; margin: 0; }Try px, rem, %, rgb() and hex values.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Inspect computed values and identify overridden declarations.
Use the Styles and Computed panels to see which declarations apply, which are overridden and which fail to parse. Test one change at a time.
.card { padding: 1rem; }\n.card { padding: 1.5rem; }Explain why the second padding declaration wins.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Target elements predictably without fragile selector chains.
Target elements predictably without fragile selector chains.
Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.
Select elements using type, class, ID and comma-separated groups.
Classes are reusable and usually preferable for styling. IDs should be unique within a document. Group selectors apply the same declarations to multiple targets.
h1, h2 { font-family: system-ui, sans-serif; }\n.card { border-radius: 12px; }Style headings and reusable cards.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Use descendant, child, sibling and attribute selectors appropriately.
Combinators express relationships in the DOM. Attribute selectors can target elements based on attribute presence or value.
nav a { text-decoration: none; }\nform input[type="email"] { width: 100%; }Style nested navigation and email inputs.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Use hover, focus, checked, first-child, before and after.
Pseudo-classes select elements in a state or position. Pseudo-elements style generated or specific parts of elements. Keep essential content in the document rather than relying on generated content.
a:hover { text-decoration: underline; }\nbutton:focus-visible { outline: 3px solid #2563eb; }\n.badge::before { content: "• "; }Add clear hover and keyboard-focus states.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Resolve conflicts with source order, specificity, importance and layers.
The cascade considers origin, importance, layers, specificity and order. Prefer simple class-based rules over escalating specificity or repeated !important declarations.
@layer reset, components, utilities;\n@layer components { .button { padding: .75rem 1rem; } }Refactor conflicting rules into clear layers.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Create readable, consistent interfaces with deliberate visual hierarchy.
Create readable, consistent interfaces with deliberate visual hierarchy.
Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.
Use named colors, hex, RGB, HSL and custom properties.
Contrast affects readability. Do not communicate meaning through color alone; combine color with text, icons or patterns where appropriate.
:root { --color-primary: #1d4ed8; --color-text: #172033; }\nbody { color: var(--color-text); }Choose text and background colors and check contrast.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Build readable type scales with system and web fonts.
Use a sensible font stack and line height. rem-based sizing helps scale typography consistently; load external fonts thoughtfully to avoid performance penalties.
body { font-family: system-ui, sans-serif; line-height: 1.6; }\nh1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; }Create a heading, body and small-text type scale.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Establish consistent spacing and component surfaces.
A spacing scale makes a site feel coherent. Shadows and borders should communicate hierarchy rather than decorate every element equally.
:root { --space-1: .5rem; --space-2: 1rem; --radius-card: .75rem; }\n.card { padding: var(--space-2); border: 1px solid #dbe2ea; border-radius: var(--radius-card); }Style a card using a small design-token system.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Define reusable values and override them by theme or component.
Custom properties participate in the cascade and can be updated at runtime. Name tokens by purpose rather than by a temporary visual value.
:root { --surface: #fff; --text: #172033; --accent: #1d4ed8; }\n.card { background: var(--surface); color: var(--text); }Create a small set of theme tokens.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Control element dimensions, spacing and content flow.
Control element dimensions, spacing and content flow.
Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.
Understand the box model and box-sizing.
With content-box, width applies to content; with border-box, it includes padding and border. A global border-box rule makes sizing more predictable.
*, *::before, *::after { box-sizing: border-box; }\n.card { width: 20rem; padding: 1rem; border: 1px solid; }Compare box sizing and measure the resulting box.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Use min-width, max-width, min-content, max-content and fit-content.
Intrinsic sizing lets content influence layout. max-width is useful for readable content containers, while min-width: 0 can allow flex and grid children to shrink.
.container { width: min(100% - 2rem, 72rem); margin-inline: auto; }Create a centered responsive content container.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Understand vertical margin collapse and choose layout spacing tools.
Adjacent block margins may collapse in specific conditions. Gap in Flexbox and Grid is often more predictable for spacing siblings.
.stack { display: flex; flex-direction: column; gap: 1rem; }Replace inconsistent sibling margins with gap.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Choose display, overflow, visibility and opacity carefully.
display controls layout participation; visibility hides an element while retaining its layout space; opacity changes transparency but does not remove keyboard focus. Overflow should be intentional.
.scroll-panel { max-height: 16rem; overflow: auto; }\n.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }Test scrolling content and hidden text behaviour.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Place elements with normal flow, positioning and stacking contexts.
Place elements with normal flow, positioning and stacking contexts.
Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.
Understand static, relative, absolute, fixed and sticky positioning.
Absolute elements are positioned relative to a containing block. Sticky positioning depends on scroll containers and inset values. Avoid removing content from normal flow without a clear reason.
.card { position: relative; }\n.card__badge { position: absolute; top: .75rem; right: .75rem; }Place a badge inside a card.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Understand why z-index sometimes appears not to work.
Stacking contexts can be created by positioned elements with z-index and by several other properties. A large z-index cannot escape its parent stacking context.
.site-header { position: sticky; top: 0; z-index: 10; }Debug overlapping header and modal elements.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Create sticky navigation and fixed utility controls responsibly.
Fixed controls can cover content, particularly on mobile. Account for safe areas and ensure the page remains usable at zoomed text sizes.
.site-header { position: sticky; top: 0; background: white; }\n.back-to-top { position: fixed; right: 1rem; bottom: 1rem; }Test a sticky header and a fixed button on a narrow screen.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Recognize legacy float layouts and use modern layout tools for new work.
Float remains useful for wrapping text around images, but Flexbox and Grid are generally better for application layout.
.article-image { float: left; width: 12rem; margin: 0 1rem 1rem 0; }Wrap article text around an image and compare with Grid.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Arrange items along one dimension and manage flexible space.
Arrange items along one dimension and manage flexible space.
Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.
Use display:flex, flex-direction, justify-content and align-items.
Flexbox is designed for one-dimensional layout. The main axis follows flex-direction, while the cross axis is perpendicular to it.
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }Build a responsive toolbar.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Understand how flex items divide available space.
The flex shorthand combines growth, shrinkage and basis. A sensible basis helps define starting sizes before free space is distributed.
.layout { display: flex; gap: 1rem; }\n.sidebar { flex: 0 0 16rem; }\n.content { flex: 1 1 auto; min-width: 0; }Build a sidebar and content layout.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Use flex-wrap, align-content, order and gap carefully.
Wrapping creates additional flex lines when space is insufficient. Avoid changing visual order in a way that conflicts with the DOM reading order.
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }Create a wrapping tag list.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Build navigation that adapts across available widths.
Prefer natural wrapping or a deliberate mobile navigation pattern. If using a JavaScript toggle, ensure its state and accessible label are exposed.
.nav-links { display: flex; flex-wrap: wrap; gap: 1rem; }\n@media (max-width: 40rem) { .nav-links { gap: .5rem; } }Build a navigation row that remains usable on mobile.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Create two-dimensional layouts for galleries, dashboards and page structures.
Create two-dimensional layouts for galleries, dashboards and page structures.
Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.
Use grid-template-columns, rows, gap and fr units.
Grid defines rows and columns simultaneously. Fractional units distribute available space after fixed and intrinsic sizing considerations.
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }Create a three-column gallery.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Build fluid grids that adapt without many breakpoints.
minmax() sets track bounds, and auto-fit or auto-fill can repeat tracks based on available space. Test content that has long words or wide images.
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }Create a responsive card grid.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Name page regions and position items across tracks.
Named grid areas make complex layouts easier to understand. Keep the visual placement aligned with a logical reading order.
.page { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 16rem 1fr; }Build a dashboard shell using grid-template-areas.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Choose layout systems based on one-dimensional or two-dimensional needs.
Flexbox is often ideal for a row of controls or navigation. Grid is strong for aligned rows and columns. They can be nested together rather than treated as competitors.
.dashboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }\n.widget { grid-column: span 4; }Rebuild a card dashboard and justify the layout choice.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Support different viewports, user preferences and content sizes.
Support different viewports, user preferences and content sizes.
Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.
Write base styles for small screens and add enhancements at content-driven breakpoints.
Breakpoints should be chosen where the content needs them, not solely to match particular device names. Test zoom and intermediate widths.
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }\n@media (min-width: 48rem) { .card-grid { grid-template-columns: repeat(2, 1fr); } }Test at narrow, medium and wide widths.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Use clamp, min, max and viewport units for fluid sizing.
clamp() sets a minimum, preferred value and maximum. Ensure text remains readable at high zoom and does not grow excessively on large screens.
h1 { font-size: clamp(2rem, 1.2rem + 3vw, 4rem); }Create a fluid heading and explain each bound.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Adapt components to their container rather than only the viewport.
Container queries let a component change when its containing area changes. Set an appropriate containment context and retain sensible fallback styles.
.card-shell { container-type: inline-size; }\n@container (min-width: 32rem) { .profile-card { display: grid; grid-template-columns: 8rem 1fr; } }Make a profile card adapt inside different page columns.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Use media features for motion, contrast and theme preferences.
Respect prefers-reduced-motion and test dark-mode or contrast preferences where your design supports them. CSS should enhance accessibility rather than override user needs.
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }Add reduced-motion support to a sample page.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Add feedback and motion without making interfaces harder to use.
Add feedback and motion without making interfaces harder to use.
Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.
Animate changes to selected properties with transition.
Transition only properties that need feedback. Avoid animating layout-heavy properties when transforms or opacity can achieve the same effect more smoothly.
.button { transition: background-color .2s ease, transform .2s ease; }\n.button:hover { transform: translateY(-2px); }Add hover and focus feedback to buttons.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Use translate, scale, rotate and transform-origin.
Transforms change visual rendering without changing normal-flow space. Ensure transformed content does not overlap nearby content or become hard to interact with.
.icon { transform: rotate(10deg); transform-origin: center; }Create a small interactive card hover effect.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Define keyframe sequences and control duration, iteration and fill mode.
Use animation for meaningful, restrained effects. Avoid infinite movement that distracts users, and respect reduced-motion preferences.
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }\n.panel { animation: fade-in .35s ease-out both; }Animate a content panel on entry.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Review animation duration, motion sensitivity and compositing.
Large animated shadows and layout changes can be expensive. Keep motion purposeful, brief and optional when it may cause discomfort.
@media (prefers-reduced-motion: reduce) { .panel { animation: none; transition: none; } }Audit a page and remove unnecessary motion.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Organize CSS for long-term projects and troubleshoot real layouts.
Organize CSS for long-term projects and troubleshoot real layouts.
Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.
Use clear class names that describe components and their parts.
BEM is one naming convention, not a browser requirement. Consistent naming makes styles easier to locate and reduces accidental coupling.
.course-card {}\n.course-card__title {}\n.course-card--featured {}Refactor a set of inconsistent classes.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Split base, layout, component and utility styles logically.
Keep the architecture appropriate to project size. Avoid excessive file fragmentation for a small site, but separate repeated component patterns as they grow.
styles/\n base.css\n layout.css\n components.css\n utilities.cssOrganize a growing stylesheet and document imports.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Find layout bugs using computed styles and feature support checks.
Check whether a declaration is overridden, invalid or unsupported. Use progressive enhancement and test the browsers your audience uses.
@supports (display: grid) { .layout { display: grid; } }Debug three intentionally conflicting rules.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Check contrast, focus visibility, overflow, motion and responsive behaviour.
Quality includes usability, maintainability and performance. Validate at zoom, keyboard navigation and narrow widths before publishing.
:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }\nimg { max-width: 100%; height: auto; }Complete a checklist and record improvements.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Apply CSS skills to real interface patterns and a complete final project.
Apply CSS skills to real interface patterns and a complete final project.
Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.
Build a reusable profile card with image, text, links and small-screen layout.
Start with semantic HTML and a clear visual hierarchy. Use Grid or Flexbox for layout and custom properties for consistent spacing and colors.
.profile { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: center; }\n.profile img { width: 6rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }Finish a profile card that works at 320px and desktop widths.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Design readable pricing cards with accessible action states.
Clearly distinguish plan features and pricing. Do not rely on color alone to identify a recommended plan; include a text label when needed.
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; }Build three pricing cards and test long feature lists.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Create a sidebar, top navigation, stat cards and content grid.
Use Grid for the main shell and component-level Flexbox for card controls. Test overflow, long labels and keyboard focus.
.dashboard { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1rem; }\n@media (max-width: 48rem) { .dashboard { grid-template-columns: 1fr; } }Build a dashboard layout with responsive widgets.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.
Combine typography, tokens, grid, interactions and accessibility into one polished page.
Deliver a consistent design system, responsive hero, feature cards, testimonials, FAQ and footer. Test real content and avoid placeholder links before publishing.
:root { --brand: #1d4ed8; --text: #172033; --space: 1rem; }\n.container { width: min(100% - 2rem, 72rem); margin-inline: auto; }\n.hero { display: grid; gap: 2rem; align-items: center; }\n@media (min-width: 48rem) { .hero { grid-template-columns: 1.1fr .9fr; } }Publish the landing page and include screenshots plus a self-review.
Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.
Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.