Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
38 views2 pages

12 - Exercises

The document provides hints for creating a blog page layout with proper typography. It discusses using Google fonts for headings and body text, container widths, heading hierarchies, image sizing, and responsiveness. Students are pointed to a solution file and asked to review what styles may have been missed that could impact the page layout.

Uploaded by

Marko Isailovic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
38 views2 pages

12 - Exercises

The document provides hints for creating a blog page layout with proper typography. It discusses using Google fonts for headings and body text, container widths, heading hierarchies, image sizing, and responsiveness. Students are pointed to a solution file and asked to review what styles may have been missed that could impact the page layout.

Uploaded by

Marko Isailovic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Typography 1

Exercises
Blog Page
Create a page for a recipe website similar to the image below. Read the next page for
hints on typography.

codewithmosh.com
Typography 2

Hints
• Open /Solution/blog.html to see the final result.

Fonts
• Use Google Font to find two sans serif and one serif font.

• The serif font (in italic) is used for the lead paragraph before the image.

• The two sans serif fonts are used for the body text and headings.

• Reset the base font size to 62.5% so rem calculations can be easier.

• Use type-scale.com to determine the size of all headings (h1 to h6).

Container
• Add the entire content of the body in a container with the maximum width of 1140px.

• To ensure that the container is in the middle, set the horizontal margin to auto. This
way any extra space will be equally distributed to the left and right margins.

Page Elements
• Make sure the heading elements have a proper hierarchy. There must be one and
only one h1 element on the page. Don’t skip headings.

• The lead paragraph (above the image) should be slightly larger than the body text.

• You can get the image from here: https://unsplash.com/photos/C1Q3qOTlegg

• Give the image a width of 100% to make it responsive.

• Ensure everything looks good on smaller screens.

• Review my implementation. What styles did you miss? Investigate the impact of
these styles on the page layout .

codewithmosh.com

You might also like