Step 2.6 · Day 2: CSS design

Test and submit

Check your site the way a professional would, then hand it in.

You will work in: your whole project

Final checklist

Your ticks are saved in this browser.

Submission

Zip your folder. Right-click LastnameFirstInitial_dog-site and choose Compress (Mac) or Send to → Compressed (zipped) folder (Windows).
Upload the zip file and your two screenshots to the assignment.

Item Details

Project folder:

Item	Details
Project folder:	`LastnameFirstInitial_dog-site.zip` (compressed folder) Folder includes: index.html css/styles.css images beagle.jpg border-collie.jpg golden-retriever.jpg hero.jpg
Two screenshots	Your page at phone width (375px) and desktop width (1280px) `LastnameFirstInitial_dog-site_mobile.png` `LastnameFirstInitial_dog-site_desktop.png`

LastnameFirstInitial_dog-site.zip (compressed folder)

Folder includes:

index.html
css/styles.css
images

beagle.jpg
border-collie.jpg
golden-retriever.jpg
hero.jpg

Two screenshots

Your page at phone width (375px) and desktop width (1280px)

LastnameFirstInitial_dog-site_mobile.png
LastnameFirstInitial_dog-site_desktop.png

Rubric (50 points)

Criterion	Points	Full marks look like
HTML structure	15	Valid, semantic tags used correctly, logical heading order, tidy indentation and comments
Links, images and alt text	10	All three link types work; alt text is specific and useful; photos credited
Visual design	15	Cohesive palette and type, clear hierarchy, consistent spacing, readable contrast
Responsive layout	10	Looks intentional at phone and desktop widths, with an added design rule in the media query

If something is wrong

Problem	Fix
No styles at all	Check that `styles.css` is inside the `css` folder and that the link reads `href="css/styles.css"`.
Everything after one point looks wrong	Look for an unclosed tag in the HTML, or a missing `}` or `;` in the CSS, just above that point.
A nav link doesn’t jump	The `href="#care"` must match `id="care"` exactly, without the `#` in the id.
The fonts didn’t change	Check the Google Fonts link is in the head, and that the font name in your token is spelled exactly as on Google Fonts.
Changes don’t appear	Save the file (a white dot on the tab means unsaved changes), then refresh the Integrated Browser or external browser.

Finished early?

Add a hover effect to the cards with .card:hover { transform: translateY(-6px); } and transition: transform 0.2s; on .card. Or add a fourth breed card and see how the grid handles it.