My Amazon Clone Looks Epic on Windows—But Not on Everything Else!

Hey everyone! I’m back with a fresh update on my “Learn in Public” journey, and I’m so hyped to show off my Amazon homepage clone! This is my first web dev project, and I’ve been pouring my soul into HTML and CSS. I’ve got some cool screenshots to share, and I’m stoked that it looks awesome on Windows—but ugh, it’s a mess on MacBook, iPad, and mobile. Check out my GitHub (https://github.com/Tushar-Kale326/Amazon-clone-html-css.git) for the code, and let’s dive into what’s working, what’s not, and what’s next!

Why I’m Building This

I picked Amazon’s homepage because it’s got all the good stuff—navbar, search bar, product cards, and a footer—to practice my HTML and CSS skills. I’ve been revisiting these basics, and I’m building this step-by-step, starting with the frontend. JavaScript and backend are on my radar for later. Sharing this on Hashnode, LinkedIn, and X keeps me going and lets me learn from you all.

What I’ve Built So Far

I’ve added a bunch of features to make it feel like Amazon. Here’s the scoop:

• Navbar: Got the logo, location selector, search bar with a dropdown (“All,” “Books,” etc.), account options, and cart. Flexbox and Font Awesome did the trick, plus I added hover effects with white borders.

• Panel: A secondary menu with “All,” “Fresh,” “MX-Player,” and “Today’s Deals.”

• Hero Section: A full-width banner with a placeholder image.

• Shopping Section: Eight product cards (Clothes, Health & Personal Care, Furniture, Electronics, repeated) using CSS Grid to fix my layout woes.

• Footer: A “Back-to-Top” link and a multi-column footer with sections like “Get to Know Us” and “Let Us Help You.”

Check out my code on GitHub: https://github.com/Tushar-Kale326/Amazon-clone-html-css.git.

Screenshots: The Good and the Ugly

I took some screenshots to compare my clone with the real Amazon site. Here’s what I found:

• On Windows (Yay!): It looks pretty solid! The layout holds up, and the product cards line up nice with the Grid setup. Check it out:

  

• On MacBook/iPad/Mobile (Oof!): Not so great. The cards stack weirdly, the footer columns overlap, and the navbar gets all cramped. Here’s what it looks like compared to Amazon:

  

  

  

The real Amazon site adjusts perfectly on all devices, but mine’s a total mess outside Windows. I haven’t added media queries yet, and that’s biting me hard!

The Struggles I’m Facing

This project is teaching me a lot, but it’s not all smooth sailing:

• Responsiveness Nightmare: It looks dope on Windows, but on MacBook, iPad, and mobile, everything breaks. The Grid layout for the shopping section doesn’t scale, and the footer’s spacing goes haywire. I know media queries are the fix, but I’m still figuring out how to write them.

• Hover Effects: I’ve got them on the navbar, but not on the “See More” links yet. I want those to pop on all devices!

• Testing Across Devices: I only tested on Windows at first, and now I see I need to check Mac, iPad, and mobile more. Live and learn, I guess!

What I’ve Learned

Even with the hiccups, I’m picking up some cool stuff:

• Grid is Awesome: Switching to CSS Grid fixed my four-card row issue, but it’s not responsive yet.

• Testing Matters: I didn’t realize how bad it looked on other devices until I took these screenshots. Lesson learned!

• Patience Pays Off: Debugging layouts takes time, but seeing it work on Windows keeps me motivated.

What’s Next

I’m not giving up! Here’s my plan:

• This Week: Tackle responsiveness with media queries to make it work on MacBook, iPad, and mobile. I’ll start with stacking the cards and fixing the footer.

• Next Week: Add JavaScript for interactivity—like making the search bar filter results or updating the cart.

• Later: Dive into backend (maybe Node.js or an API) to pull in real data.

• Long-Term: Get this live online with a demo link and keep blogging about it.

Why I’m Learning in Public

Sharing this publicly is nerve-wracking but awesome. It keeps me on track, and I love hearing from you all. I’m posting on LinkedIn, X, and Hashnode to get your input. If you’ve dealt with responsiveness issues or have tips on media queries, hit me up! What’s been your toughest coding challenge? Any resources I should grab?

Let’s Keep the Momentum

Thanks for rolling with me on this journey! Check my GitHub (https://github.com/Tushar-Kale326/Amazon-clone-html-css.git) for the code and let me know what you think. I’m pumped to fix the responsiveness and keep building this Amazon clone. If you’re coding too, let’s connect and cheer each other on! 💻🚀

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