DEV Community

Cover image for Day-2 I Built a Google Homepage Clone Using Just HTML and CSS!
Tamilselvan K
Tamilselvan K

Posted on • Edited on

Day-2 I Built a Google Homepage Clone Using Just HTML and CSS!

Hey everyone! I'm super excited to share a small but satisfying project I completed today: a Google homepage clone built using only HTML and CSS. 🎉

🚀 Why I Did This

As someone who's on a journey to become a better front-end developer, I thought recreating iconic websites would be a great way to practice. And what better place to start than with one of the cleanest and most minimalist designs on the internet—Google’s homepage! 🔍✨

🛠️ What I Used

HTML for the structure 🧱

CSS for styling and layout 🎨

No JavaScript this time (keeping it simple!) ⚙️

🎯 Key Features

Centered Google logo 🖼️

Search input box with shadow 🔳

Two classic buttons: "Google Search" and "I'm Feeling Lucky" 🎲

Responsive design for smaller screens 📱

Clean and minimal layout, just like the real deal ✅
📘 What I Learned

How to use Flexbox to center elements perfectly

Creating a minimalistic UI with clean CSS

The power of spacing and alignment in good design

Small touches like hover effects and shadows really enhance the UI ✨

📌 What’s Next?

I plan to continue this mini-series by cloning other popular websites to sharpen my front-end skills. Maybe next up: Netflix or Instagram Login Page? Stay tuned! 📺📸

Thanks for reading! Let me know your thoughts or if you've tried something like this. Would love to connect and grow with the dev community. 💬❤️

Top comments (0)