chevron_left View All Deliverables subject View Related Content

Assignment 4

Responsive Type Hierarchy

Create a responsive type hierarchy that helps visually organize content on the page.

Submission

Push your completed deliverable to your GitHub deliverable repository.

Due: Sun Oct 1, 2023

Screenshots

open_in_new

Responsive Sizes

Instructions

In your deliverables repository, create a 04-type-hierarchy folder within the assignments folder.

Recreate the type hierarchy demonstrated in the video below. You can also view screenshots of each size here (opens new window). A couple things to note when completing the assigning:

• Make sure to use proper HTML tags for the appropriate headings and other elements.
• Type styling should be applied as default styling onto the tags, not with classes
• Make use of .container like we did in class!

Styling

Make sure to include the CSS Reset!

• Colors
  • Brand Secondary: #36BF7F
  • Brand Accent: #d96666
• Font: Roboto, sans-serif (Google Fonts)
  • Font should be applied universally to all elements, you should only need to apply it once to a single element to accomplish this.
• Container width: 45em
• Type scale
  • use type-scale.com (opens new window)
  • 3 different scales are used.
  • Play around to find scales that work, they don't have to be exact (hint: the scales are smaller than you might think).

Submission

Submit this assignment by pushing your code to your mad9013-deliverables repository with the commit message Complete 04-type-hierarchy assignment.

A reminder of the git commands:

git add -A
git commit -m "Complete 04-type-hierarchy assignment"
git push