Mini Project
Build a Multi-Page Website. This project is designed to incorporate every concept covered in the HTML and CSS modules.
Project: The Startup Launch
Section titled “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
Section titled “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
Section titled “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)
Section titled “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
Section titled “Phase 2: Page-Specific Requirements”1. Home / Landing Page (Layout & Hero)
Section titled “1. Home / Landing Page (Layout & Hero)”- Hero Section: Use
vhunits for height and a background image withbackground-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-shadoworfilterto call-to-action buttons.
2. Product / Portfolio Gallery (Grid & Media)
Section titled “2. Product / Portfolio Gallery (Grid & Media)”- Grid Layout: Use
display: gridto create a responsive showcase of products/features. - Figure Tags: Wrap at least 6 images in
<figure>and<figcaption>to describe your products. - Interactivity: Use
transitionandtransformto scale items on:hover.
3. Blog (Content & Data)
Section titled “3. Blog (Content & Data)”- Typography: Use
remunits for font sizes andline-heightfor 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 withcontrols. - Text Styling: Use
<strong>,<em>, and a custom<span>for branding emphasis.
4. Plans & Pricing (Flexbox & Positioning)
Section titled “4. Plans & Pricing (Flexbox & Positioning)”- Service Cards: Create 3 plans aligned using Flexbox (
justify-content: space-around). - Feature Badges: Use
position: absoluteto 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-childto highlight the primary subscription tier.
5. Contact Form (User Interaction)
Section titled “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 (usingidandfor). - Focus States: Style the
:focusstate 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)
Section titled “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
Section titled “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)