Day 16 - Midterm & Landing Page

Day 16: Midterm & Landing Page Project

Work Day 📝đŸ’ģ

CSCI 3403 - Web Programming

Week 8, Class 16

Today's Schedule:

  • ⏰ First 30 minutes: Midterm Exam
  • 🚀 Remainder: Landing Page Project Work

Midterm Quick Reference 📚

CSS Property Format:

selector {
  property: value;
  another-property: value;
}

Common CSS Properties:

  • color, background-color, font-size
  • margin, padding, border
  • display, flex-direction, justify-content

HTML Structure:

<tag attribute="value">Content</tag>

Landing Page Project 🎨

Creating a Complete Web Page from Design

Project Goal:

Build an entire web page from provided design images

  • 📐 Match the design (doesn't need to be pixel-perfect)
  • đŸŽ¯ Practice HTML & CSS skills
  • 🚀 Deploy to GitHub Pages
  • ✨ Feel free to customize content!
Resources:
  • Design Image 1: Full website layout
  • Design Image 2: Colors and fonts guide

What You're Building đŸ–ŧī¸

4 Main Sections + Footer

  1. Hero Section: Eye-catching header with main message
  2. Information Section: Four info cards with images
  3. Quote Section: Inspirational quote or testimonial
  4. Call-to-Action: Sign up box
  5. Footer: Copyright information

Step 1: Project Setup 🚀

GitHub Repository Setup:

mkdir landing-page
cd landing-page
git init
touch index.html style.css README.md

Create Repository on GitHub:

  1. Go to GitHub.com
  2. Click "New Repository"
  3. Name it "landing-page"
  4. Leave it public, don't initialize with README
  5. Follow the commands to push existing repository

Step 2: HTML Structure 🏗ī¸

Start with Semantic HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Awesome Landing Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Header/Nav -->
  <!-- Hero Section -->
  <!-- Information Section -->
  <!-- Quote Section -->
  <!-- CTA Section -->
  <!-- Footer -->
</body>
</html>

Building the Hero Section đŸĻ¸

<div class="hero">
  <nav>
    <div class="logo">Header Logo</div>
    <ul class="nav-links">
      <li><a href="#">header link one</a></li>
      <li><a href="#">header link two</a></li>
      <li><a href="#">header link three</a></li>
    </ul>
  </nav>
  <div class="hero-content">
    <div class="hero-text">
      <h1>This website is awesome</h1>
      <p>This website has some subtext...</p>
      <button>Sign up</button>
    </div>
    <img src="placeholder.jpg" alt="placeholder">
  </div>
</div>

CSS Flexbox Strategy đŸ“Ļ

Your Best Friend for Layout

Navigation Bar:

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Hero Content:

.hero-content {
  display: flex;
  gap: 50px;
  align-items: center;
}

Information Section ℹī¸

Four Card Layout

<div class="info-section">
  <h2>Some random information.</h2>
  <div class="cards-container">
    <div class="card">
      <div class="card-image"></div>
      <p>this is some subtext under an illustration or image</p>
    </div>
    <!-- Repeat for 4 cards -->
  </div>
</div>
CSS Tip: Use display: flex and flex-wrap: wrap for responsive cards!

Recommended Workflow ⚡

One Section at a Time

1ī¸âƒŖ HTML First

Get all content on the page for one section

2ī¸âƒŖ CSS Second

Style that section before moving on

3ī¸âƒŖ Test & Adjust

Check in browser, make tweaks

4ī¸âƒŖ Commit Changes

Git commit after each section works

Remember: You only need ONE CSS file for this entire project!

Design Specifications 🎨

From the Design Images

Color Palette:

  • Dark Background: #1F2937
  • Hero Main Text: #F9FAF8
  • Hero Secondary Text: #E5E7EB
  • Button Color: #3882F6
  • Quote Background: #E5E7EB

Font Suggestions:

Use system fonts or Google Fonts like Roboto

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

Common Challenges & Solutions 🔧

❌ Challenge

Images not showing

Check file paths! Use relative paths correctly

✅ Solution

Correct path structure:

images/your-image.jpg

❌ Challenge

Flexbox not working

Parent needs display: flex

✅ Solution

Apply to container:

.container { display: flex; }

Git Commit Strategy 📝

Commit Early & Often!

Good Commit Messages:

  • ✅ "Add hero section HTML structure"
  • ✅ "Style navigation bar with flexbox"
  • ✅ "Add information cards section"
  • ✅ "Fix button hover effects"
git add .
git commit -m "Add hero section with navigation"
git push origin main
Pro Tip: Commit after completing each section for easy rollback if needed!

Deploying to GitHub Pages 🌐

Making Your Site Live!

Step-by-Step:

  1. Ensure main HTML file is named index.html
  2. Push all changes to GitHub
  3. Go to repo Settings → Pages
  4. Source: Deploy from a branch
  5. Branch: main, folder: / (root)
  6. Click Save
  7. Wait 2-10 minutes

Your URL: https://[username].github.io/landing-page

Helpful Resources 💡

Quick Google Searches:

  • 🔍 "CSS rounded corners" → border-radius
  • 🔍 "CSS center div" → Flexbox solutions
  • 🔍 "CSS box shadow" → Shadow effects
  • 🔍 "CSS gradient background" → Color gradients

Free Image Resources:

  • 📷 Pexels - pexels.com
  • 📷 Unsplash - unsplash.com
  • 📷 Pixabay - pixabay.com

Remember to credit creators in your README!

Work Time Checklist ✅

Track Your Progress!

Setup

  • ☐ Create repository
  • ☐ Create index.html
  • ☐ Create style.css
  • ☐ Link CSS to HTML

Hero Section

  • ☐ Navigation bar
  • ☐ Hero content
  • ☐ Hero styling
  • ☐ Button styling

Content Sections

  • ☐ Information cards
  • ☐ Quote section
  • ☐ Call-to-action
  • ☐ Footer

Final Steps

  • ☐ Add real images
  • ☐ Customize content
  • ☐ Deploy to GitHub Pages
  • ☐ Test live site

Let's Build! 🚀

You've Got This!

Remember:

  • ✨ It doesn't need to be pixel-perfect
  • đŸŽ¯ Focus on getting it working first
  • 🎨 Make it yours with custom content
  • đŸ’Ŧ Ask questions when stuck!

Start with:

  1. Set up your Git repository
  2. Create your HTML file
  3. Add the hero section HTML
1 / 17