Practice: Style and adapt a profile page

Course

Level 1 · Web Introduction

Module

CSS and layout

Required-path effort

180–300 minutes

Submission

Show the completed project to your teacher

Assignment type

Individual implementation

Estimate assumptions: This provisional estimate covers the required path, including preparing a separate project, creating its repository, writing CSS, recording and pushing checkpoints, testing different viewport sizes, debugging, verification, and re-entry after an interruption. It assumes that you completed the preceding CSS and Git lessons. Optional extensions are not included. Optional extensions are not included.

Outcome

You will create an independent CSS version of your semantic profile page. The finished page will use a consistent visual system, a predictable box model, a suitable Flexbox layout, and a tested narrow-first responsive layout.

The assignment assesses the CSS and layout module as one complete result. Keep the profile’s meaning and content order. Make the visual decisions yourself.

What you will practice

• Connect visible page decisions to selectors, declarations, inheritance, and the cascade.
• Use the box model, fluid dimensions, and normal flow to create readable page structure.
• Use Flexbox where content needs one-dimensional alignment, distribution, or wrapping.
• Reuse colors and spacing through custom properties and focused selectors.
• Create link states that remain visible with a pointer and keyboard.
• Use a content-based media query and verify the layout at narrow, wide, and zoomed views.
• Record and push meaningful CSS project checkpoints with Git and GitHub.

What is new and what is reused

• New: Combining the module techniques without a supplied sequence of declarations, choosing your own visual direction, and presenting evidence that the final layout works.
• Reused: The semantic profile page, external CSS, selectors, the cascade, DevTools, the box model, normal flow, Flexbox, custom properties, interaction states, narrow-first CSS, media queries, and keyboard testing.

Starting point

Before you start

• The completed html-profile folder and private repository from the HTML assignment and CSS lessons.
• A semantic index.html with working fragment navigation, at least two project articles, and a current-focus aside.
• The nav-list, project-list, and project-entry classes added during the CSS lessons, or equivalent classes that select the same relationships.
• VS Code, Git, a GitHub account, and a current version of Edge, Chrome, or Firefox.

Current state

Your html-profile project and repository contain the worked CSS lesson result. The separate css-profile folder and repository do not exist yet.

First action

Create an empty folder named css-profile. Copy index.html and styles.css from html-profile into it without copying the hidden .git folder, then open css-profile in VS Code.

First checkpoint

css-profile is a new repository with its own private GitHub remote. It contains the semantic profile content, an active styles.css, and a saved reference copy of the lesson stylesheet.

Help trigger

Use the assistance for the current checkpoint or ask for help if the copied page loses content, styles.css does not load, a flex container affects the wrong elements, a media query does not change state, or a keyboard focus indicator is missing or clipped.

Requirements

The required assignment is complete when every applicable criterion below is met.

Required page behavior

• css-profile contains index.html and styles.css, and index.html loads styles.css as an external stylesheet.
• The existing profile content, semantic elements, heading hierarchy, fragment destinations, and descriptive links remain present and usable.
• The page has a deliberate visual hierarchy for the page heading, section headings, project entries, current-focus aside, navigation, and footer.

CSS and layout

• One shared box-sizing rule makes declared dimensions predictable.
• The main page regions use a fluid width, a maximum width, and automatic inline margins.
• Custom properties provide shared color and spacing values, and at least one color value and one spacing value are reused in multiple rules.
• At least one class-based Flexbox container arranges a one-dimensional content group and allows its items to wrap when space is limited.
• One min-width media query changes an arrangement when the profile content has enough space. The narrow layout works without that query.
• The stylesheet is grouped by purpose and contains no temporary experiments, unnecessary !important declarations, or duplicated rule sets inside the media query.

Accessibility and responsive behavior

• Body text remains readable against its background. Use a browser contrast result and keep each normal-text pair at WCAG AA when the tool provides that result.
• Links remain identifiable without color alone, have a visible hover change, and show a clear focus indicator during keyboard navigation.
• At about 320 CSS pixels, every required part remains visible and the page has no unintended horizontal scrolling.
• At a wide viewport and at 200% browser zoom, content reflows without overlap, clipping, or loss of keyboard access.
• The visual order remains consistent with the meaningful HTML source order at every tested width.

