theophoenix / google-homepage

google-homepage

This project is from The Odin Project (Web Development 101 >> The Front End >> Project: HTML/CSS) and involves building the Google homepage to practice using HTML and CSS.

• Easy Version: Build the Google.com homepage
• Difficult Version (optional): Build the Google.com search results page

Skills Demonstrated

HTML

• Utilised <div> tags to divide the page up into smaller sections, and then divide those sections into smaller sections.
  • Recognised the excess use of <div> tags. Read about HTML5 Semantic Elements to use in the future.
• Implemented a nonfunctioning, stylised <form> for aesthetic purposes.
• Introduced to Scalable Vector Graphics. Used <svg> to include small inline images alongside text.
• Used a <table> for pagination that included images.

CSS

• Manipulated text using color, text-align, text-decoration, and vertical-align.
• Demonstrated a working knowledge of the Box Model using height, width, margin, padding, border, and box-shadow.
• Used .class and #id selectors, and the psuedo-selector :hover.
  • Struggled to keep the CSS file organised, and recognised classes were being used inefficiently. Took notes on CSS organisation.
• Styled the pages using background, font, and positioning properties top, right, bottom, left, display, position, float, and overflow.