Practice: Create a page asset set

Outcome

Create a coherent page asset set for an existing responsive profile. You will prepare one raster image as two responsive WebP files, create one original SVG graphic, integrate both assets, and document their purpose, source, changes, and reuse terms.

This is an independent practice assignment. The requirements define the technical result. You choose the subject, crop, graphic concept, page placement, and visual treatment.

What you will practice

Select image content that supports a page purpose and is safe to publish.
Prepare responsive raster files without overwriting the source.
Create a scalable SVG from a small set of intentional shapes and paths.
Write context-appropriate text alternatives for informative and decorative uses.
Integrate, test, and document assets as part of a responsive visual system.
Record and push meaningful asset-project checkpoints with Git and GitHub.

Why this project matters

Web assets affect meaning, visual hierarchy, download size, layout stability, and accessibility. A reliable asset workflow keeps the source separate from the published files and makes each design choice traceable.

What is new and what is reused

New: Selecting and delivering an independent asset set from a short product brief.
Reused: Visual hierarchy, color and spacing roles, raster dimensions, aspect ratio, compression, WebP, srcset, sizes, SVG coordinates, relative paths, alternative text, responsive layout, and source notes.

Starting point

Before you start

Your completed css-profile project from the CSS and visual-design lessons.
VS Code, Git, a GitHub account, a current browser, and an image editor that can crop, resize, and export WebP.
A source image that you created or have permission to reuse. The lesson workspace image is a valid fallback.
The web-images and web-graphics lessons for reference.

Current state: You have a responsive profile and worked examples of raster and vector assets. You do not yet have an independently planned asset set with its own source record and verified page integration.
First action: Create an empty folder named page-assets. Copy the visible files and asset folders from css-profile into it without copying .git, then open page-assets in VS Code.
First checkpoint: page-assets has its own repository and private GitHub remote. The baseline page works, and asset-notes.md names the page purpose plus the two assets you plan to create.
Help trigger: Open the assistance for the current checkpoint or ask for help if you cannot verify reuse permission, an export changes aspect ratio, an SVG reports a parsing error, an image path breaks, or the page begins to overflow.

Requirements

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

Required deliverables

The page-assets folder contains index.html, styles.css, source-images, assets/images, assets/graphics, and asset-notes.md.
source-images contains the unchanged raster source. assets/images contains two WebP exports of the selected crop.
assets/graphics contains one original SVG graphic that supports the profile page.
index.html displays the responsive raster image and SVG graphic in intentional locations.

Raster image behavior

The two WebP files use the same crop and aspect ratio. One candidate is 480 pixels wide and the other is 960 pixels wide.
Each WebP file is smaller than the unchanged source and does not show unacceptable compression artifacts at its intended rendered size.
One img element uses src, srcset, sizes, width, height, and a context-appropriate alt value.
The browser can request a WebP candidate without using the source file as the published fallback.

SVG and accessibility

The SVG has a viewBox and uses at least three authored vector elements, including one shape and one path or line.
The SVG does not contain a script, external resource, editor metadata, or embedded raster image.
Each asset has a text alternative that matches its use. Decorative duplication uses an empty alt value.
Both assets remain distinguishable against their page surfaces and do not carry meaning through color alone.
Keyboard focus stays visible and is not covered, clipped, or replaced by the new assets.

Responsive behavior and code quality

The images preserve their aspect ratios and do not overflow their containing blocks.
Required content remains available at about 320 CSS pixels and at 200% browser zoom without unintended horizontal page scroll.
Repeated visual values use the existing CSS custom properties and reusable classes where those roles already exist.
Asset file names are lowercase, descriptive, and contain no spaces.

Documentation

asset-notes.md records the purpose, source, creator or publisher when known, source URL when applicable, license or permission, and modifications for each asset.
asset-notes.md records the intrinsic dimensions and file size of the source and both raster exports.
asset-notes.md explains two visual decisions and gives the final wide, narrow, zoom, keyboard, and image-request test results.

