Leveling Up My Amazon Clone: My First Web Dev Project is Taking Shape!

Hey everyone! I’m back with another update on my “Learn in Public” journey, and I’m super stoked to share how my Amazon homepage clone is coming along! This is my first real web dev project, and I’ve been pouring my heart into HTML and CSS to make it look legit. I’ve added a ton of new features since my last post, wrestled with some annoying challenges, and learned so much. Check out my progress on GitHub (https://github.com/Tushar-Kale326/Amazon-clone-html-css.git) and let’s dive into what I’ve been up to!

Why I’m Building This

I picked Amazon’s homepage because it’s got all the juicy UI stuff—a navbar, search bar, product cards, and now a footer! It’s the perfect way to flex my HTML and CSS skills after brushing up on them recently. I’m taking it one step at a time, starting with the frontend, and I’m pumped to add JavaScript and backend code down the road. Sharing this on Hashnode, LinkedIn, and X keeps me accountable and lets me learn from you all.

What’s New in the Project

Since my last update, I’ve added a bunch of stuff to make the site feel more like Amazon. Here’s the rundown:

Navbar: It’s got the Amazon logo, location selector, search bar with a dropdown (“All,” “Books,” “Electronics”), account options, and a cart icon. I used Flexbox to line it up and Font Awesome for icons. I also added hover effects that show a white border on the logo, address, and nav options—looks pretty slick!
Panel: A secondary menu below the navbar with options like “All,” “Fresh,” “MX-Player,” and “Today’s Deals.” It’s simple but clean.
Hero Section: A full-width banner with a placeholder background image. It’s not doing much yet, but it’s there.
Shopping Section: Now has eight product cards (Clothes, Health & Personal Care, Furniture, Electronics, repeated for testing). I ditched Flexbox for CSS Grid to fix my layout issues (more on that below).
Footer: Added a “Back-to-Top” link and a multi-column footer with sections like “Get to Know Us,” “Connect with Us,” “Make Money with Us,” and “Let Us Help You.” It’s styled to match Amazon’s dark vibe.

Here’s a sneak peek at my shopping section and footer code:

<div class="shop-section">
    <div class="box">
        <h2 style="font-size: 1.5vw;padding: 0px 20px;max-height: 54px;">Clothes</h2>
        <div class="box-img1" style="background-image: url('/resources/box1_image.jpg');"></div>
        <span class="see-more-text">see more</span>
    </div>
    <!-- More boxes -->
</div>

<div class="middle-footer">
    <div class="inside-middle-footer">
        <h3 style="font-size: 10px;margin-bottom: 10px;">Get to Know Us</h3>
        <ul type="none">
            <li>About Amazon</li>
            <li>Careers</li>
            <li>Press Releases</li>
            <li>Amazon Science</li>
        </ul>
    </div>
    <!-- Other footer sections -->
</div>

.shop-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    background-color: rgba(132, 157, 174, 0.762);
    height: 655px;
    padding: 10px;
}

.middle-footer {
    background-color: #232F3E;
    color: white;
    height: 300px;
    display: flex;
    justify-content: center;
    gap: 2.5cm;
}

You can see the full code on my GitHub repo: https://github.com/Tushar-Kale326/Amazon-clone-html-css.git.

The Struggles I Faced

This project has been a wild ride, and not the easy kind. Here’s where I got stuck:

Shopping Section Layout: I was tearing my hair out trying to get exactly four product cards in a row. Flexbox was a nightmare—too many cards showed up, or it dropped to three with flex-wrap. Switching to CSS Grid with grid-template-columns: 1fr 1fr 1fr 1fr saved the day, but the spacing still feels a bit tight. I added eight cards to test things out, but I’m wondering if that’s overkill.
Hover Effects: I got hover effects working on the navbar (white borders when you hover), but I haven’t added them to the “See More” links in the shopping section yet. I want those to pop, maybe with an underline or color switch.
Footer Spacing: The footer’s multi-column layout was tricky. The gap: 2.5cm feels too wide, and I’m still messing with it to make it look right. Plus, it’s not responsive for smaller screens yet.
Responsiveness: The site’s decent on desktop, but it’s not ready for mobile. I need media queries to stack the cards and footer columns properly on phones.

What I’ve Learned

This project is like a crash course in web dev, and I’m soaking it all up:

Grid > Flexbox (Sometimes): CSS Grid was a lifesaver for the shopping section. It’s so much easier to lock in four columns compared to Flexbox for this kind of layout.
Hover Effects Are Dope: Adding those white borders to the navbar made it feel alive. Can’t wait to do more of that.
Debugging Takes Time: Figuring out layouts and spacing means a lot of trial and error, but it’s so satisfying when it clicks.
Step-by-Step Wins: Sticking to my plan—HTML/CSS now, JavaScript next, backend later—keeps me from freaking out.

What’s Next

I’m nowhere near done! Here’s what’s on my plate:

This Week: Add hover effects to the “See More” links, fix the footer spacing, and start tackling responsiveness with media queries.
Next Week: Jump into JavaScript to make things interactive, like getting the search bar to filter stuff or updating the cart when you click it.
Later: Try some backend magic (maybe Node.js or an API) to pull in real product data and make the site feel legit.
Long-Term: Get this thing live online and share a demo link. I’ll keep blogging about each step on Hashnode too.

Why I’m Learning in Public

Going public with my journey is scary but so worth it. It keeps me motivated, and I love connecting with other coders. I’m sharing this on LinkedIn, X, and Hashnode to get your feedback and learn from your experiences. If you’re working on something similar or have tips on layouts, hover effects, or JavaScript, drop a comment or DM! What’s been your toughest coding moment? Any resources I should check out?

Let’s Keep It Rolling

Thanks for vibing with my journey! Head over to my GitHub (https://github.com/Tushar-Kale326/Amazon-clone-html-css.git) to check out the code and let me know what you think. I’m hyped to keep building this Amazon clone and sharing the highs and lows. If you’re learning to code or grinding on your own projects, let’s connect and keep pushing each other! 💻🚀

#WebDevelopment #HTML #CSS #LearnInPublic #AmazonClone #CodingJourney

Leveling Up My Amazon Clone