Responsive Web Foundations / Guided workshop

Style a readable learning profile

Give the supplied profile a readable visual design using an external stylesheet. Keep its content and links intact while making the page fit a narrow window.

Before starting: m3-l1, m3-l2, m3-l3

Get started

1. Extract index.html, styles.css and avatar.svg. Connect styles.css from head using a relative stylesheet link.
2. Set body font-family, a base font size and a unitless line-height. Choose a readable foreground and background.
3. Apply border-box sizing. Give main a percentage width, a sensible max-width, internal padding and automatic horizontal margins.
4. Style h1 and h2 with a modest scale. Let text wrap and boxes grow. Make the supplied image fit its container with max-width: 100% and height: auto.
5. Keep links underlined and preserve visible keyboard focus. Check contrast with the site tool, then test at 200% zoom.
6. Upload both HTML and CSS and the image to run checks at 320px and 768px.

Requirements

• Keep the semantic profile, section links and local image.
• Load a supplied, nonempty external stylesheet.
• Use a base text size of at least 16px and line-height of at least 1.4 in the checker’s default environment.
• Fit the page at 320px and 768px without hiding overflowing content.
• Use paragraph and heading boxes that grow with text; keep all text visible.
• Keep links visibly underlined.

Manual checks

• Open your saved index.html directly in a browser. Follow every link with Tab and Enter, keeping focus visible.
• Read the headings and content in source order. Check that the wording and alternative text match the content.
• Enlarge the page to 200%, try a longer heading and paragraph, and check that all words remain visible. Check text and link contrast against their actual background with the contrast checker; aim for 4.5:1.

Hints

Explain your decision

Which sizing decision lets padding increase without making the main box overflow?