frontend-academy

Landing Page Project

A responsive product landing page using HTML, CSS, Flexbox, and Grid.

Learning Objectives

• Semantic HTML structure
• CSS Flexbox for navigation and sections
• CSS Grid for layout
• Responsive design with media queries
• Modern CSS techniques
• SCSS variables and nesting

Project Requirements

Create a complete landing page with:

1. Header/Navigation
   • Logo
   • Navigation menu (responsive)
   • Call-to-action button
2. Hero Section
   • Large heading
   • Subheading/description
   • Hero image or background
   • Primary CTA button
3. Features Section
   • 3-6 feature cards
   • Icons or images
   • Brief descriptions
4. Testimonials (optional)
   • Customer quotes
   • Names and photos
5. Footer
   • Social media links
   • Copyright notice
   • Additional links

Design Requirements

• Mobile-first responsive design
• Clean, modern aesthetic
• Consistent color scheme
• Proper typography hierarchy
• Smooth animations/transitions

Technologies

• HTML5 (semantic elements)
• CSS3 (Flexbox, Grid, animations)
• SCSS (optional but recommended)

Setup Instructions

1. Create index.html file
2. Create style.css (or style.scss)
3. Create assets/ folder for images
4. Open index.html in browser

Extension Ideas

• Add smooth scroll navigation
• Implement a hamburger menu for mobile
• Add form validation for email signup
• Use CSS Grid for the entire layout
• Add loading animations
• Implement dark mode toggle

Resources

• MDN: Responsive Design
• CSS Tricks: Flexbox Guide
• CSS Tricks: Grid Guide