/prime-pw-week-5-assignment-part-2

Primary LanguageHTML

Tier 1 Week 5 - Part 2

This week, we'll be exploring objects by creating an application to help maintain a record collection. We will be creating objects using object literal syntax.

Topics Covered

  • objects
  • HTML & CSS

Assignment - Practice with HTML & CSS

Time to make our index.html page look cool!

Add all CSS through a Stylesheet. Do not use inline styles.

Update the HTML:

  • Place the existing h1 inside a header element.
  • Add an h2 element into the header that says YOUR NAME's Record Shop.
  • Place the existing p inside a main element.

Add a Stylesheet:

  • Create a stylesheet.css file and source it into the HTML file.
  • Give the header a dark background color and choose a light color for the text.
  • Center the text in the header.
  • Give the main a light grey background color.
  • Look up the CSS background-image property to learn how to use the provided record.png as the background image on your page with a relative path.
  • Look up CSS background-repeat to learn how to fill the body of the page with a repeating image.
  • Look up CSS margin and padding.
    • Give the body a margin of 0. (This removes the whitespace around the edges of the page.)
    • Give the main padding of 1em. (Curious about em? Look up CSS units.)

Here's an example of what the style could look like:

STRETCH GOAL: Use CSS style classes vs element names to do your styling, except for adding the margin to the body. That is a good thing to add to every CSS file, and it should use the body HTML tag name.

Assignment Submission

Check in your repo, then turn in your work via the Prime Academy Assignment Application at http://primeacademy.io, as usual and don't hesitate to hit up the Slack channel as needed!