Version control and GitHub

page-assets is a separate Git repository on main with its own private GitHub repository connected as origin.
The repository does not contain the css-profile .git folder or use the css-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 profile subject, safe source image, crop, SVG concept, colors, placement, and exact responsive composition.
You can use the lesson source image when source selection would block the technical work. Your crop, file names, graphic, placement, and visual explanation must still be your own.

Out of scope

The required result does not need JavaScript, animation, a drawing application, a custom font, a public deployment, or a third raster size.
The assignment does not require a logo for a real organization or imitation of an existing brand.
You do not need to complete an optional extension.

Definition of done

The required assignment is complete when every applicable requirement is met, the four required commits are on the private GitHub repository, the self-check passes, asset-notes.md contains the final evidence, and you can explain why each asset belongs on the page and how the browser receives an appropriate file.

Checkpoint 1: Preserve the baseline and plan the asset roles

Create an empty folder named page-assets inside your Level 1 projects folder.
Copy the visible project files and asset folders from css-profile into page-assets. Do not copy the hidden .git folder.
Open page-assets as the workspace root in VS Code.
Open index.html in the browser. Confirm that the page still matches the original working state.
Create source-images, assets/images, and assets/graphics if they do not exist.
Create asset-notes.md in the project root.
Write the page purpose and one role for each planned asset.

Copying the project contents without .git preserves the working page without connecting this assignment to the css-profile history or remote.

Use this file structure:

Directorypage-assets/
- Directorysource-images/
  - selected-source.ext
- Directoryassets/
  - Directoryimages/
    selected-480.webp
    selected-960.webp
  - Directorygraphics/
    profile-mark.svg
- asset-notes.md
- index.html
- styles.css

Add this planning block to asset-notes.md:

# Page asset notes

## Page purpose

[State what the profile helps a visitor understand or do.]

## Planned asset roles

- Raster image: [content, page location, and why the image helps]
- SVG graphic: [concept, page location, and why vector storage fits]

## Source and permission

- Source file:
- Creator or publisher:
- Source URL, when applicable:
- License or permission:
- Planned modifications:

Copy the unchanged source into source-images. Record its original file name, intrinsic dimensions, and file size before you edit it.

Create the project repository

From the page-assets workspace root, run:

git init -b main
git add index.html styles.css asset-notes.md source-images
git diff --staged
git diff --staged --stat
git commit -m "Create page asset project"

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

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

Run git remote -v. Confirm that origin points to page-assets, not css-profile. Reload GitHub and confirm that the first commit contains the planned baseline files.

Check

The baseline page still works. The source file exists in source-images, the two output folders are ready, and asset-notes.md states two different asset roles plus verified reuse terms.

Assistance for Checkpoint 1

Assistance 1 — Identify the current files and first decisions

Work only in the page-assets copy. First confirm that index.html and styles.css still connect. Then create the four empty destinations from the file tree. The first decision is what each asset helps a visitor understand; color and detailed styling come later.

Assistance 2 — Separate source evidence from visual preference

Verify who created the source and which license or permission applies before you crop it. A source URL proves where a file appeared, but it does not by itself grant reuse. If the terms remain unclear, select another source or use the lesson image.

Checkpoint: The baseline and asset plan are stable

What now works: The profile still works, the source is preserved, the output folders exist, asset-notes.md records two useful asset roles plus reuse evidence, and the first commit is on the private page-assets repository.
Files changed: page-assets/index.html, page-assets/styles.css, page-assets/asset-notes.md, page-assets/source-images/
What remains: Create and inspect the two WebP raster candidates.
Next action: Open the unchanged source in the image editor and choose one crop that supports the planned raster role.
If it does not work: If the page changes, compare only the relative stylesheet and asset paths with the source project. Then inspect git status and the origin URL before you edit an image.

This is a safe stopping point. Record the chosen crop ratio and the exact next export if you stop here.

