Building AMAZON Clone for Beginners | Project using HTML & CSS

Overview

• Beginner-friendly, step-by-step tutorial showing how to clone the Amazon (global) homepage using only HTML and CSS.
• Goal: produce a resume-ready front-end project you can expand later (add pages, JavaScript for interactivity).

Prerequisites & resources

• Basic HTML & CSS knowledge recommended. The presenter references prior HTML/CSS tutorials and provides links and downloadable assets in the video description.
• Project files provided: index.html, style.css, plus image assets (e.g., amazon-logo.png, hero image, box images).

Project structure & assets

• Recommended file layout:
  • Project folder
    • index.html
    • style.css
    • /images/ (logo, hero, box images)
• Use real website images (download via right-click) or the provided images in the description.
• Icons via Font Awesome (included via CDN).
• Color picking examples use the browser inspector and Canva for sampling color codes.

Core implementation steps (high level)

1. Boilerplate

   • Create index.html and link style.css.
   • Set global resets (e.g., margin: 0), box-sizing: border-box, and a font-family fallback (e.g., Arial).

2. Include icons

   • Add Font Awesome via a CDN to include icons such as search, cart, location, and menu.

3. Header / NavBar

   • Build a header with multiple parts:
     • Logo (can be implemented as a div with background-image).
     • Address/delivery block.
     • Search area (category select, text input, search button).
     • Cart area.
   • Use display: flex to align nav items horizontally, and align-items / justify-content for centering.
   • Style borders and hover effects (for example, a transparent border that turns orange/white on hover).
   • Use border-radius on the search bar and controls.
   • Use rem units for font sizing to keep typography proportional/responsive.

4. Search component

   • Structure: a select element (category), an input (placeholder “Search Amazon”), and a button/icon (magnifying glass).
   • Use flex so the input expands and the select/input/icon are evenly spaced.
   • Style background colors, per-corner border-radius, font-size, and heights to match the look.

5. Small nav segments

   • Address block: two-line layout (small top line, larger bottom line) with separate classes to style each line.
   • Cart block: Font Awesome icon scaled via font-size, plus a small text label.

6. Secondary horizontal panel (below nav)

   • Slim grey menu bar with a menu icon, category links, and a deals CTA.
   • Implement using a flex container; distribute space with justify-content and use per-item margins; adjust font sizes and weights as needed.

7. Hero section

   • Use a full hero container with background-image (e.g., hero-image.jpg), background-size (contain/cover), and a centered text overlay.
   • Use flex on the hero container to center the overlay; set a width/height (e.g., 400–600px) and control positioning with margin or flex alignment.
   • Style the CTA link (color and spacing).

8. Shop / Boxes area (category cards)

   • Create a shop area with multiple boxes (reusable components such as box1..box4).
   • Each box includes a heading (h2), a background image, and a small “See more” link.
   • Use a reusable inner content div for consistent styling; copy/paste to create multiple cards.
   • Layout: use flex in a row, control box widths in percent (e.g., 20–25%) and set flex-wrap so boxes flow to the next line on smaller screens.
   • Use background-size, background-repeat: no-repeat, set heights and margins to control cropping and spacing.

9. Footer

   • Multi-panel footer:
     • Top “Back to top” bar.
     • Mid panel with columns (lists of links).
     • Brand/logo panel.
     • Bottom copyright/footer row.
   • Implement footer panels using flex for horizontal distribution; style background colors, text colors, and separators (e.g., border-top).
   • Keep footer typography and spacing consistent (use rem units, margins, and text-align as needed).

CSS techniques & best practices demonstrated

• Global resets: margin: 0 and box-sizing: border-box.
• Use of rem units for scalable, consistent font sizing.
• Flexbox fundamentals: display: flex, align-items: center, justify-content (e.g., space-evenly, space-between), and flex-wrap for responsive rows.
• Styling form elements: aligning select/input/button, per-corner border-radius, removing default borders, and adding custom focus/border effects.
• Background images: background-image, background-size, background-repeat: no-repeat, and positioning for logo/hero/box images.
• Separate styling for multi-line elements (e.g., address top vs. bottom line) using dedicated classes.
• Reusable components: design one box/component well, then copy/paste to create multiple category cards.
• Use browser inspector to read colors, sizes, and fonts; pick exact hex codes and dimensions.
• Use CDNs for icons/libraries (e.g., Font Awesome via CDNJS) to avoid bundling icon assets.

Tools & external services referenced

• Font Awesome (icons) — added via CDN link (<link> tag) in the HTML.
• CDNJS — used to fetch the Font Awesome CDN link.
• Browser Developer Tools / Inspector — to measure element sizes and pick colors.
• Canva — color picker/sample for selecting hex color shades.
• Video description includes downloadable images/assets and starter files.

Tips, suggestions & next steps

• After building the static HTML/CSS clone, add JavaScript to implement search behavior, dropdowns, cart interactions, responsiveness, and dynamic content.
• Make the layout responsive: tweak flex-wrap, add breakpoints, and adjust font sizes.
• Reuse components across pages (product list, product detail) to scale the project.
• Experiment with accessibility (use semantic tags, provide alt text) and performance (optimize images, prefer WebP).
• Recommended workflow: design one component well, then copy/paste and change content to speed development.
• Use the completed project on your resume and expand it later to show interactivity and real features.

What’s included / where to find assets

• Links to resources and a zip of images/assets (logo, hero images, box images, starter files) are provided in the video description.

Main speaker / sources

• Shraddha (presenter — referred to as “Shraddha didi”) — primary instructor.
• Font Awesome — icon provider via CDN.
• CDNJS — used to fetch the Font Awesome CDN link.
• Canva and browser DevTools — used for color picking and inspecting styles.

Note: The video is a practical hands-on HTML/CSS tutorial focused on layout and building techniques rather than back-end functionality. The transcript is auto-generated and may contain transcription errors; this summary condenses the main technical steps and resources provided.