Free online courseCSS Grid and Flexbox to responsive websites
Duration of the online course: 5 hours and 44 minutes
New
Build responsive web layouts with CSS Grid & Flexbox in this free course—master units, breakpoints, navbars and modern page structure, plus certificate-ready skills.
In this free course, learn about
Responsive design mindset: mobile-first thinking, breakpoints, and fluid layouts
CSS units mastery: %, px, em vs rem, and choosing units for responsive typography
Fluid images: max-width rules, object-fit, and capping image height without distortion
Container sizing patterns: min/max-width to stay fluid yet not too wide on large screens
Flexbox fundamentals: axes, justify/align, wrap, order, and flex grow/shrink/basis
Building responsive Flexbox navigation: centering, logo/links split, underline states
Media queries: writing correct range queries and refactoring layouts at breakpoints
Responsive layout patterns: column-to-row switches, main+sidebar, and visual reordering
Preventing layout issues: runaway nested em sizes, and stopping sidebars from shrinking
CSS Grid essentials: fr units, repeat(), implicit rows, named lines, and template areas
Auto-fit vs auto-fill and responsive grids, including consistent implicit row heights
Item alignment in Grid/Flex: centering single items and using justify/align content/items
Course Description
Create layouts that feel effortless on every screen size. This free online course is built for anyone who wants to design responsive websites with confidence using CSS Grid and Flexbox—the two core layout systems behind modern front-end development. Instead of relying on rigid templates or heavy frameworks, you’ll learn how to think responsively from the start, making decisions that scale from mobile to desktop without constant rewrites.
You’ll develop a practical understanding of responsive units and sizing, so typography, spacing, and components behave predictably across devices. Along the way, you’ll tackle common problems that quietly break real layouts—images that overflow, containers that stretch too wide, nested elements that cause runaway font sizes, or sidebars that shrink when they shouldn’t. The goal is to help you choose the right tool and the right unit at the right time, turning responsive design into a repeatable workflow rather than guesswork.
With Flexbox, you’ll learn to build navigation and page sections that align cleanly, distribute space intelligently, and reflow smoothly when breakpoints kick in. You’ll also understand what changes when directions switch, how alignment works across axes, and how ordering can improve mobile experiences without changing your HTML. Then, with CSS Grid, you’ll move into structured page layouts—main/aside patterns, article listings, and image grids—using powerful features like template areas, implicit rows, and auto-fit/auto-fill behavior for layouts that adapt naturally to available space.
Exercises reinforce each concept so you can apply it immediately in real interface patterns, not just isolated snippets. By the end, you’ll be able to design and refine responsive pages with clean, maintainable CSS, communicate layout decisions like a web professional, and build portfolio-ready structures that translate directly to real-world web development work.
Course content
Video class: 1. Starting to think responsively - Responsive CSS Tutorial03m
Exercise: When starting with flexbox in a responsive workflow, what approach is recommended?
Video class: 2 CSS Units - Responsive CSS Tutorial03m
Video class: 3 CSS Units. Percentage - Responsive CSS Tutorial05m
Exercise: Percentage widths in responsive Flexbox/Grid layouts
Video class: 4. Controlling the width of images - Responsive CSS Tutorial04m
Video class: 5. min width and max width - Responsive CSS Tutorial02m
Exercise: In a Flex or Grid layout, which CSS setup keeps a container fluid on small screens but prevents it from becoming too wide on large screens?
Video class: 6. CSS Units. The em unit - Responsive CSS Tutorial05m
Video class: 7. The problem with ems - Responsive CSS Tutorial02m
Exercise: Preventing runaway font-size in nested flex or grid items
Video class: 8. The Solution Rems - Responsive CSS Tutorial04m
Video class: 9. Picking which unit to use - Responsive CSS Tutorial03m
Exercise: Best unit for font size in a responsive Flexbox or Grid layout
Video class: 10. ems and rems an example - Responsive CSS Tutorial07m
Video class: 11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial07m
Exercise: Why wrap content in column divs inside a flex container
Video class: 12. Basic Styles and setting up the columns - Responsive CSS Tutorial07m
Video class: 13. Adding the background color - Responsive CSS Tutorial04m
Exercise: In a CSS Grid layout how should you apply a dark background and spacing to only two columns while keeping the CSS maintainable and responsive
Video class: 14. Setting the columns widths - Responsive CSS Tutorial03m
Video class: 15. Spacing out the columns - Responsive CSS Tutorial04m
Exercise: Which justify-content value distributes leftover space only between flex items, keeping the first and last items flush with the container edges?
Video class: 16. Controlling the vertical position of flex items - Responsive CSS Tutorial05m
Video class: 17. Media Query basics - Responsive CSS Tutorial10m
Exercise: Which media query correctly targets screens between 400px and 649px to adjust a responsive Flexbox or Grid layout?
Video class: 18. Making layout responsive with flex direction - Responsive CSS Tutorial06m
Video class: 19. flex direction explained - Responsive CSS Tutorial03m
Exercise: When flex-direction is set to column, how do justify-content and align-items behave?
Video class: 20. Creating a navigation - Responsive CSS Tutorial04m
Video class: 21. Using flexbox to start styling our navigation - Responsive CSS Tutorial07m
Exercise: In a flex-based navigation menu, which CSS declaration centers the list items horizontally within the ul?
Video class: 22. Making our navigation look good - Responsive CSS Tutorial07m
Video class: 23. Adding the underline - Responsive CSS Tutorial04m
Exercise: Which layout method is best to place the logo on the left and the nav links on the right in a responsive header while keeping the current page underlined and tappable?
Video class: 24. A more complicated navigation - Responsive CSS Tutorial06m
Video class: 25. Making the navigation responsive - Responsive CSS Tutorial06m
Exercise: How should you refactor a Flexbox navigation at 675px and below to create a centered vertical layout?
Video class: 26. Taking a look at the rest of the project - Responsive CSS Tutorial04m
Video class: 27. Setting up the structure - Responsive CSS Tutorial08m
Exercise: How would you build a responsive main and sidebar layout using CSS Grid in a mobile first approach?
Video class: 28. Feature article structure - Responsive CSS Tutorial05m
Video class: 29. The home page. HTML for the recent articles - Responsive CSS Tutorial02m
Exercise: Choose the best responsive layout for a two-column recent articles section
Video class: 30. Home Page. HTML for the aside - Responsive CSS Tutorial06m
Video class: 31. Starting the CSS for our page - Responsive CSS Tutorial15m
Exercise: Why set global typography before building layouts with CSS Grid or Flexbox?
Video class: 32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial08m
Video class: 33. Starting to think mobile first - Responsive CSS Tutorial02m
Exercise: How do you implement a mobile-first Flexbox layout that becomes two columns on larger screens?
Video class: 34. Styling the featured article - Responsive CSS Tutorial06m
Video class: 35. Changing the visual order with flexbox - Responsive CSS Tutorial05m
Exercise: How do you stack items on small screens and control their visual order with Flexbox?
Video class: 36. Playing with the title's position and negative margins - Responsive CSS Tutorial04m
Video class: 37. Changing image size with object-fit - Responsive CSS Tutorial03m
Video class: 38. Styling recent articles for large screens - Responsive CSS Tutorial07m
Video class: 39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial06m
Exercise: Preventing a flex sidebar from shrinking in a responsive layout
Video class: 40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial07m
Video class: 41. Creating the recent posts page - Responsive CSS Tutorial03m
Exercise: Why could the Recent Posts page be built without adding new CSS when using Grid or Flex layouts?
Video class: 42. Setting up the About Me page - Responsive CSS Tutorial04m
Video class: 43. Fixing up some loose ends - Responsive CSS Tutorial04m
Exercise: In a grid or flex layout, how do you keep a full-width image capped at 300px tall without distortion?
Video class: 44. Module Wrap up - Responsive CSS Tutorial03m
Video class: CSS Grid Course: Why Learn It And How It Compares To Bootstrap04m
Exercise: Why is CSS Grid advantageous for responsive layout changes compared to HTML based frameworks?
Video class: CSS Grid Course: Learn the Basics in 3 Minutes03m
Video class: CSS Grid Course: Fraction Units And Repeat03m
Video class: CSS Grid Course: Positioning Items06m
Video class: CSS Grid Course: Template areas04m
Exercise: Validity rule for CSS grid-template-areas
Video class: CSS Grid Course: auto-fit 03m
Video class: CSS Grid Course: Implicit Rows01m
Exercise: Ensure consistent height for implicit rows in CSS Grid
Video class: CSS Grid Course: An Awesome Image Grid06m
Video class: CSS Grid Course: Named Lines05m
Exercise: When can you safely use grid-area content with named lines
Video class: CSS Grid Course: Justify Content and Align Content02m
Video class: CSS Grid Course: Justify Items and Align Items03m
Exercise: How do you center only one grid item inside its cell on both axes?
Video class: CSS Grid Course: auto-fit vs auto-fill02m
Video class: Your first Flexbox layout | CSS Flexbox tutorial | display: flex01m
Exercise: Which declaration turns a container into a Flexbox layout so its direct children line up horizontally by default?
Video class: Main axis and cross axis | CSS Flexbox tutorial01m
Video class: Justify Content | CSS Flexbox tutorial02m
Exercise: In a row flex container, which justify-content value creates equal spacing between all items and the container edges?
Video class: Positioning items | CSS Flexbox tutorial03m
Video class: The flex property | CSS Flexbox tutorial05m
Exercise: How do you make the .search item twice as wide as its siblings when .container > div { flex: 1 } is set?
Video class: Align items | CSS Flexbox tutorial04m
Video class: Flex direction column | CSS Flexbox tutorial03m
Exercise: Position items at bottom right with flex direction column
Video class: flex-wrap | CSS Flexbox tutorial02m
Video class: Flex grow, shrink, basis | CSS Flexbox tutorial08m
Exercise: Which flex shorthand should be applied to the Logout item so it grows 10x faster than Home while both shrink equally, given Home uses flex: 1 1 200px?
Video class: Order | CSS Flexbox tutorial03m
Video class: Responsive Navbar | CSS Flexbox tutorial05m
Exercise: Which setup correctly makes a Flexbox navbar wrap to two items per row below 600px, switch to a single column below 400px, and place the search item last
Video class: Creating a Flexbox image grid | CSS Flexbox tutorial06m
