/google-search-results

Google search page results assignment from The Odin Project's curriculum.

Primary LanguageHTMLGNU General Public License v3.0GPL-3.0

Google Search Results - TheOdinProject optional assignment

This is a solution to the Google Search Results page from TheOdinProject assignment .

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for the component depending on their device's screen size
  • See hover states for all interactive elements on the page

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • JavaScript

What I learned

  • First I didn't realize how big this project is going to be, so I thought if I will use just CSS I'm going to be fine. After the first 500 lines of code I realize how important is a framework like SASS which can help you keep all of your styles clear and organized in more files and then compile them into one big CSS file. At least from now on I know how I am going to handle big projects
  • Mobile Navigation
  • Fixed navigation bar by using the window.ScrollY
  • How to make a horizontal navigation and how to hide the scrollbar for mobile devices in each major browser.

Author