Beginner level · Module 2 of 5 · 11 guided hours
CSS and Responsive Layout
Style pages with CSS, understand the box model and cascade, and build mobile-first layouts with Flexbox, Grid and media queries.
Learning objectives
- Apply styles with selectors, the cascade and custom properties
- Control spacing and size with the box model
- Build responsive, mobile-first layouts with Flexbox, Grid and media queries
Topics
- selectors and specificity
- the cascade and inheritance
- box model and box-sizing
- custom properties
- Flexbox
- CSS Grid
- media queries and mobile-first design
Lessons
-
Lesson 1 CSS Fundamentals: Selectors, Cascade and Box Model
Write CSS rules, understand how conflicting rules are resolved, and control size and spacing with the box model.
selector and declarationspecificity and cascadebox modelcustom properties
-
Lesson 2 Flexbox and Grid Layouts
Arrange content in rows and columns with Flexbox for one dimension and Grid for two.
display: flexjustify-content and align-itemsdisplay: gridgrid-template-columns and gap
-
Lesson 3 Responsive, Mobile-First Design
Design for small screens first, then add media queries for larger screens, and make images and text adapt.
mobile-firstmedia queriesresponsive imagesrelative units (rem, %)
Practical activity
Style the organisation profile mobile-first: a single column on phones, a navigation bar and a three-column services grid on larger screens.
Expected outcomes
- Consistent, maintainable styles
- Layouts that work on every screen size
Assessment
Practical: make a provided page responsive from 320 px to 1280 px; checked in DevTools device mode and on a real phone.
Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.