Version control and GitHub

• css-profile is a separate Git repository on main with its own private GitHub repository connected as origin.
• The repository does not contain the html-profile .git folder or use the html-profile remote.
• The history contains one commit for each required working checkpoint, using the messages stated in this assignment.
• The final working tree is clean, and the GitHub main branch contains the latest required commit.

Design freedom

• Choose the color palette, typeface stack, spacing scale, borders, corner treatment, maximum width, and exact breakpoint.
• Choose whether Flexbox serves the navigation, project list, header, or more than one of these relationships.
• Adapt the supplied class names when your HTML uses an equivalent clear structure.

Out of scope

• JavaScript, animation, deployment, CSS frameworks, and a second layout system are not required.
• Images, a dark theme, extra pages, and rewritten profile content are optional extension work.
• Do not replace semantic elements with div elements to make styling more convenient.

Definition of done

The required assignment is complete when both active files are saved, every requirement above is true, the four required commits are on the private GitHub repository, the final self-check passes, and you can demonstrate the narrow, wide, keyboard, zoom, and DevTools evidence to your teacher. Optional extensions do not change this finish line.

Checkpoint 1: Prepare an independent project

Protect the completed lesson project and its repository before you begin the independent stylesheet.

1. Create an empty folder named css-profile inside your Level 1 projects folder.
2. Copy html-profile/index.html and html-profile/styles.css into css-profile. Copy the files, not the complete folder.
3. Rename the copied styles.css to lesson-reference.css.
4. Create a new empty file named styles.css beside index.html.
5. Open css-profile as the workspace root in VS Code.
6. Confirm that index.html still contains <link rel="stylesheet" href="styles.css"> and the existing viewport meta element.
7. Open css-profile/index.html in the browser.

The page now uses the browser’s default appearance because the active stylesheet is empty. The lesson stylesheet remains available in lesson-reference.css, but the HTML must not load that reference file.

Copying only the named files prevents the hidden html-profile/.git folder and its origin remote from entering the new project.

Do not remove profile content or semantic elements. If you use the class names from the lessons, confirm this structure before you style it:

Required styling relationships

header
└── nav
    └── ul.nav-list

section#projects
└── div.project-list
    ├── article.project-entry
    └── article.project-entry

The div groups the project entries for layout. Each article keeps its semantic purpose.

Check

1. Confirm that css-profile, not html-profile, is open in VS Code.
2. Confirm that index.html, styles.css, and lesson-reference.css are at the same folder level.
3. Reload the page and confirm that the content appears with browser-default styling.
4. Select each fragment-navigation link and confirm that it reaches the intended section.
5. Confirm that the Projects section still contains at least two article elements.

Create the project repository

From the css-profile workspace root, run:

Create the CSS project repository

git init -b main
git add index.html styles.css lesson-reference.css
git diff --staged
git commit -m "Create CSS profile practice"

Create an empty private GitHub repository named css-profile. Do not add a README, .gitignore, or license on GitHub. Copy its HTTPS URL, then connect and push the project:

Connect and push the CSS project

git remote add origin https://github.com/YOUR-USERNAME/css-profile.git
git push -u origin main

Run git remote -v. Confirm that origin points to css-profile, not html-profile. Reload GitHub and confirm that the first commit contains the three project files.

Assistance for Checkpoint 1

1Assistance 1 — Identify the active file and current browser state

Check the folder name in the VS Code Explorer first. Work in css-profile. Then inspect the link element in index.html: its href must be styles.css, not lesson-reference.css.

A page with complete content and browser-default styling is the intended state at this checkpoint.

2Assistance 2 — Repair a missing layout class or wrapper

The navigation ul needs a class that the stylesheet can select. The project articles need one shared parent for the Flexbox layout and one shared class for reusable article styles.

Revisit Arrange content with Flexbox if one of these relationships is missing. Keep the navigation links and project content unchanged while you restore the classes and wrapper.

Checkpoint: The independent CSS project is ready

What now works

css-profile opens with complete semantic content and working fragment links. Its empty styles.css is active, lesson-reference.css preserves the earlier lesson result, and the first commit is on the private css-profile repository.

Files changed

