🎯 Task Description (This is for Practice)
Build a simple homepage for a fictional tech startup.
🧪 Difficulty Level
Intermediate (Test Your Skills)
⏱ Estimated Time
1–2 Hours
📦 Prerequisites
- Basic HTML
- CSS Flexbox
- Responsive Design basics
👉 This makes your post:
- More structured
- More professional
- Better for SEO
📌 Requirements
1️⃣ Header Section
- Logo on left
- Navigation links on right
- 4 menu items
2️⃣ Hero Section
- Large heading
- Short description
- One call-to-action button
3️⃣ Features Section
- 3 feature cards in a row
- Each card contains:
- Title
- Short paragraph
4️⃣ Testimonials Section
- 2 customer testimonials
- Name + short review
5️⃣ Footer
- Copyright text
- 2–3 links
🎯 Expected Output (What Your Final Design Should Look Like)
After completing this challenge, your homepage should look like a clean and modern tech startup website with clearly structured sections.
🧩 Layout Overview
- A top header with logo on the left and navigation menu on the right
- A hero section with a bold headline, short description, and a clear call-to-action button
- A features section displaying 3 cards in a row with proper spacing and alignment
- A testimonials section showing customer feedback in a clean layout
- A footer with simple links and copyright text
🎨 Design Rules
- Clean and modern UI (not cluttered)
- Proper spacing between sections
- Consistent font sizes and colors
- Buttons should have hover effects
- Cards should have padding, border-radius, and shadow (optional)
📱 Responsiveness
- Layout should adapt for mobile devices
- Sections should stack vertically on smaller screens
- Navigation should remain usable and clean
🧠 Restrictions
- No copying from previous projects
- No ChatGPT assistance
- No external CSS frameworks
- Must be written from scratch
⚡ User Experience
- Easy to read content
- Clear visual hierarchy (heading → subheading → content)
- Proper alignment and spacing throughout the page
🎯 Goal
Students must:
- Plan layout first
- Write semantic HTML
- Apply clean CSS
- Use best practices
- Make it responsive
You can visit the homepage of Div PHP Tutorials to observe how different sections are structured and arranged.
Do not copy the design exactly — instead, understand how the hero section, feature blocks, categories, and call-to-action areas are organized.
If you can complete this project without any help, it means you have built a strong foundation and you are on the path to becoming a skilled website designer.