Phase: BuildingAction Day45 minutes

Day 18: Styling with Tailwind

Tailwind lets you style by adding classes - no CSS files needed. Instead of writing `font-size: 24px`, you write `text-2xl`. It's faster and keeps everything in one place.

Today's Tasks

  1. 1Style your Header to look professional
  2. 2Add a hero section to your homepage
  3. 3Make it look good on both desktop and mobile

Prompt to Use

Make my portfolio site look professional:
1. Style the Header with a nice background and proper spacing
2. Create a hero section on the homepage with a headline, subtitle, and call-to-action button
3. Make sure it looks good on mobile too (responsive)
Use Tailwind CSS for all styling.

Expected Outcome

A styled, responsive homepage.

New Terms

TailwindUtility ClassesResponsiveMobile-first

Pro Tip

Tailwind classes like `md:` and `lg:` change styles at different screen sizes. `md:text-2xl` means "larger text on medium screens and up".

Coming Tomorrow

We'll add a contact form.