Skip to content

moe-dizzle/GoogleHomePageClone

Repository files navigation

GoogleHomePageClone

Getting Started

Run Project

Assumption that you have Node.js and npm installed

$ npm install
$ npm start

The command line will tell you the url for the project:

Screenshot 2024-07-26 001217

What improvements would you make or best practices would you utilize if you had double the time?

Currently, there's a bug where the search bar expands when overfilled with text, but it does not shrink back down when the text is deleted. I would like to fix this issue to make the resizing more dynamic. Additionally, I would like to improve the appearance of the 'I'm Feeling Lucky' button to make it look more like the original. I also need to add back the tab outline for the "I'm Feeling Lucky" button for accessibility reason. I think I may have removed it on accident when I was playing around with the hover funtionality. Finally, I would have added support for both Light and Dark modes if i had more time.

If the site required more interactivity and API calls, I would have used a framework like React. I would also have been more diligent in breaking the site into components.

About how much time did you spend on the project?

About 6 hours. A significant portion of the time was spent setting up the environment. I added ESLint and pre-commit hooks to check the JavaScript, HTML, and CSS for SEO, performance, and accessibility issues.

Version of my Site in Vercel

https://google-home-page-clone-git-main-mauricehaywards-projects.vercel.app/

How the site looks on my machine

desktop

Screenshot 2024-07-26 115555

labtop

Screenshot 2024-07-26 115610

small screen

Screenshot 2024-07-26 120126

The Look I was targeting for

desktop

Screenshot 2024-07-26 000130

labtop

Screenshot 2024-07-26 000635

small screen

Screenshot 2024-07-26 000704