/start-13-4.en

description: "Lesson command"
chapter: "courses/aiagent/lesson03-core/module13-lp/chapter.yaml"
prerequisites: ["start-13-3"]
duration: "~30 min"
level: "intermediate"
tags: ["lp", "html", "tailwind", "implementation"]
nonInteractiveMode: deferred

🎓 Lesson 13-4: Build a Working Landing Page (HTML/CSS/JS)

📍 What You'll Do

Welcome to **Lesson 13-4: Landing Page Implementation**!

| Item | Details | |------|---------| | Goal | Convert Pencil design into a working HTML/CSS(Tailwind)/JS Landing Page | | Duration | ~30 min | | Skills Used | lp-designer, Pencil MCP (code/tailwind guidelines), cursor-ide-browser | | Prerequisites | Lesson 13-3 complete (.pen design file exists) | | Course Page | Refer to [Module 13: Landing Page/Website Design](https://ai-agent.camp/en/course/module-13) in parallel |

> **💡 Tool Info**: This lesson uses Pencil MCP. It is available in the current workspace and in Claude Code (CLI/Desktop). In some environments like Codex CLI, you may see a `request_user_input is not supported` error. In that case, refer to the "Alternative Workflow" section.

**Session flow:** 1. Retrieve code conversion guidelines 2. Create project structure 3. Implement HTML/CSS(Tailwind)/JS 4. Add responsive design and animations 5. Verify in browser

By the end of this session, a Landing Page/Website that actually works in the browser will be complete.

> **💡 Hint**: If the AI response stops midway, type "please continue" or "it stopped" to resume. Responses may pause depending on the tool, but this is not a malfunction.

---

🎯 Readiness Check

First, let's confirm everything is ready.

**AskQuestion settings:**

{
  "title": "🎯 Pre-Session Check",
  "questions": [{
    "id": "readiness",
    "prompt": "Are you ready?",
    "options": [
      {"id": "ready", "label": "Ready! Let's start"},
      {"id": "check_prereq", "label": "I want to check the prerequisites"},
      {"id": "view_html", "label": "I want to see the course page first"},
      {"id": "different_lesson", "label": "I want to go to a different lesson"}
    ]
  }]
}

(ready → Proceed to Step 1) (check_prereq → Check .pen file existence) (view_html → Show course page path) (different_lesson → Display module list)

---

🚀 Step 1: Retrieve Code Conversion Guidelines

Retrieve the guidelines for converting Pencil designs to code.

**AskQuestion settings example:**

{
  "title": "🚀 Step 1: Code Conversion Guidelines",
  "questions": [{
    "id": "tech_stack",
    "prompt": "Select the tech stack for implementation",
    "options": [
      {"id": "tailwind", "label": "HTML + Tailwind CSS (recommended, CDN)"},
      {"id": "vanilla", "label": "HTML + Vanilla CSS"},
      {"id": "react", "label": "React + Tailwind CSS"},
      {"id": "nextjs", "label": "Next.js + Tailwind CSS"}
    ]
  }]
}

**Post-selection instructions (example)**: Input:

Retrieve the code conversion guidelines from Pencil MCP.

Steps:
1. Get coding guidelines with get_guidelines(topic="code")
2. Get Tailwind-specific rules with get_guidelines(topic="tailwind")
3. Load the .pen file design with batch_get
4. Summarize the design-to-code conversion approach

Specifically check:
- Color codes (convert to Tailwind class names)
- Font sizes (mapping to text-sm, text-lg, etc.)
- Spacing/margins (mapping to p-4, m-8, etc.)
- Layout structure (usage of flex, grid)

**Expected result**: Information needed for code conversion is organized.

---

🚀 Step 2: Create Project Structure

Create the file structure for the Landing Page.

**AskQuestion settings example:**

{
  "title": "🚀 Step 2: Project Structure",
  "questions": [{
    "id": "step_action",
    "prompt": "What would you like to do with this step?",
    "options": [
      {"id": "practice", "label": "Continue"},
      {"id": "review", "label": "Just review examples"},
      {"id": "skip", "label": "Skip"}
    ]
  }]
}

**Post-selection instructions (example)**: Input:

Create the project structure for the Landing Page.

Directory creation:
mkdir -p output/lp-project/images
mkdir -p output/lp-project/css
mkdir -p output/lp-project/js

File creation:
- output/lp-project/index.html   # Main HTML
- output/lp-project/css/style.css # Custom CSS
- output/lp-project/js/main.js   # Interactions
- output/lp-project/package.json  # For Vercel deployment

package.json contents:
{
  "name": "lp-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "npx serve ."
  }
}

**Expected result**: The Landing Page project structure is created.

---

🚀 Step 3: Implement HTML/CSS(Tailwind)/JS

Implement the code based on the Pencil design.

**AskQuestion settings example:**

{
  "title": "🚀 Step 3: Code Implementation",
  "questions": [{
    "id": "step_action",
    "prompt": "What would you like to do with this step?",
    "options": [
      {"id": "practice", "label": "Continue"},
      {"id": "review", "label": "Just review examples"},
      {"id": "skip", "label": "Skip"}
    ]
  }]
}

**Post-selection instructions (example)**: Input:

Implement output/lp-project/index.html based on the Pencil .pen file
and output/lp-brief.md.

Requirements:
1. Use Tailwind CSS CDN
   <script src="https://cdn.tailwindcss.com"></script>

2. Section structure (based on output/lp-brief.md):
   - Header: Logo + Nav + CTA button (sticky header)
   - Hero: Headline + Subheadline + CTA + Hero image
   - Pain Points: 3-column icon cards
   - Solution: 2-column (text + image)
   - Features: 3-4 column feature cards
   - Social Proof: Testimonials (carousel or grid)
   - FAQ: Accordion format
   - Final CTA: CTA section with background color
   - Footer: Link groups + copyright

3. Faithful design reproduction:
   - Use colors and fonts from the Pencil style guide
   - Match spacing and margins to the design
   - Button styles (rounded corners, hover effects)

4. Responsive design:
   - Mobile-first (sm: → md: → lg:)
   - 1 column on