Prompt a Landing Page
Build Your First Hero Section
A hero section is the most important part of a portfolio landing page—it's the first thing visitors see. In this lesson, you'll create a professional hero section that captures attention and makes visitors want to learn more about you.
You'll start with basic HTML and add styling using Tailwind CSS to create a modern, gradient-backed hero with a compelling headline, subtitle, and call-to-action button. This is the foundation of every great portfolio website.
Instructions
Add a hero container div with min-h-screen, gradient background (from-purple-900 to gray-900), and flex centering
Hint: Use: `<div class="min-h-screen bg-gradient-to-br from-purple-900 via-gray-900 to-gray-900 flex items-center justify-center px-4">` — this creates a full-height section with your gradient
Inside the hero, add an h1 headline with your name and a p subtitle with your title/role
Add a descriptive paragraph (p tag) with a tagline about what you do (300 chars max)
Add a CTA button with gradient styling and hover effects
Your Code
Describe what you want to build for this step and I'll write the code — then click Apply to drop it into your editor. This step: Add a hero container div with min-h-screen, gradient background (from-purple-900 to gray-900), and flex centering