css-profile/index.html, css-profile/styles.css, css-profile/lesson-reference.css

What remains

Define shared design values and establish the page-wide text, color, and sizing foundation.

Next action

Open css-profile/styles.css and add a :root rule for the shared colors and spacing that your design will reuse.

If it does not work

Confirm the folder and file names first. Then verify the stylesheet href, one fragment link, git status, and the origin URL before changing the HTML structure.

This is a safe stopping point. If you stop here, record: The CSS project works without active styles, the first commit is pushed, and the next action is to define shared design values in css-profile/styles.css.

Record each working checkpoint with Git

Run the browser check before you commit. Use these exact messages for the required history:

Working state	Required commit message
Independent project and reference stylesheet are ready	Create CSS profile practice
Visual and box-model foundation works	Add profile visual foundation
Reusable selectors and link states work	Add reusable profile styles
Responsive Flexbox layout passes	Make profile layout responsive

For Checkpoints 2–4, save the files and run this workflow from css-profile. Replace the placeholder with the matching message from the table.

Record and push a CSS checkpoint

git status
git diff
git add index.html styles.css
git diff --staged
git commit -m "CHECKPOINT MESSAGE"
git push

If index.html did not change, stage only styles.css. Inspect the staged diff before each commit. Do not stage a file only to make the command match the example.

Checkpoint 2: Build the visual and box-model foundation

Create the base layer before you arrange content with Flexbox or add a media query.

Define shared design values

At the top of styles.css, add a :root rule with names that describe the role of each value. Include:

• a page background;
• a surface background;
• a body-text color;
• a heading or accent color;
• a link color;
• a border color;
• a focus-indicator color; and
• at least two spacing values.

Use var() wherever a shared decision applies. At least one color property and one spacing property must affect more than one rule. A one-off value can remain in the rule that uses it.

Establish predictable defaults

Add the base rules that control:

• box-sizing for every element;
• the body margin, text color, background, typeface, and line height;
• heading colors;
• flexible images, even if the current profile has no image; and
• the normal appearance of links.

Do not add a zoom restriction to the viewport meta element. Do not use a fixed height for text containers.

Control page width and spacing

Give header, main, and footer:

• a fluid width that leaves some inline space at a narrow viewport;
• a max-width that keeps long text lines readable at a wide viewport; and
• automatic inline margins that center the regions.

Use margin for separation between neighboring sections. Use padding where a surface, border, or background needs internal space. Style the current-focus aside and project entries so their role is visible without changing their semantic elements.

Check

1. Save and reload the page.
2. Change one shared color in :root, save, and confirm that every intended use changes. Restore the chosen value.
3. Change one shared spacing value, save, and confirm that more than one intended gap changes. Restore the chosen value.
4. Inspect one project entry in DevTools and confirm that its declared width includes its padding and border because border-box applies.
5. Resize the viewport from narrow to wide. Confirm that the page regions change width but stop at their maximum width.
6. Confirm that the content remains in normal source order and that no fixed height clips text.

Assistance for Checkpoint 2

The assignment-wide partial stylesheet provides an ordered CSS skeleton if you need a smaller starting surface.

2Assistance 2 — Distinguish outside space from inside space

Use margin to separate one content group from the next. Use padding between a box’s content and its own border or background.

Inspect the box-model diagram in DevTools when a gap has an unclear source. Disable one margin or padding declaration there before you edit the saved file.

3Assistance 3 — Build the foundation in a stable order

Use this order:

1. Add custom properties in :root.
2. Apply box-sizing: border-box to all elements.
3. Add page-wide body text and color defaults.
4. Style headings, links, and flexible images.
5. Add the fluid and maximum widths for header, main, and footer.
6. Add vertical section spacing.
7. Add internal space, backgrounds, or borders to the aside and project entries.

Save and reload after each group. Find the first group whose expected result does not appear before adding another group.

Checkpoint: The page has a predictable visual foundation

What now works

Shared values control the page design, border-box sizing applies, the page regions are fluid and centered with a maximum width, and normal flow creates a readable content hierarchy.

Files changed

css-profile/styles.css

What remains

Add reusable selectors and visible link interaction states, then inspect one cascade result.

Next action

Use Tab to move through the current links and note what the browser shows for keyboard focus before you add your own focus-visible rule.

