Day 5 — Case Study: Landing Page

⏱️ Time needed: 45–60 minutes

🎯 Goal: Build the case study page for your landing page project.

📍 What’s Happening Today

Same structure as yesterday, different project. You’re documenting your landing page build — but this time, the story is about growth. You went from building a simple tool to building a full marketing page with animations, forms, accessibility, and SEO.

🚀 Let’s Go

Build the case study page for my Landing Page project (projects/landing-page.html). Use the same structure as the palette generator case study:
- Same navigation
- A large hero/header area with:
  - Title: "Palette Generator — Landing Page"
  - Subtitle: "A marketing page that sells the tool I built"
  - Tags: "Landing Page • Responsive • Accessible • 2 Week Build"
  - A large screenshot placeholder of the landing page
- Link to global.css and project.css (reuse the same case study styles)

Prompt 2: Overview & Problem

Add the case study content in the same narrow, readable layout:

Section: "Overview"
"A single-page marketing site for my Palette Generator tool. Features a hero section, feature grid, step-by-step walkthrough, live embedded demo, testimonials, email signup, and full responsive design with scroll-triggered animations."

Section: "The Challenge"
"I had a working tool but no way to present it to the world. I needed a page that explained what it does, showed it in action, and convinced visitors to try it — all while looking polished and professional."

Prompt 3: Key Sections Showcase

Add a "Page Sections" area that showcases the different parts of the landing page. Display 4-5 sections as a vertical scroll of full-width (or near-full-width) screenshots with captions:

1. "Hero Section" — "Bold headline, clear value proposition, and a strong call-to-action above the fold."
2. "Features Grid" — "Four key benefits presented as scannable cards with icons."
3. "Live Demo" — "The actual tool embedded in the page — visitors can try it without leaving."
4. "Social Proof" — "Testimonials and stats that build trust and credibility."
5. "Email Signup" — "A validated form with real-time feedback and success states."

Use placeholder colored rectangles for now. Each should be labeled clearly. Stack them vertically with generous spacing between.

Prompt 4: What I Learned Section

This case study has a richer “lessons learned” angle because Phase 2 covered more ground:

Add a "What I Learned" section with a grid or list of key takeaways:

- "Responsive design" — "One layout that adapts to every screen size, from phone to desktop."
- "Accessibility matters" — "Semantic HTML, keyboard navigation, and motion preferences aren't extras — they're fundamentals."
- "Performance is a feature" — "Lazy loading, deferred scripts, and optimized images make the difference between a page that feels fast and one that doesn't."
- "SEO & social sharing" — "A page that looks great when shared gets shared more."
- "Scroll animations" — "Motion should enhance, not distract. Less is more."

Style these as a clean 2-column grid of short insight cards, or a simple list with bold titles and one-line descriptions.

Prompt 5: Process & Outcome

Add the process and outcome sections:

"The Process"
"Built over two weeks in daily 30-45 minute sessions. Each day focused on one section or skill — from the hero section on Day 1 to deployment on Day 13. The AI handled the implementation while I focused on design decisions, feedback, and refinement."

Add a callout box:
"14 sessions • 7 page sections • Responsive + Accessible + SEO-optimized"

"The Result"
- Button: "Visit the landing page →" (links to deployed landing page)
- Button: "Try the tool →" (links to deployed palette generator)
- Reflection: "This project taught me that building a polished web page is less about knowing code and more about knowing what good looks like — and being able to articulate it clearly."

Same footer as all pages.

Reusing Patterns

Notice how this page uses the same layout structure as your palette generator case study. That’s intentional — consistency across case studies makes your portfolio feel cohesive. The content changes, but the container stays the same.

In code terms, you’re reusing the same CSS (project.css) for both case study pages. This is the same principle as using a shared template in Figma — define the structure once, fill it with different content.

🎁 Bonus: Side-by-Side Comparison

Add a small section comparing the two projects:

"From Tool to Marketing"
Show a side-by-side (or before/after style) comparison:
- Left: a small screenshot of the palette generator (the product)
- Right: a small screenshot of the landing page (the marketing)
- Caption: "First I built the tool. Then I built the page that sells it."

This reinforces the narrative arc of your portfolio — you don't just design, you think about the full picture.

💡 What You Learned Today

How to reuse page structures (same layout, different content) for consistency
How to document a more complex project with multiple sections
How to frame “what I learned” as a portfolio asset (showing growth)
That case studies are about storytelling, not just screenshots

⏭️ Tomorrow

You’ll add interactive elements to your project pages — image galleries, hover details, and transitions.

🎯 Checkpoint: Your landing page case study should follow the same structure as the palette generator one — hero, overview, sections showcase, lessons learned, and links to live projects. If the two case study pages look inconsistent, try: “My two case study pages have slightly different styling. Can you make sure they both use the same project.css and have matching heading sizes, spacing, and layout patterns?”

Day 5 — Case Study: Landing Page