Record each working checkpoint with Git

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

Working state	Required commit message
Baseline, plan, and source are ready	`Create page asset project`
Responsive raster candidates pass inspection	`Prepare responsive raster assets`
Original SVG renders correctly	`Create profile SVG asset`
Both asset types pass final page tests	`Integrate and test page assets`

For Checkpoints 2–4, inspect and push the intended project state:

git status
git diff
git add index.html styles.css asset-notes.md source-images assets
git diff --staged
git diff --staged --stat
git commit -m "CHECKPOINT MESSAGE"
git push

Replace the placeholder with the matching message from the table. Git can show text changes line by line, but it reports image and other binary changes by file. Confirm each staged file name and use git diff --staged --stat to inspect the staged set before you commit.

Checkpoint 2: Create the responsive raster set

Use one crop for both output files. Choose an aspect ratio that fits the intended page position. Do not stretch the crop to reach a target size.

Crop the source to the selected aspect ratio.
Resize the cropped result to 480 pixels wide. Let the editor calculate the proportional height.
Export it as WebP with a lowercase descriptive name that ends in -480.webp.
Resize the same crop to 960 pixels wide and export the matching -960.webp file.
Put both files in assets/images.
Inspect each export at its intended rendered size and at 100% image zoom.
Record dimensions, file sizes, format, crop, and compression settings in asset-notes.md.

Use a comparison table:

## Raster preparation record

| File | Dimensions | File size | Format | Use |
| --- | ---: | ---: | --- | --- |
| source-images/[source] | [width × height] | [size] | [format] | Preserved source |
| assets/images/[name]-480.webp | [width × height] | [size] | WebP | Narrow or lower-density candidate |
| assets/images/[name]-960.webp | [width × height] | [size] | WebP | Wide or higher-density candidate |

Crop: [ratio and subject retained]
Compression setting: [tool and setting]
Visible artifact check: [result]

Check

Both output files open as images, have the same aspect ratio, use widths of 480 and 960 pixels, and are smaller than the unchanged source. Neither file shows a crop error, strong blocking, color banding, or lost subject detail at its intended size.

Assistance for Checkpoint 2

Assistance 2 — Diagnose a mismatched or distorted export

Compare the width-to-height relationship of both files. If the ratios differ, return to the saved crop and export both sizes again with proportional resizing enabled. Do not repair a ratio mismatch with CSS height and width values.

Assistance 3 — Use a stable raster workflow

Complete one state at a time: preserve source, choose crop, export 480, inspect, export 960, inspect, record evidence. If an output becomes larger than the source, confirm the format and compression setting before reducing dimensions again.

Checkpoint: The responsive raster candidates are ready

What now works: Two WebP candidates share one crop, meet the required widths, remain visually acceptable, and have complete preparation evidence.
Files changed: page-assets/assets/images/, page-assets/asset-notes.md
What remains: Create an original vector graphic for a different page role.
Next action: Create assets/graphics/profile-mark.svg and add its root svg element with a viewBox.
If it does not work: If a file fails inspection, return to the unchanged source or saved crop and repeat one export. Do not overwrite the source.

Checkpoint 3: Create the SVG graphic

Choose a graphic role that differs from the photograph. Valid roles include a project-category mark, profile motif, section marker, or small illustration built from geometric elements.

The required graphic must use:

one root svg element with a viewBox;
a root title and desc for the standalone file;
at least three authored visual elements;
at least one basic shape such as rect or circle; and
at least one path or line.

You can use the 320 × 180 lesson coordinate system or choose another viewBox that fits your concept. Keep every important shape inside the viewBox.

Check

Open the SVG file directly in the browser. The browser renders the complete graphic without an XML error. Resize the browser or place the file in an img preview at a much larger size. Edges remain sharp and the intended shapes remain inside the frame.

Assistance for Checkpoint 3

Assistance 1 — Choose a bounded SVG concept

