Work & Development · Web Development & Programming

Responsive Websites with CSS

Make a community resource site readable on small and large screens.

Level: Beginner
Lessons: 12 lessons in 4 modules
Estimated study: About 13 hours
Format: Online, self-paced

Start your free 3-day trial Read lesson 1 free Already a student? Open course

Monthly: $0 today with a card, then $34 on day 4 unless you cancel before then. After the trial, 30 days' notice applies. Active on-campus students have academy access included. Check your existing student account before buying another subscription.

Before you start

Recommended preparation:

Build Your First Website

Use a computer with a keyboard and a current browser. Individual lessons explain the tools needed for each exercise.

Full study requires active Academy access. This course can be audited independently of optional assessed programs.

About this course

Continue after building a basic HTML page. In about 13 hours of reading and practice, use CSS to change text, color, spacing, and layout. Arrange links and cards with Flexbox and Grid, then let the layout change when more space is available. Check the site at phone width, at 200 percent zoom, and using only a keyboard.

What you will be able to do

Use the cascade, selectors and the box model to diagnose styling problems.
Build flexible layouts with Flexbox and Grid.
Check readability, focus styles and layouts at different screen sizes.

Course outline

Choose which page parts to style, understand competing rules, and make text readable.

Connect a stylesheet and select meaningful content1 hFree preview
Resolve the cascade and measure the box model1 h
Make text and color choices readable1 h

Arrange navigation and cards in rows and columns with Flexbox and Grid.

Arrange wrapping navigation with Flexbox1 h
Arrange related cards with CSS Grid1 h
Combine Grid and Flexbox inside components1 h

Let sizes and layouts adapt, then test enlarged text and keyboard focus.

Use fluid sizing without losing readability1 h
Choose breakpoints from the content1 h
Preserve focus, reflow and user preferences1 h

Compare the finished site with the instructions and use browser tools to fix problems.

Diagnose overflow with browser tools1 h
Review the design against a concrete brief1 h
Deliver the responsive community resource site2 h

Related assessed programs

This course belongs to the following optional programs. Each has its own required course bundle, evidence review and separate fee. Each program page shows its approved fee and current registration status.