Mini Project

This content is for Frontend. Switch to the latest version for up-to-date documentation.

Build a Multi-Page Website. This project is designed to incorporate every concept covered in the HTML and CSS modules.

Project: The Startup Launch

You are the lead developer and founder of a new Startup or Business. Your goal is to build a professional-grade 5-page website to launch your brand. This could be anything from a niche tech startup, a local boutique, a digital consultancy, or an innovative service.

Personalization & Branding

Before you code, define your brand identity:

Brand Name: What is your startup called?
Target Audience: Who are your users/customers?

The site must be cohesive, responsive, and semantically correct, serving as the primary digital face of your new business.

Page Structure

Home (Landing Page): Your high-impact pitch with a hero section.
Product/Work Gallery: A visual showcase of your products or portfolio.
Blog (Articles/News): A deep-dive article or industry report using complex data.
Plans & Pricing: A conversion-focused page comparing your service tiers.
Contact: A contact form for new clients or users.

Phase 1: Global Requirements (The Foundation)

These must be present across all pages.

Feature	Requirement	Topics Covered
Boilerplate	Valid `<!DOCTYPE html>`, `<html lang="en">`, `<head>` with UTF-8 charset.	Metadata, Charset
Meta Tags	Viewport meta tag for mobile responsiveness.	Responsive Basics
Identity	A `<title>` and a favicon link on every page.	Title, Favicon
Navigation	A global `<nav>` inside a `<header>`, styled with Flexbox.	Nav, Flexbox
Footer	A global `<footer>` with copyright entities (`©`) and contact info.	Footer, Entities
Variables	Define a color palette and spacing system using `:root` CSS variables.	CSS Variables

Phase 2: Page-Specific Requirements

1. Home / Landing Page (Layout & Hero)

Hero Section: Use vh units for height and a background image with background-size: cover.
Value Proposition: Use <main>, <section>, and a clear <h1> to <h3> hierarchy to explain your startup’s value.
Visual Effects: Add a subtle box-shadow or filter to call-to-action buttons.

2. Product / Portfolio Gallery (Grid & Media)

Grid Layout: Use display: grid to create a responsive showcase of products/features.
Figure Tags: Wrap at least 6 images in <figure> and <figcaption> to describe your products.
Interactivity: Use transition and transform to scale items on :hover.

3. Blog (Content & Data)

Typography: Use rem units for font sizes and line-height for readability in long-form articles.
Market Data Table: Create a <table> with <thead> and <tbody> to show market research or product specs.
Media Embeds: Include at least one <video> overview or <audio> interview with controls.
Text Styling: Use <strong>, <em>, and a custom <span> for branding emphasis.

4. Plans & Pricing (Flexbox & Positioning)

Service Cards: Create 3 plans aligned using Flexbox (justify-content: space-around).
Feature Badges: Use position: absolute to place a “Most Popular” or “Early Bird” badge on a card.
Z-Index: Ensure badges stay on top of the cards.
Selection State: Use :nth-child to highlight the primary subscription tier.

5. Contact Form (User Interaction)

Lead Generation: A form with at least 5 input types: text, email, date, radio, checkbox.
Validation: All inputs must have associated <label> tags (using id and for).
Focus States: Style the :focus state of form fields to match your brand colors.
FAQ Details: Use <details> and <summary> for a Frequently Asked Questions section.

Phase 3: Technical Rubric (Total: 100 Points)

Category	Criteria
Structure	Correct use of semantic HTML5 tags across all pages.
CSS Layout	Mastered Flexbox (Nav/Cards) and Grid (Gallery).
Responsiveness	Fully functional on Mobile (320px), Tablet (768px), and Desktop.
Advanced CSS	Effective use of Variables, Transforms, and Animations (`@keyframes`).
Media & Data	Correct implementation of Images, Tables, and Video/Audio.
Code Quality	Clean selectors, no `!important`, and valid CSS inheritance.

Submission

All files should be linked absolutely (e.g., <a href="/products.html">).
The should be your desired file and folder structure:

/company-website
│── index.html
│── products.html
│── blog.html
  │── post.html
│── pricing.html
│── contact.html
│── /css
│     │── main.css
│── /img
      |── logo.png
      │── (all image assets)

Built with passion by Ngineer Lab