Use one noun and one action as the concept, such as “browser window with focus point” or “project card with connection line.” Limit the first version to one background, two or three foreground shapes, and one line or path.

Assistance 2 — Locate an SVG parsing or visibility problem

If the browser reports XML text, inspect the first reported line and then check matching quotes and closing tags. If no error appears but a shape is absent, compare its coordinates with the viewBox and check whether its fill or stroke matches the background.

Assistance 3 — Build the graphic from back to front

Add and test the root plus title and description. Then add the background shape, the main foreground shape, a secondary shape, and the line or path. Save and reload after each visible addition.

Checkpoint: The original SVG renders at different sizes

What now works: The SVG has descriptive standalone text, a valid coordinate system, at least three authored elements, and a sharp complete result at small and large sizes.
Files changed: page-assets/assets/graphics/profile-mark.svg
What remains: Integrate both asset types and verify the complete responsive page.
Next action: Choose the raster image location in index.html and add one img element with responsive source information.
If it does not work: Open profile-mark.svg directly, repair the first browser-reported parsing issue, and reload before adding another element.

This is a safe stopping point. Record the first integration location and whether its asset is informative or decorative.

Checkpoint 4: Integrate and test the complete asset set

Add the raster image near content that gives it context. Use one img element with:

src set to the smaller WebP fallback;
srcset containing the 480w and 960w candidates;
sizes based on the image’s real rendered layout;
intrinsic width and height from the fallback candidate; and
an alt value that states the useful image information in this context.

Add the SVG through a second img element. Use a useful alt value when the graphic communicates information. Use alt="" when nearby text already communicates the same information and the graphic adds no separate meaning.

In styles.css, make both asset types flexible without replacing their intrinsic ratio:

img {
  display: block;
  max-width: 100%;
  height: auto;
}

Adapt the selector if a global rule would affect an image with a different requirement.

Run the final tests

Load the page from a closed tab and confirm that all text, styles, and assets appear.
Inspect the raster request in browser developer tools. Confirm that the requested file is one of the WebP candidates.
Disable images or temporarily change each src path. Confirm that informative alternative text communicates the intended information.
Restore the paths and use the page with the keyboard. Confirm that asset placement does not cover or clip focus.
Test at a wide viewport, about 320 CSS pixels, and 200% browser zoom.
Confirm that neither asset distorts or creates unintended horizontal page scroll.
Compare the page with the purpose statement. Confirm that both assets support the reading order instead of competing with the primary content.
Record the test conditions and results in asset-notes.md.

Assistance for Checkpoint 4

Assistance 2 — Trace a broken relative asset path

Start from the location of index.html. Follow the src path one folder segment at a time. Confirm exact spelling, capitalization, extension, and hyphen use. A valid CSS selector cannot repair a missing file path.

Assistance 3 — Verify one integration layer at a time

First make the smaller raster file appear through src. Then add srcset and sizes. Next add the SVG through its own img. After both appear, add layout styles and run the narrow, zoom, and keyboard checks.

Checkpoint: The asset set works in the complete page

What now works: The page displays both asset types, requests a responsive WebP candidate, preserves aspect ratios, exposes appropriate text alternatives, and passes wide, narrow, zoom, and keyboard checks.
Files changed: page-assets/index.html, page-assets/styles.css, page-assets/asset-notes.md, page-assets/assets/
What remains: Complete the self-check and prepare the required project for review.
Next action: Run every self-check item from a closed browser tab and record any repair plus retest in asset-notes.md.
If it does not work: Restore the last passing path and layout state, reproduce one failure in one test condition, and change one likely cause before retesting the same condition.

Self-check

Complete these checks against the required result.

