The best is yet to come! This challenge will help you sharpen your frontend skills and build a responsive e-commerce website from scratch.

📋 Project Overview

Welcome to the FeDallenge project! In this challenge, you'll be building a responsive e-commerce website called "Seed Woc Market" using HTML and CSS (no JavaScript). This project will help you practice essential frontend skills including:

• Building responsive layouts
• Working with CSS variables
• Creating mobile-responsive navigation
• Implementing grid and flexbox designs
• Using Font Awesome icons
• Working with forms and inputs
• Following best practices for accessibility

🎯 Project Timeline

Day	Task	Description
1	Navbar	Create a responsive navigation bar with mobile menu
2	Footer	Design a responsive footer with multiple sections
3	Homepage	Build the main product display page
4	About Page	Create an about page with company information
5	Contact Page	Build a contact page with a form
6	Categories Page	Design a categories browsing page

🗂️ File Structure

seed-woc-market/
├── index.html              # Homepage
├── css/
│   └── styles.css          # Main CSS file 
├── assets/
│   └── images/             # Product images
│       ├── image1.png
│       ├── image2.png
│       ├── image3.png
│       ├── image4.png
│       └── image5.png
└── pages/
    ├── about.html          # About page
    ├── contact.html        # Contact page
    └── categories.html     # Categories page
    

🛠️ Getting Started

1. Clone this repository
2. Review the provided designs and requirements
3. Start with the navbar on day 1
4. Follow the timeline to complete each component
5. Test your implementation across different screen sizes

📝 Daily Tasks

Day 1: Navbar

Task: Create a responsive navigation bar with a hamburger menu for mobile

On Desktop

On Mobile

Requirements:

• Fixed/sticky position at the top
• Brand logo/title
• Navigation links
• Cart and login buttons
• Mobile menu toggle using CSS-only solution
• Responsive design for different screen sizes

Concepts to explore:

• CSS Flexbox for layout
• CSS variables for color management
• Checkbox hack for mobile menu toggle
• for and id attributes for labels and inputs
• Font Awesome icons integration
• Media queries for responsive design

Day 2: Footer

On Large Devices - desktop, tablets, ipad etc

On Mobile

Task: Design a responsive footer with multiple sections

Requirements:

• About section with company information
• Quick links section
• Newsletter subscription form
• Social media icons
• Copyright information

Concepts to explore:

• CSS Grid for layout
• Flexbox for component alignment
• Form styling and input fields
• Icon styling and hover effects
• Responsive design patterns

Day 3: About Page

On Mobile

Right click and download this image to use:

Task: Create an about page with company information

Requirements:

• Company history section
• Team information
• Mission and values
• Responsive layout

Concepts to explore:

• Content layout for readability
• Using CSS Grid and Flexbox together
• Responsive typography
• Image galleries

Day 4: Homepage

Task: Build the main product display page

Requirements:

• Search bar
• Product grid with cards
• Product information display
• Responsive layout for different screen sizes

Concepts to explore:

• CSS Grid for product layout
• Card design patterns
• Image handling and aspect ratios
• Hover effects and transitions
• Responsive grid using minmax() and auto-fill

Day 5: Contact Page

Task: Build a contact page with a form

Requirements:

• Contact form with input validation
• Contact information display
• Map placeholder
• Responsive layout

Concepts to explore:

• Form styling and organization
• Input types and attributes
• Form accessibility
• Responsive form layout

Day 6: Categories Page

Task: Design a categories browsing page

Requirements:

• Category filters
• Product grid sorted by category
• Responsive layout

Concepts to explore:

• Filter UI design
• Complex grid layouts
• UI state representation with CSS

🎨 Design Guidelines

Colors

• Background: #e9e1e1
• Primary: #041575
• Secondary: #21077c
• Hover: #3249cc
• Text: #333
• Light: #fff
• Footer background: #041575
• Footer text: #fff

Typography

• Font family: Arial, sans-serif
• Various sizes as needed for different elements

Components

• Cards with shadow and hover effects
• Buttons with hover states
• Form inputs with appropriate styling
• Responsive navigation

🔍 Essential Concepts to Master

1. CSS Variables

   • Using :root for global variables
   • Color scheme management

2. Responsive Design

   • Mobile-first approach
   • Media queries for breakpoints
   • Flexible layouts with percentage units

3. CSS Layout

   • Flexbox for one-dimensional layouts
   • Grid for two-dimensional layouts
   • Positioning techniques (relative, absolute, sticky)

4. Form Elements

   • Input styling and accessibility
   • Labels and their association with inputs
   • Form validation visual cues

5. CSS-Only Solutions

   • Checkbox hack for mobile menu
   • Pure CSS transitions and animations
   • Styling elements without JavaScript

6. Accessibility

   • Semantic HTML
   • ARIA attributes where needed
   • Focus states for interactive elements

🧪 Testing

Test your implementation across different devices and screen sizes:

• Mobile (320px - 576px)
• Tablet (577px - 768px)
• Laptop (769px - 992px)
• Desktop (993px and above)

🏆 Submission

Once you've completed all the tasks, submit your work by:

1. Pushing your code to your GitHub repository
2. Deploying your site to GitHub Pages
3. Sharing the live URL and repository link

📚 Resources

• MDN Web Docs
• CSS-Tricks
• Font Awesome
• Can I Use
• Google Fonts

🤝 Need Help?

If you're stuck or have questions, don't hesitate to:

• Check the reference materials
• Review the provided code examples
• Ask for clarification in the discussion forum

---

Happy coding! Remember, the best is yet to come as you progress through this challenge and enhance your frontend skills! 🚀