8.3 Homework/Practice

Create a Landing Page with Styled Headers and Body Text

Step 1:

Create a new HTML file (landing-page.html) and design a simple landing page structure with a header, subheader, and body text.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Landing Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      padding: 20px;
      background-color: #f4f4f4;
    }
    h1 {
      font-family: 'Poppins', sans-serif;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: #2c3e50;
      text-align: center;
    }
    h2 {
      font-family: 'Poppins', sans-serif;
      text-transform: capitalize;
      color: #34495e;
      margin-bottom: 20px;
    }
    p {
      font-size: 16px;
      line-height: 1.8;
      color: #555;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Landing Page</h1>
  <h2>Subheading Goes Here</h2>
  <p>This landing page is an example of how you can style text using CSS typography techniques. We use various Google Fonts and different text properties such as text transformation, spacing, and alignment to enhance the page design.</p>
</body>
</html>

Step 2:
- Experiment with Text Alignments:
  - Align the heading to the center, and align paragraphs to the left or justify them. Use text-align: justify; for better spacing of longer paragraphs.
Step 3:
- Text Transformations:
  - Apply different text transformations for the headings (e.g., uppercase, capitalize) and adjust spacing using letter-spacing and word-spacing properties.
Challenge:
- Use Google Fonts for a more customized look and feel. Try using one serif font for headings and a sans-serif font for the body text to create visual contrast.

These activities and homework will allow students to practice CSS typography techniques such as font styling, text formatting, and alignment. They will learn to use Google Fonts and apply spacing and transformation properties for polished, professional web layouts.

Previous8.2 Student Activity NextLecture_9_CSS Flexbox & Responsive Design

Last updated 1 year ago

hashtagCreate a Landing Page with Styled Headers and Body Text

Create a Landing Page with Styled Headers and Body Text