Open the unchanged source and both WebP files. Confirm the required widths, matching crop ratio, smaller output sizes, and acceptable visible quality.
Open the SVG directly. Confirm that it renders without a parsing error and stays sharp when enlarged.
Inspect both img elements. Confirm that required source, dimension, responsive-source, and alternative-text attributes match each asset use.
Reload from a closed tab with developer tools recording network requests. Confirm that the page requests a WebP candidate and not the preserved source.
Use the page with the keyboard and confirm that focus remains visible and no asset blocks an interactive element.
Test the page at a wide viewport, about 320 CSS pixels, and 200% zoom. Confirm that content remains available without distortion, clipping, overlap, or unintended horizontal page scroll.
Read asset-notes.md and confirm that every source, permission, modification, file property, visual decision, and test result is specific and accurate.
Compare the page with its stated purpose. Confirm that the raster image and SVG have different useful roles in one coherent visual hierarchy.
Run git log --oneline and confirm that it contains the four required checkpoint messages.
Run git status and confirm that the working tree is clean. Confirm that the private GitHub repository contains the latest commit.

Assignment-wide assistance

The checkpoint sections contain support for their specific states. Use the deeper support below when you need a shared integration structure.

Assistance 4 — Review a partial asset integration

This structure leaves the source names, alternative text, and layout estimate for you to complete:

<figure class="profile-visual">
  <img
    src="assets/images/[name]-480.webp"
    srcset="assets/images/[name]-480.webp 480w, assets/images/[name]-960.webp 960w"
    sizes="[describe the rendered width]"
    width="480"
    height="[proportional height]"
    alt="[useful information in this page context]"
  >
  <figcaption>[Connect the image to the nearby profile content.]</figcaption>
</figure>

<img
  class="profile-mark"
  src="assets/graphics/profile-mark.svg"
  width="320"
  height="180"
  alt="[useful text or an empty value]"
>

Replace every bracketed field. Calculate sizes from the real layout rather than copying a value from the lesson.

Assistance 5 — Review one complete reference integrationExample solution

This is one complete integration for a 3:2 workspace photograph that fills a 40rem content area and a decorative project mark. It does not create the required image files or replace your source and license record.

<figure class="profile-visual">
  <img
    src="assets/images/workspace-480.webp"
    srcset="assets/images/workspace-480.webp 480w, assets/images/workspace-960.webp 960w"
    sizes="(min-width: 48rem) 40rem, calc(100vw - 2rem)"
    width="480"
    height="320"
    alt="Laptop, notebook, pen, and headphones arranged on a study desk"
  >
  <figcaption>A workspace prepared for focused web-development study.</figcaption>
</figure>

<img
  class="profile-mark"
  src="assets/graphics/profile-mark.svg"
  width="320"
  height="180"
  alt=""
>

.profile-visual,
.profile-mark {
  max-width: 40rem;
  margin-inline: auto;
}

.profile-visual img,
.profile-mark {
  display: block;
  width: 100%;
  height: auto;
}

The photograph has informative alternative text. The SVG has an empty alternative because this example treats it as a repeated decorative mark beside an existing project title.

Optional extensions

The required assignment is complete when it meets every requirement and passes the self-check. The routes below do not affect completion. Choose any route that provides a useful challenge.

Add an AVIF comparison. Export an AVIF candidate at one matching size. Compare file size, visible quality, browser support, and the HTML needed to provide format alternatives with picture.
Add an art-directed crop. Create a distinct narrow crop because the wide crop loses important information at small sizes. Use picture and media conditions, then test both crop transitions.
Create a reusable SVG symbol set. Build two related graphics with a shared coordinate and color system. Document which shapes repeat and how the set stays consistent.
Measure loading behavior. Use developer tools with disabled cache and a documented network condition. Compare transferred bytes and image timing before and after the prepared asset set without claiming results outside the tested condition.

Safe stopping point

At the end of a work session, add this note to asset-notes.md:

## Resume here

- What works:
- What remains:
- Next action:
- Required browser, file, or editor state:
- Next test and expected result:

Keep the last passing browser state available. When you resume, run that state once before you continue to the recorded next action.