https://github.com/laras126/layout_exercise

https://github.com/laras126/layout_exercise

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/laras126/layout_exercise
• Owner: laras126
• Created: 2013-05-30T19:35:01.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-06-20T17:46:32.000Z (over 9 years ago)
• Last Synced: 2024-10-15T21:22:00.699Z (3 months ago)
• Language: CSS
• Size: 133 KB
• Stars: 0
• Watchers: 2
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: readme.txt

Awesome Lists containing this project

README

        


Layout Exercise, Class 4 5/30

Box Model and Positioning

************

Instructions

************

1. Create a visual layout either with the positioning tool, a drawing, in Illustrator, an existing website, whatever.

	- Mac screenshot shortcuts: Cmd+Shft+3 and drag a box OR Cmd+Shft+4 and capture whole screen

	- PrtScn key on Windows

2. Add an image of it to img/screenshots.

3. Code a page using that layout.

4. Find and add links to examples of of clearfix, absolute, and fixed positioning in the wild.

5. BONUS: collaborate with someone else, pull and merge their changes.

******

Tasks

******

(minimal this week, sorry)

Level 1

-------

1. Use gradients

2. Give each box a different background color

3. 

Level 2

-------

1. Make all widths percentages

2. Use psuedoselectors

3. Use a grid

Level 3

-------

1. Give each box a 30px border without effecting your layout

2. Make a box fade in 

3. Fill the box with text when clicked

Ultimate Bonus

--------------

1. Use Flexbox then teach it to me

http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/