If it does not work

Disable one declaration at a time in DevTools. Confirm whether the problem comes from selector matching, the computed box model, or a custom property before you add another rule.

Checkpoint 3: Add reusable selectors and interaction states

Use selectors that express a stable page relationship. Avoid adding a unique class for every element.

Style repeated and related elements

Use the shared .project-entry class to give every project article the same surface, border, and internal spacing. Use focused selectors for relationships such as:

• navigation links inside .nav-list;
• an h3 that is a direct child of .project-entry;
• the profile label that is a direct child of header; and
• a mailto: or HTTPS link that can contain a long unbroken string.

Keep selectors as specific as the relationship requires. Do not use an ID selector only to make a declaration win. Do not add !important to repair an ordinary cascade conflict.

Make every link state visible

The final link rules must provide:

• a base indicator that does not depend on color alone;
• a visible :hover change that does not contain required information; and
• a clear :focus-visible indicator that remains visible at page edges and 200% zoom.

Do not remove the browser outline without a tested replacement. Do not clip focus indicators with overflow: hidden.

Inspect one cascade result

1. Inspect a project heading or navigation link in DevTools.
2. Find two declarations that could affect the same property, such as an inherited body color and a direct heading color.
3. Identify which selectors match the element.
4. State why the final declaration wins. Use inheritance, specificity, or source order in the explanation as applicable.
5. Disable the winning declaration temporarily and observe the fallback result.
6. Reload the page to remove the DevTools experiment.

Check

1. Confirm that every project entry receives the same reusable style.
2. Confirm that a focused relationship selector does not affect similar elements outside that relationship.
3. Use a pointing device and confirm that the hover state is visible.
4. Use Tab and Shift + Tab and confirm that every link receives a visible focus indicator.
5. Press Enter on each navigation link and confirm that it reaches the intended section.
6. Inspect one link and explain the final value of one competing or inherited property.

Assistance for Checkpoint 3

2Assistance 2 — Match selector types to the required relationships

Use a class selector for a repeated component, a descendant selector for an element anywhere inside a named component, a child selector for a direct relationship, an attribute selector for a link whose href begins with a known value, and a pseudo-class for an interaction state.

Inspect the element first. Write the selector only after you can name the relationship that it must match.

3Assistance 3 — Create and test the three link states

Work on one state at a time:

1. Give the base link a visible underline or another persistent non-color indicator.
2. Add a hover change to the underline, border, or another visible feature.
3. Add an outside outline and offset for :focus-visible.
4. Test hover with a pointer.
5. Test focus with Tab, Shift + Tab, and Enter.
6. Increase zoom to 200% and confirm that the focus indicator is not clipped.

If a state is absent, inspect the link and use the DevTools state controls to confirm whether the pseudo-class matches.

Checkpoint: Reusable styles and link states are verified

What now works

Repeated project entries share one class-based style, relationship selectors affect only their intended targets, and every link has a persistent indicator, hover change, and visible keyboard-focus state.

Files changed

css-profile/styles.css

What remains

Arrange one content group with Flexbox, create the narrow-first and wider layouts, and complete responsive verification.

Next action

Choose the navigation, header, or project list as the first Flexbox container and identify its direct-child flex items.

If it does not work

Inspect one target element. Confirm that the selector matches and that a later or more specific rule does not override the expected declaration.

This is a safe stopping point. If you stop here, record the selector or link state you last verified and the content group you will arrange with Flexbox next.

Checkpoint 4: Adapt the layout with Flexbox and one media query

Use Flexbox for a one-dimensional relationship. Keep ordinary vertical reading flow for content that does not need alignment or distribution.

Build the narrow layout first

At a narrow viewport, make these results true without a media query:

• the header content has enough space and can stack when necessary;
• navigation links can wrap;
• every project entry has enough width for its text;
• long contact text and any image remain inside their containing block; and
• no required content scrolls sideways.

Use at least one class-based flex container. Add flex-wrap when its items can need another line. Use gap to own the space between flex items instead of combining a container gap with matching item margins.

For a project-list layout, set a meaningful flex-basis, flex-grow, and flex-shrink on .project-entry. For a navigation or header layout, use alignment and distribution properties only when they serve the chosen arrangement.

