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)