Overview

Google, IBM & Meta Certificates – 40% Off

One Coursera Plus subscription covers most Professional Certificates on Coursera.

CSS is what transforms a plain HTML page into a website people actually want to use, yet most beginners either skip the fundamentals or jump straight to frameworks. This course changes that. You will learn how CSS governs styling, layout, and responsiveness across the web, and you will build these skills hands-on by styling a personal portfolio website — the same real, multi-page site you structured in HTML, now brought to life visually. Throughout this course, you will work directly with CSS to apply selectors and understand the cascade, style typography and colors, build layouts with the box model, position elements, construct flexible layouts with Flexbox, and design responsive, grid-based pages. Each concept is reinforced through step-by-step hands-on demonstrations that you can follow along on your own setup, pause, replicate, and practice at your own pace. By the end of this course, you'll be able to: Explain how CSS applies styles through selectors, the cascade, and specificity, and work with units, colors, and the box model. Build well-typeset, positioned page content using typography, display properties, and flexible Flexbox layouts. Apply CSS Grid and responsive design principles to create structured, adaptive layouts instead of fixed, single-device designs. Enhance interfaces with transitions and animations, and organize styles using BEM for long-term maintainability. This course is designed for a diverse audience: complete beginners continuing their web development journey, aspiring front-end developers building foundational skills, career switchers exploring tech, and professionals who want to understand how websites are styled before moving into dynamic functionality. No prior experience with advanced CSS or programming is required, though basic familiarity with HTML is assumed. This course builds every styling concept from the ground up. Start styling the web and build the visual foundation for every website you'll ever create using CSS.

Syllabus

CSS Fundamentals and The Box Model
- Examine how CSS applies styles through selectors, the cascade, and specificity, and choose the right units for consistent styling. Develop skills by linking stylesheets, applying colors, backgrounds, and gradients, and debugging with browser DevTools. Build layouts using the box model, including padding, margins, borders, and box-sizing.
Styling Content and Flexible Layouts
- Differentiate between normal flow, stacking contexts, and positioning techniques that control how elements appear on a page. Develop skills by styling typography with web fonts and a type scale, and applying borders, shadows, and interactive states. Construct flexible layouts using sticky navigation, positioned overlays, and Flexbox for navbars and card rows.
Grid, Responsive Design and Polish
- Evaluate how CSS Grid and custom properties like calc and clamp support scalable, maintainable layouts. Develop skills by building grid-based galleries and applying media queries for responsive, mobile-first design. Enhance interfaces using transitions, transforms, and animations, and organize styles with BEM.