Web DevelopmentPlatform: CSS Practice Project

Amazon Clone

1. Context & Objective

A pixel-faithful recreation of the Amazon homepage built entirely from scratch using pure HTML and CSS — no frameworks. Goal: master complex layout techniques, responsive design, and UI replication at a professional scale.

2. Methodology

1. Structured the page with semantic HTML5 elements. 2. Used CSS Flexbox for the navbar and product rows. 3. CSS Grid for the hero panel and category card layout. 4. Replicated hover states, transitions, and the sticky header.

In [1]:

/* Sticky Navbar */
.navbar {
    display: flex;
    align-items: center;
    background: #131921;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 20px;
}

3. Final Learnings

Gained deep hands-on experience with CSS positioning, Flexbox, and Grid. Replicating a production-level UI sharpened attention to detail — spacing, typography hierarchy, and hover states.

Dataset details

Language

HTML / CSS

Size

Libraries Used

HTML5CSS3FlexboxGrid