- Semantic HTML
- CSS Selectors
- CSS Positioning and Display
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)
- 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
- 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.
- 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