Build the responsive system
Want more background?
The idea in everyday life
The supplied stylesheet gives you a small working system to inspect and change. README section 3 connects reusable colors, flexible widths, wrapping navigation and a content-driven grid to the problems they solve. Test longer copy, visible keyboard focus and zoom after your own edit; record what you actually observed.
Responsive design is flexible content within constraints, not separate desktop and mobile pages.
One step at a time.
Use the sample or information you have permission to use. Keep your work as you go. You can pause between steps.
- 1
Open styles.css. Find root colors, border-box sizing, constrained content width, wrapping navigation and the auto-fit card grid; README explains each supplied rule.
- 2
Change --accent to #174c76 and lengthen a card sentence. Save/reload; the grid should fit its content without a fixed card height.
- 3
Use a narrow browser window and 200% zoom. Tab through the page; check visible focus, reflow, contrast and the original SVG’s reserved dimensions. Record the device/browser and any unavailable physical-device checks.
- 4
Keep a small pattern sheet: body 1.1rem, gap 1rem, button padding .7rem/1rem and both color values. The reduced-motion rule disables smooth scrolling.
See how it works.
Changing --accent to #174c76 changes links/buttons without rewriting individual rules. At a narrow width cards stack and nav wraps; at wider widths cards fit side by side. The 48×48 SVG has explicit dimensions. Keep a real observation for zoom/keyboard testing instead of assuming the reference passes on every device.
Did you cover these?
- Longer copy and navigation reflow in the tested narrow window and at 200% zoom.
- The actual tested focus/contrast results and any device limitations are recorded.
- Your pattern sheet and reserved SVG size agree with the edited CSS/HTML.
What to finish
A responsive stylesheet and component pattern sheet for buttons, cards, type, and spacing.
Watch for this
Hard-coding heights and pixel positions that only work for one viewport and text length.
How can I tell I understand it?
The page remains readable and usable at narrow width and 200% text enlargement.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkOptional course overview video · same video as Lesson 1
Full Stack Web Development for Beginners
From freeCodeCamp.org. Watch here or open it on YouTube .
Use the optional CSS demonstration to explain flexible layout choices, then test those ideas against the supplied stylesheet and your longer content.Tools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.