Build the Google search results page

Project of deconstructing and recreating Google search results page using only HTML and CSS.

From The Odin Project's curriculum.

📸 Screenshots:

Original: here

Recreated: here

🔗 Live preview: here

Built with

Technologies

• HTML
• CSS

Tools

• Visual Studio Code
• Linux terminal
• Git and GitHub

Third party code

• modern-normalize

Outcome

• Used HTML5 semantic elements for better readability and structure.
• Used CSS3 grid to recreate header.
• Used flexbox multiple times to achieve wanted layouts.
• Used Git and GitHub for project management.
• Used SVG icons (from Google).
• Tried to code as similar as possible and maintain clean code.
• Cross tested on Firefox and Chromium based browsers.

Summary

What I learned

• Better knowledge of Git and GitHub.
• Fair understanding of CSS grid and flexbox.
• Improved code structure and code readability.
• Improved clean code writing.
• Comfort use of browser's developer tools.
• Some tricks with SVG icons.
• A lot of minor things.

What could be improved

• I feel that commits were not regular enough.
• My commit messages are not perfect.
• It's not responsive, but there was no such requirment so I didn't make it.
• Some things was changed in google while I was making a website so it's not perfect with up to date Google:
  • google added some new content (videos suggestions, extra content for results, etc...);
  • constantly changing URL line (favicons, colors, position);
  • for sure will change something in the future.

Author

👤 ArtisDev

• GitHub: Artis-Dev