Tailwind CSS Checkpoint Exercises

Overview

This repository contains two Tailwind CSS exercises focused on applying Tailwind utility classes to build responsive and visually appealing web pages.

---

🚀 Exercise 1: Personal Portfolio Webpage

📌 Project Overview

The goal of this exercise is to create a personal portfolio webpage using Tailwind CSS. This will help in mastering layout structuring, component styling, and responsiveness.

✅ Requirements

1. Header Section

• Design a header with:
  • Your name
  • A navigation menu with at least three items: Home, Projects, Contact
• Use Tailwind classes for:
  • Styling
  • Responsive behavior

2. Hero Section

• Create a hero section with:
  • A background image
  • A headline introducing yourself
• Apply Tailwind classes for:
  • Text alignment
  • Text size
  • Margins and padding

3. Skills Section

• Showcase your skills using:
  • A flexbox or grid layout
• Utilize Tailwind classes for:
  • Styling
  • Spacing

4. Projects Section

• Display a list of projects with:
  • Images
  • Titles
  • Descriptions
• Apply Tailwind classes for:
  • Card components
  • Image styling
  • Text alignment

5. Contact Form

• Include a contact form with:
  • Name field
  • Email field
  • Message field
• Use Tailwind classes for:
  • Form styling
  • Spacing
  • Responsiveness

6. Footer

• Design a footer with:
  • Social media icons
  • Copyright information
• Apply Tailwind classes for:
  • Flexbox positioning
  • Icon styling
  • Text alignment

---

🌟 Exercise 2: Blog Landing Page

📌 Project Overview

The goal of this exercise is to create a landing page for an online blog using Tailwind CSS. The focus is on structuring the layout, styling components, and enhancing the page’s visual appeal.

✅ Requirements

1. Header Section

• Design a header with:
  • Blog's name/logo
  • Navigation menu
• Use Tailwind classes for:
  • Background color
  • Text color
  • Padding

2. Featured Posts Section

• Showcase three featured blog posts with:
  • Images
  • Titles
  • Excerpts
• Utilize Tailwind classes for:
  • Card styling
  • Image layout
  • Text alignment

3. Category Section

• Display categories for blog posts in an appealing way.
• Use Tailwind classes for:
  • Badges/tags
  • Grid/flexbox layouts
  • Color styling

4. Recent Posts Section

• Display a list of recent blog posts with:
  • Titles
  • Publication dates
• Apply Tailwind classes for:
  • Text styling
  • Spacing
  • List alignment

5. Newsletter Subscription Form

• Include a subscription form with:
  • Input fields
  • Submit button
• Utilize Tailwind classes for:
  • Form styling
  • Button hover effects
  • Input field responsiveness

6. Footer

• Design a footer with:
  • Social media icons
  • Copyright information
  • Quick links
• Apply Tailwind classes for:
  • Flexbox positioning
  • Icon styling
  • Text alignment

---

📌 Technologies Used

• HTML
• Tailwind CSS
• Font Awesome (for icons)