Synopsis
This is a clone of the Google homepage. It is completely responsive and accommodates all devices. Also the search bar is functional - it will redirect a users input to a real google search. The image search option is also functional and likewise will link a user to a google image search of their input.
Only pure html and css is used. A css reset is also utilized (normalize.css).
Some notable HTML/CSS techniques I utilized in this project include:
- Flex-box
- Media Queries
- Positioning - relative/absolute
Motivation
I just finished taking Udacity's Intro to HTML/CSS (a refresher), Responsive Web Design and Responsive Images courses. This is a project I completed to practice what I learned in those two courses.
My main motivation was learning the techniques used to make a site responsive without having to rely on a library or framework.
Tests
If you'd like to see the page in action you can check it out here!
Try resizing the screen and see how it responds to different device widths!