Skip to content

Developing Work Skills · Career & Development

Responsive Websites with CSS

Give a community resource website readable structure and layouts that adapt to its content.

Level
Beginner
Estimated study
About 13 hours
Lessons
12 lessons in 4 modules
Format
Online, self-paced
Start your free 7-day trialAlready a student? Open course

Monthly: $0 today with a card, then $34 on day 8 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.

About this course

For learners who have built a basic HTML page. In about 13 hours you will style a community resource site with readable type, Flexbox, Grid and media queries, then test it at phone width, at 200 percent zoom and with 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

Module 1: Style with purpose

3 lessons · 3 h

Practice selectors, the cascade, spacing, typography and readable color choices.

  1. Connect a stylesheet and select meaningful content1 h
  2. Resolve the cascade and measure the box model1 h
  3. Make text and color choices readable1 h

Module 2: Build flexible layouts

3 lessons · 3 h

Use Flexbox and Grid to arrange navigation, content and cards.

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

Module 3: Respond to different screens

3 lessons · 3 h

Use fluid sizing and media queries, then check zoom and keyboard focus.

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

Module 4: Review your design

3 lessons · 4 h

Compare a brief with your finished site and fix layout problems using browser tools.

  1. Diagnose overflow with browser tools1 h
  2. Review the design against a concrete brief1 h
  3. Deliver the responsive community resource site2 h
Get helpStart 7-day trial