Thinking Responsively: CSS Units and Layouts

This course introduces the fundamentals of responsive web design, focusing on the shift from static to fluid layouts. It covers essential CSS units including pixels, percentages, EMs, and REMs, and explains how to use properties like max-width to create adaptive designs. Through practical examples, students learn to apply these concepts to build components that work across various screen sizes.

Coursified Library ↗

source: freeCodeCamp.org

Outline · 8 modules · quiz after each

01Introduction to Responsive DesignWeb design has shifted from creating single static layouts to adapting designs for devices ranging from watches to TVs2 min

02CSS Units OverviewCSS units are categorized into absolute units (fixed size like pixels), relative units, and percentages4 min

03Working with PercentagesUsing percentages for layout widths simplifies the math compared to calculating fixed pixel values for different screen sizes11 min

04Controlling Size with Min and Max WidthThe `max-width` property prevents a container from growing too wide on large screens, improving text readability3 min

05The EM UnitThe EM unit is relative to the font size of the parent element, making it useful for scalable typography6 min

06The REM Unit and Compounding IssuesUsing EM units for font sizes can cause a compounding effect where nested elements become disproportionately large7 min

07Choosing Between UnitsCSS pixels are now 'reference pixels' with a fixed size, resolving historical issues with varying screen resolutions4 min

08Practical Example: Buttons and SpacingUsing REM for font sizes on button modifiers ensures text scales consistently across different button variants6 min

clones

learner

New

no ratings yet

modules

Cloning copies the outline, quizzes and assessment into your account. The video stays on YouTube; attribution to Coursified Library stays on the course.

Details

Duration4h 11m

Assessment24 questions · pass 70%

Quiz questions86

LanguageEnglish

CertificateYes · verifiable

NewNo ratings yet