CSS Fundamentals

Flexbox, Grid, responsive UI 12h

Turn plain HTML into modern, responsive interfaces using the box model, Flexbox, and CSS Grid, all organized around a small design system you can reuse across projects. Instead of copying random snippets, you will learn how to reason about spacing, layout, and typography so you can design clean, consistent pages on your own.

▶ Start this training

Self-paced. Work through each module at your own speed.

Who this is for

Students who already know basic HTML and want their pages to actually look good on desktop, tablet, and mobile. This is for people who want to understand why layouts work the way they do, not just which class names to paste from a CSS framework.

Prerequisites

Completion of HTML Foundations (or equivalent experience). You should be comfortable creating a multi-page HTML site with semantic tags and basic forms, and you should know how to open your project in a browser and devtools.

By the end you will be able to:

4 outcomes

Use the box model, margins, padding, borders, and display types to position and space elements on a page without guessing or relying on trial and error.
Apply Flexbox for common one-dimensional layouts like nav bars, card grids, sidebars, and centered sections that adapt to different content lengths.
Use CSS Grid to build more complex two-dimensional page layouts such as dashboards, gallery pages, or marketing layouts with distinct rows and columns.
Build responsive designs that adapt across mobile, tablet, and desktop using a mobile-first mindset and a small, reusable set of breakpoints.

Training highlights

4 key themes

Box model, cascade, and custom properties (CSS variables) used to define a reusable spacing, color, and typography system for your site.
Practical Flexbox patterns for navbars, feature grids, and content blocks that remain readable when content grows or shrinks.
CSS Grid layouts for full-page structures and card-heavy sections such as dashboards and portfolio galleries.
Responsive design with breakpoints that feel natural, not arbitrary, so your site looks intentional at common device sizes.

Syllabus

3 sections

Week 1

CSS syntax, selectors, the cascade, and the box model. You will build a simple design system using CSS variables for colors and typography, and create a basic layout that uses margins, padding, and borders to clearly separate sections.

Week 2

Flexbox in depth (axes, alignment, wrapping) and an introduction to CSS Grid. You will build a responsive nav bar, a card grid, and a two-column layout, then add responsive breakpoints so everything looks clean on phones and desktops.

Capstone Project

Design and build a responsive marketing landing page that includes a hero section, feature grid, testimonial area, and call-to-action. The layout should use Flexbox and Grid, adapt at multiple breakpoints, and feel polished enough to show in a portfolio.

Training plan

5 modules

Follow these modules step by step. Each one included concrete tasks so you actually learn and ship something real. You could have treated each module as one focused work session or spread the steps across several days.

Module 1: Connect CSS and Understand the Box Model

Create styles.css in your project folder and link it from your HTML with <link rel="stylesheet" href="styles.css"> in the <head>. Confirm that a simple body background-color change appears in the browser.
Apply global font and color rules to body, h1–h3, and p elements, then create a small section that uses different font sizes to visually separate headings and body text.
Build a simple card component using a <div> with padding, margin, and border. Duplicate the card several times to see how spacing changes affect the overall layout.
Use your browser’s devtools to inspect the card and turn on the box model view so you can see margin, border, padding, and content areas for several elements.

Module 2: Layout with Flexbox

Wrap your site’s main navigation links in a container and set display: flex on it. Use justify-content and gap to control spacing between items, and align-items to vertically center them.
Create a 3-card layout using display: flex on the parent, and use flex-basis or flex: 1 to control how wide each card becomes. Experiment with different max-width values so the layout does not stretch too far.
Practice centering content both vertically and horizontally in a full-screen hero section using flexbox properties. Confirm the hero remains centered at multiple window sizes.
Add flex-wrap to a container with several cards and verify that on smaller screens the cards wrap into multiple rows instead of shrinking to unreadable sizes.

Module 3: Page Structure with CSS Grid

Create a layout container using display: grid and grid-template-columns to define two columns (for example, 2fr 1fr). Place main content and a sidebar into these areas.
Add a header and footer and convert the layout into a more complete grid that uses grid-template-areas. Name areas such as 'header', 'main', 'sidebar', and 'footer', and assign elements to each.
Experiment with fr units and minmax() to create flexible columns that grow and shrink without collapsing. Test at narrow and wide window sizes to see how columns behave.
Take an existing multi-section page from your HTML training and re-implement its layout using Grid, keeping the visual hierarchy similar but cleaning up the CSS.

Module 4: Responsive Design

Choose one or two key breakpoints (for example, 640px and 1024px) and add @media queries to your CSS. Start with a mobile-first layout and layer in changes for wider screens.
Adjust font sizes, section padding, and line lengths at different screen widths so text remains readable and does not stretch across the entire screen on large monitors.
Update your Flexbox and Grid layouts so they switch from single-column to multi-column at your chosen breakpoints, and verify that important content remains near the top.
Use browser device emulators to test your page on several predefined devices, and write down at least three changes you make based on what you see during testing.

Practice & Assessment

Design a one-page product or course landing page using your own color palette and typography choices defined as CSS variables. Sketch the layout on paper before coding.
Implement a mobile-first layout that starts as a single column, then expands into two or three columns at wider breakpoints. Confirm that no content overlaps or becomes unreadable.
Validate the layout by testing it on at least three screen sizes (small phone, tablet, desktop). Take screenshots and compare the visual hierarchy across sizes.
Refine spacing, font sizes, and alignment until the page feels like a polished marketing page you would feel comfortable sharing with others.