Do not use order, row-reverse, or column-reverse to change the meaningful sequence.

Choose a breakpoint from the content

1. Start near 320 CSS pixels and confirm that the narrow layout works.
2. Increase the viewport width slowly.
3. Find the range where the selected content group has enough space for a wider arrangement.
4. Choose a nearby breakpoint in rem.
5. Add one @media (min-width: ...) block at the end of styles.css.
6. Put only the declarations that change for the wider arrangement inside the query.

The breakpoint describes available layout space. Do not name it after a phone, tablet, or monitor model.

Test both sides of the breakpoint

Use responsive-design mode for repeatable viewport widths. Then use the normal page view for keyboard and zoom tests.

Test state	Required evidence
About 320 CSS pixels wide	Content stays inside the viewport, flex items wrap or stack, and there is no unintended horizontal scrolling.
Below the breakpoint	The complete narrow base remains usable without conditional rules.
At and above the breakpoint	The selected content group changes to the wider arrangement without overlap or crowding.
A wide viewport	Page regions stop growing at the chosen maximum width.
Normal page view at 200% zoom	Text reflows, links remain reachable, focus stays visible, and no required content disappears.

At each width, compare the visual sequence with the source order. Activate every fragment link with Enter during the keyboard test.

Do not use overflow-x: hidden to conceal a layout defect. Inspect the element that extends beyond its containing block and correct its width, minimum size, padding, margin, or wrapping behavior.

Assistance for Checkpoint 4

The assignment-wide reference solution shows one complete narrow-first Flexbox result. Your values and visual design can differ.

1Assistance 1 — Locate the first failed responsive state

Test in this order: narrow width, below the breakpoint, above the breakpoint, wide width, and 200% zoom. Stop at the first failed state.

Inspect the specific container or item that fails there. Do not change the breakpoint until the narrow base works.

2Assistance 2 — Identify the flex container and its items

Select the element with display: flex in DevTools. Its direct children are the flex items. Nested descendants do not become items of that container.

If a section heading joins the project row, the Projects section is too broad a container. Put the articles inside .project-list and apply Flexbox to that wrapper.

3Assistance 3 — Build the responsive layers in a stable order

Use this sequence:

1. Make the chosen container a flex container.
2. Define its narrow direction, gap, alignment, and wrapping behavior.
3. Give flex items a basis and grow or shrink behavior when the design needs them.
4. Test near 320 CSS pixels and correct every overflow problem.
5. Increase the width until the content supports a different arrangement.
6. Add one min-width media query with only the changed declarations.
7. Test below, at, and above the breakpoint.
8. Complete the wide, keyboard, and 200% zoom checks.

Checkpoint: The complete profile layout adapts and remains usable

What now works

The narrow base, class-based Flexbox layout, content-based media query, fluid width, source order, links, focus indicators, and 200% zoom behavior pass the required test states.

Files changed

css-profile/index.html, css-profile/styles.css

What remains

Remove temporary experiments, complete the final self-check, and present the required evidence.

Next action

Search styles.css for temporary declarations, !important, order, reverse directions, fixed heights, and overflow-x: hidden before you start the self-check.

If it does not work

Return to the last test state that passed. Inspect one failing box and change one declaration only after DevTools identifies the cause.

Self-check

Complete these checks against the required result.

