GRPH 325 · Project 2

Build a responsive dog website

In two class periods, write a one-page website about dogs from scratch in VS Code, one line of HTML and CSS at a time.

You will build Happy Tails, a friendly one-page guide to dogs. It has a header with navigation, a large welcome photo, three breed cards, a care list, an adoption link and a contact section, and it rearranges itself to fit phones, tablets and desktops.

All of the words are written for you in the content kit, so you can spend your time on what a designer controls: structure (HTML) and design (CSS). You create every file yourself. You may type the code or copy it, but read the explanation after every code block: each step explains what the code means and why it is there, and understanding it is the point of the project.

What’s new in this project

In the VS Code Warm-Up you built one simple page with its styles inside a <style> element. This project builds on that:

  • A real page layout with semantic sections: header, nav, main, section, article and footer
  • Classes and IDs, so CSS can style specific parts of the page
  • Three kinds of links: same-page, external and email
  • An external style sheet, css/styles.css, connected with <link>
  • Design tokens (CSS custom properties), Google Fonts and rem units
  • Flexbox for the navigation and CSS grid for the cards
  • Responsive design: a media query, tested in Chrome DevTools

Steps marked Review (1.2, 1.3 and part of 2.1) cover what you learned in the warm-up. Skim them, then slow down for the new material.

Start with step 1.1See the finished example

What you will learn

  1. Create and organize a website's files and folders in VS Code.
  2. Structure a page with semantic HTML: headings, paragraphs, lists, links, images and horizontal rules.
  3. Write alt text that describes an image to someone who cannot see it.
  4. Style a page with CSS: color, typography, spacing and layout.
  5. Make a layout responsive with fluid images, flexible grids and a media query.
  6. Apply design principles (hierarchy, contrast, alignment and whitespace) to a web page.

What you will hand in

ItemDetails
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 screenshotsYour page at phone width (375px) and desktop width (1280px)
  • LastnameFirstInitial_dog-site_mobile.png
  • LastnameFirstInitial_dog-site_desktop.png

The full checklist and rubric are in step 2.6.

© Created by Sara Rosenstock, Marietta College Graphic Design.