HTML AND CSS

1. Learning Objectives
2. Instructions

Learning Objectives

1. Semantic HTML
2. CSS Selectors
3. CSS Positioning and Display

Instructions

You will use HTML and CSS to recreate this page. It might be less distracting to use this balsamic version of the page in version 1 and version 2 so you are focusing on learning the css and not perfect duplication. Do NOT worry about any dynamic interaction (drop down menu's etc)

1. Version 1

• Recreate the text of the page using Semantic HTML. (Hint: You should only need the div, span, form, img, a, and li elements). Use a default img placeholder for images in this version so you can focus on the css.
• Link a normalize.css file and your own .css file to your html.
• Use the box model, positioning, display and float to set up the layout.
• Use id, class and element selectors. Try to find two or three ways to select each element you are styling. Can you select it without adding a class or id to the HTML?
• Validate your HTML and CSS

1. Version 2

• Use CSS to for the fonts, borders and colors.
• Optimize your CSS
• Make it picture perfect. Add images. Many images on the page can be easily obtained using 'Image Information' in the developer toolbar on a live github page.

1. Version 3

• Find another page to redo. You might look at http://365psd.com/ for inspiration, or your favorite social media site.
• Start by identifying the blocks and getting the layout.

DO NOT MERGE SOLUTION PULL REQUESTS INTO THIS REPOSITORY

Helpful Resources