Practice Problems

Create a new HTML file for each problem, using internal or external CSS for styling.

File Name: problem2.html
Create a short article with a title (<h1>), subtitle (<h2>), and at least two paragraphs.
Align the title center, the subtitle left, and the paragraphs justify.
Increase line-height and adjust letter-spacing to improve readability.

File Name: problem3.html
Use a web font that has multiple weights (e.g., 300, 400, 700).
Showcase each weight in different paragraphs or <span> elements.
Add a brief note explaining how the different weights affect the design feel or hierarchy.

After completing these exercises, call Mike over for feedback on your newly created HTML and CSS solutions.

File Name: problem4.html

Instructions:

HTML Setup:
- Create a standard HTML document.
- Include a <head> section that links to a Google Font of your choice (using <link> or @import).
Content:
- In the <body>, add a prominent heading (<h1>) and several paragraphs (<p>) of placeholder text.
- Optionally include a subheading (<h2>) to further demonstrate hierarchy.
CSS Styling:
- Set a default font-family for the body using the imported Google Font with appropriate fallbacks.
- Define base styles for your headings and paragraphs (e.g., font-size, line-height, letter-spacing).
- Responsive Adjustments:
  - Use CSS media queries to adjust the font-size, line-height, or text alignment for different viewport widths.
  - For example, increase the heading size and reduce paragraph font-size on smaller screens to improve readability.
Objective:
Practice using media queries to create a responsive typography system that adjusts font sizes and spacing based on the user's device, ensuring optimal readability across screen sizes.

File Name: problem5.html

Instructions:

HTML Setup:
- Create a standard HTML document.
- In the <head>, link to two different Google Fonts (for example, one for headings and one for body text).
Content:
- In the <body>, add at least one heading (<h1>) and multiple paragraphs (<p>) demonstrating body text.
- Include additional elements such as a <nav> or <footer> if you’d like to see the font pairing in a complete layout.
CSS Styling:
- Font-Family Assignment:
  - Apply one Google Font (with fallback options) to your headings (e.g., "Lato", sans-serif) and a different font to your paragraphs (e.g., "Merriweather", serif).
- Text Transform & Letter Spacing:
  - Use text-transform (e.g., uppercase for headings) and adjust letter-spacing to create visual contrast between different text elements.
- Fallbacks:
  - Ensure that each font-family declaration includes a generic family (e.g., serif or sans-serif) so that a backup is used if the custom font fails to load.
Objective:
Create a page that demonstrates effective font pairing and the use of fallbacks, while experimenting with text transforms and letter-spacing to establish a clear typographic hierarchy.

File Name: problem6.html

Instructions:

HTML Setup:
- Create a standard HTML document.
- Include a <head> section that imports a Google Font specifically for quotes (or use a distinctive font style).
Content:
- In the <body>, add a <blockquote> element containing a meaningful quote or placeholder text.
- Below the <blockquote>, include a <cite> element or a paragraph that serves as a caption/attribution for the quote.
CSS Styling:
- Blockquote Styling:
  - Apply a custom font-family (via a Google Font) and set font-style: italic; for the blockquote.
  - Adjust properties such as line-height, letter-spacing, and text-align (e.g., center or justify) to enhance readability.
  - Optionally, add a left border, padding, or margin to visually separate the blockquote from other content.
- Caption Styling:
  - Style the attribution text with a different font-weight (e.g., bold) or text-transform (e.g., uppercase) to differentiate it from the main quote.
- Responsive Consideration:
  - Optionally include media queries to adjust the typography and spacing for smaller screens.
Objective:
Develop a visually engaging blockquote section that leverages custom typography, text styling, and layout techniques to emphasize quoted text and its attribution.

Day 3: Typography in CSS—Fonts, Weights, Styles, and Alignment