1. Confirm that css-profile contains index.html and styles.css and that index.html loads styles.css, not lesson-reference.css.
2. Confirm that the doctype, language, charset, viewport setting, semantic regions, heading hierarchy, profile content, and descriptive links remain present.
3. Activate every fragment-navigation link and confirm that it reaches the matching section.
4. Confirm that :root contains shared color and spacing custom properties and that at least one property from each category is reused in multiple rules.
5. Inspect one box and confirm that the shared border-box rule applies.
6. Confirm that header, main, and footer use a fluid width, stop at a maximum width, and remain centered.
7. Confirm that the page has a clear visual hierarchy and readable text and background pairs.
8. Confirm that repeated project entries share one class-based style and that focused selectors do not affect unrelated elements.
9. Use a pointer to confirm that every link has a persistent non-color indicator and a visible hover change.
10. Use Tab, Shift + Tab, and Enter to confirm that every link has a visible focus indicator and remains operable.
11. Identify one flex container and name its direct-child flex items, main axis, wrapping behavior, and gap source.
12. Confirm that the meaningful visual order matches the HTML source order at narrow and wide widths.
13. At about 320 CSS pixels, confirm that every required part remains visible and that the page has no unintended horizontal scrolling.
14. Below and above the chosen breakpoint, confirm that the media query changes only the intended arrangement.
15. At a wide viewport, confirm that the page stops growing at its maximum width.
16. At 200% browser zoom in the normal page view, confirm that content reflows and that no text, link, or focus indicator is clipped or lost.
17. Use DevTools to explain the final value of one declaration through selector matching, inheritance, specificity, source order, or custom-property resolution.
18. Confirm that styles.css contains no temporary test rules, unnecessary !important declarations, order-based rearrangement, fixed text-container heights, or overflow-x: hidden repair.
19. Run git log --oneline and confirm that it contains the four required checkpoint messages.
20. Run git status and confirm that the working tree is clean. Confirm that the private GitHub repository contains the latest commit.

Assessment

Your teacher checks the required path against these criteria:

Criterion	Evidence
CSS foundation	The external stylesheet loads, shared values have one source, sizing is predictable, and the page has a deliberate readable visual hierarchy.
Box model and page flow	Fluid page regions, maximum width, margin, padding, borders, and normal flow create clear structure without clipping content.
Reusable and predictable CSS	Repeated parts use shared classes and custom properties, focused selectors serve clear relationships, and the student can explain one cascade result.
Flexbox and responsive layout	A suitable class-based flex container adapts through wrapping and one content-based min-width query while preserving source order.
Accessibility and verification	Links work with a pointer and keyboard, focus remains visible, text remains readable, and the page passes narrow, wide, overflow, and 200% zoom tests.
Version control	The project has its own repository and remote, the four required commits record working states, and the final local and GitHub states agree.

An optional extension does not change whether the required assignment is complete.

Assignment-wide assistance

The checkpoint sections contain support for their specific tasks and tests. The options below provide a partial structure and one complete reference solution. Open the smallest level that provides useful forward movement.

4Assistance 4 — Start from a partial stylesheet structure

This partial implementation supplies an ordered stylesheet and leaves the design and layout decisions as TODO items. Replace each placeholder with a valid value or declaration. Add or adapt selectors when your HTML structure differs.

css-profile/styles.css — partial implementation

/* Shared design values */
:root {
  --color-page: TODO;
  --color-surface: TODO;
  --color-text: TODO;
  --color-heading: TODO;
  --color-link: TODO;
  --color-border: TODO;
  --color-focus: TODO;
  --space-small: TODO;
  --space-medium: TODO;
  --space-large: TODO;
}

/* Predictable sizing and page defaults */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* TODO: Add readable text, background, typeface, and line-height values. */
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* Headings, links, and interaction states */
/* TODO: Add heading and base link styles. */
/* TODO: Add :hover and :focus-visible rules. */

/* Fluid page width and normal-flow spacing */
header,
main,
footer {
  /* TODO: Add a fluid width, maximum width, and automatic inline margins. */
}

/* TODO: Add section, aside, project-entry, and footer spacing or surfaces. */

/* Narrow Flexbox layout */
/* TODO: Add at least one class-based flex container and its item rules. */

/* Wider layout */
@media (min-width: TODOrem) {
  /* TODO: Add only the declarations that change for the wider arrangement. */
}

A CSS value of TODO is invalid. Replace every placeholder before you run the final tests.

5Assistance 5 — Compare with one complete reference solutionExample solution

This stylesheet is one valid reference solution for the class structure used in the lessons. It uses a different palette and breakpoint from the lesson reference. You can compare structure, repair a failed checkpoint, or use it as a starting state. Your page does not need to match its appearance.

css-profile/styles.css — one complete reference solution

/* Shared design values */
:root {
  --color-page: #eef3f7;
  --color-surface: #ffffff;
  --color-text: #1f2933;
  --color-heading: #17324d;
  --color-link: #075ea8;
  --color-accent: #0f6b61;
  --color-border: #91a3b5;
  --color-focus: #7c3aed;
  --space-small: 0.75rem;
  --space-medium: 1.25rem;
  --space-large: 2.5rem;
}

