Create fluid pages that adapt instead of relying on dozens of device-specific breakpoints
Goal
You should be able to demonstrate the result described in the lesson and explain why each step was necessary.
You should be able to demonstrate the result described in the lesson and explain why each step was necessary.
Step-by-step
01
Start with a content width
Use a centered max-width container and fluid side padding.
02
Use grid and flexbox
Choose Grid for two-dimensional card layouts and Flexbox for one-dimensional alignment.
03
Use fluid type carefully
Clamp can scale type between sensible minimum and maximum sizes.
04
Make media flexible
Images should not overflow their containers; preserve aspect ratio deliberately.
05
Test narrow widths early
Resize continuously while building instead of treating mobile as a final patch.
Verify before moving on
You should be able to demonstrate the result described in the lesson and explain why each step was necessary.
You should be able to demonstrate the result described in the lesson and explain why each step was necessary.
Troubleshooting
If a command or screen differs from the lesson, stop and verify the version you are using before forcing a change.
What you learned
You now understand the purpose of this part of the system and have a concrete result you can verify before continuing to the next lesson.