My First Web Dev Project After collage: Building an Amazon Clone and Learning in Public

Hey everyone! I’m super pumped to share the first big step in my web development journey—a partial Amazon homepage clone I’m building from scratch! This is my first proper project, and I’m doing it as part of my “Learn in Public” adventure. I’ve been revisiting HTML and CSS, and this project is my way of putting those skills to the test while planning to dive into JavaScript and backend stuff later. Here’s a peek into what I’ve done, where I’m struggling, and what’s next.

Why an Amazon Clone?

I picked an Amazon clone because it’s a real-world website with a ton of cool elements—a navbar, search bar, hero section, and those product cards you see on the homepage. It felt like the perfect challenge to practice layouts and styling while making something that looks legit. Plus, it’s exciting to recreate something I use all the time! I’m building this step-by-step, starting with HTML and CSS, and I’m loving the process, even when it gets messy.

What I’ve Built So Far

I’ve been grinding away on the frontend, and here’s what I’ve got:

• Navbar: It’s got the Amazon logo, a location selector with a pin icon, a search bar with a dropdown (like “All,” “Books,” “Electronics”), account options, and a cart. I used Flexbox to line everything up and Font Awesome for icons.

• Panel: A secondary menu below the navbar with options like “All,” “Fresh,” and “Today’s Deals.” It’s simple but looks clean.

• Hero Section: A full-width banner with a placeholder background image. It’s not perfect yet, but it’s coming together.

• Shopping Section: This has four product cards (Clothes, Health & Personal Care, Furniture, Electronics) with images and “See More” links. I used Flexbox here, but I’m running into issues (more on that below).

Here’s a snippet of my shopping section code to give you a vibe:

 <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>
        <div class="box">
            <h2 style="font-size: 1.5vw;padding: 0px 20px;max-height: 54px;">Health and Personal care </h2>
            <div class="box-img2" style="background-image: url('/resources/box2_image.jpg');"></div>
            <span class="see-more-text">see more</span>
        </div>
        <div class="box">
            <h2 style="font-size: 1.5vw;padding: 0px 20px;max-height: 54px;">Furniture</h2>
            <div class="box-img3" style="background-image: url('/resources/box3_image.jpg');"></div>
            <span class="see-more-text">see more</span>
        </div>
        <div class="box">
            <h2 style="font-size: 1.5vw;padding: 0px 20px;max-height: 54px;">Electronics</h2>
            <div class="box-img4" style="background-image: url('/resources/box4_image.jpg');"></div>
            <span class="see-more-text">see more</span>
        </div>

        <div class="box">
            <h2 style="font-size: 1.5vw;padding: 0px 20px;max-height: 54px;">Electronics</h2>
            <div class="box-img4" style="background-image: url('/resources/box4_image.jpg');"></div>
            <span class="see-more-text">see more</span>
        </div>
        </div>

.shop-section {
    display: flex;
    background-color: rgba(132, 157, 174, 0.762);
    height: 600px;
    justify-content: space-around;
}

.box {
    background-color: white;
    height: 300px;
    width: 25%;
    padding: 20px 0 15px 0;
    margin: 10px;
}

The Struggles Are Real

This project is teaching me a ton, but it’s not all smooth sailing. Here’s where I’m hitting roadblocks:

• Shopping Section Mess: I want exactly four product cards in a row, but sometimes I see more, and when I tried flex-wrap, it dropped to three. I think it’s something to do with margins or the width: 25%, but I’m still figuring it out. I’m wondering if CSS Grid might fix this, but I haven’t tried it yet.

• Hover Effects Missing: I want to add cool hover effects, like borders or color changes when you click links (like “See More” or nav options), but I haven’t gotten there yet. It’s on my to-do list!

• No Footer: I haven’t added a footer yet, but I’m planning one with links like “Privacy Notice” or “Help” to make it look more like Amazon.

• Not Responsive: The site looks okay on desktop, but I haven’t tackled mobile-friendliness. That’s a big goal for next week.

What’s Keeping Me Going

Even with the challenges, I’m having a blast! Revisiting HTML and CSS has been like reconnecting with an old friend. I love seeing my code turn into something visual, even if it’s not perfect. The “Learn in Public” mindset is also super motivating—I’m sharing this on LinkedIn, X, and Hashnode to stay accountable and learn from others. If I mess up, that’s okay; it’s all part of the journey!

My Plan to Finish This

I’m taking this project one step at a time so I don’t get overwhelmed. Here’s what’s next:

• This Week: Add hover effects (like borders on links), a footer, and maybe start making the site responsive with media queries.

• Next Week: Jump into JavaScript to add interactivity, like making the search bar work or updating the cart dynamically.

• After That: Explore backend stuff (maybe Node.js or an API) to fetch product data and make the site feel real.

• Long-Term: Deploy it online and share a live demo. I also want to write more blogs about each step.

Why I’m Sharing This

Posting my progress publicly is scary but exciting! I want to show that it’s okay to be a beginner and make mistakes. If you’re learning web dev or building your own projects, I’d love to hear about it! What challenges have you faced? Any tips for fixing my shopping section or adding hover effects? I’m all ears (or rather, all eyes for your comments!).

Let’s Connect

Follow my journey on LinkedIn, X, or Hashnode as I keep building this Amazon clone. I’m sharing updates, code snippets, and lessons learned along the way. If you’re into coding or just curious, let’s connect and learn together! Drop a comment or DM me with feedback or resources—I’m super grateful for any advice.

Thanks for reading, and here’s to building, breaking, and learning in public! 💻🚀

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