/* Predictable sizing and page defaults */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-page);
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* Headings, links, and interaction states */
h1,
h3 {
  color: var(--color-heading);
}

h2 {
  color: var(--color-accent);
}

a {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.2em;
}

a:focus-visible {
  border-radius: 0.125rem;
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

a[href^="mailto:"],
a[href^="https://"] {
  overflow-wrap: anywhere;
}

/* Fluid page width and normal-flow spacing */
header,
main,
footer {
  width: 90%;
  max-width: 52rem;
  margin-inline: auto;
}

section,
aside {
  margin-block: var(--space-large);
}

aside {
  border-inline-start: 0.3rem solid var(--color-accent);
  background-color: var(--color-surface);
  padding: var(--space-medium);
}

footer {
  margin-block-start: var(--space-large);
  border-top: 2px solid var(--color-border);
  padding-block: var(--space-medium);
}

/* Narrow header and navigation layout */
header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--space-medium);
  align-items: flex-start;
  padding-block: var(--space-medium);
}

header > p {
  margin: 0;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-block;
  padding-block: 0.5rem;
  padding-inline: 0.25rem;
}

/* Narrow project-list layout and repeated project style */
.project-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-medium);
}

.project-entry {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  margin: 0;
  border: 2px solid var(--color-border);
  background-color: var(--color-surface);
  padding: var(--space-medium);
}

.project-entry > h3 {
  margin-block-start: 0;
}

/* Wider arrangement when the content has enough space */
@media (min-width: 44rem) {
  header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .project-entry {
    flex-basis: 18rem;
  }
}

The base rules contain the complete narrow layout. The media query changes only the header arrangement and preferred project-entry size. Flex wrapping and the fluid page width continue to handle the space between test widths.

Optional extensions

The required assignment is complete when it meets the definition of done and passes the self-check. These extensions do not affect the required result, estimate, or assessment. Choose any route that provides a useful next challenge.

Add a third project as a layout stress test

Add a third project article with the same class and content structure as the existing entries. Test one, two, and three entries at narrow and wide widths. Adjust the flex basis or gap only when the evidence shows a layout problem.

Add one meaningful local image

Add a profile or project image from a local project folder. Write useful alt text when the image communicates information, or use alt="" when it is decorative. Confirm that the image retains its aspect ratio and stays inside its containing block at every required test state.

Reuse the stylesheet on a second page

Create project-details.html with a complete semantic document and a link back to index.html. Load the same styles.css. Reuse the existing design values and component classes before you add any page-specific rule.

Build and verify an alternate theme

Create an alternate theme through scoped custom-property overrides or prefers-color-scheme. Keep the content and layout rules shared. Verify text contrast, link identification, hover, keyboard focus, narrow layout, and 200% zoom in both themes.

Compare Flexbox with CSS Grid

Make a separate experimental copy of the project list. Rebuild that one relationship with CSS Grid. Compare the two versions by naming the layout problem each tool solves, the declarations each version needs, and which version you would keep for this content.

Submission

Submission destination: Show the completed project to your teacher.

Show your teacher css-profile/index.html, css-profile/styles.css, the rendered page, the local one-line Git log, and the private GitHub repository. Demonstrate the page near 320 CSS pixels, above the breakpoint, and at 200% browser zoom. Use the keyboard to show the link sequence and focus indicator. In DevTools, identify one flex container and explain how one final CSS value was resolved.

Safe stopping point and re-entry

Stop after any checkpoint if you need to split the assignment across sessions. Save both active files, reload the browser, and record this note before you close the project:

Resume note

What works:
[Name the last checkpoint and test state that passed.]

What remains:
[Name the first incomplete requirement or failed test.]

Next action:
[Write one action in index.html, styles.css, or DevTools.]

Required setup:
Open css-profile in VS Code and css-profile/index.html in the browser.
Use the viewport width and zoom level required by the next test.

The required project is complete when the self-check passes and you have demonstrated the saved page, source, responsive behavior, keyboard behavior, and DevTools evidence to your teacher. Continue to Apply visual design principles when you are ready to make more deliberate composition and visual-design decisions.