1. WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS

2. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

3. 3 Padding (spacing inside an element) Margin (spacing outside an element) Border (colors, styles) BOX MODEL GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

4. 4 W3C BOX MODEL GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

5. 5 IE BOX MODEL GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

6. 6 IE BOX MODEL FIX SOLUTIONS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE CSS 1 & 2 hacks Box in a box method CSS 3 box-sizing property

7. 7 CSS 1 & 2 Hacks (Don’t Do this!) GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE div { width: 100px; } div { \width: 140px; w\idth: 100px; }

8. 8 BOX IN A BOX METHOD (100% SUPPORT) GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE div { width: 100px; padding:0; margin:0; }.i { padding: 1em; } Text

9. 9 CSS 3 BOX-SIZING PROPERTY (90.2% SUPPORT) GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE div { box-sizing:border-box; } /* IE model = border-box W3C model = content-box */

10. 10 CSS 3 BOX-SIZING SUPPORT GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

11. 11 SCALING ELEMENTS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE Static (px) Fluid (%) Responsive (min, max) Auto

12. 12 CONTENT OVERFLOW GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

13. 13 Static (default) Floating POSITIONING (PART 1) GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

14. 14 FLOATING GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

15. 15 CLEARING GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

16. 16 CLEARING GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE clear:both;

17. 17 FLOATING GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

18. 18 Background (color, images) Box Shadow Borders Border Radius Opacity BOX AESTHETICS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

19. 19 BACKGROUND PROPERTIES GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE background-color: background-image: background-position: background-repeat: background-scroll: background-size: background:

20. 20 BOX SHADOW GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

21. 21 BORDER STYLES GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

22. 22 BORDER RADIUS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

23. 23 OPACITY GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

24. 24 Header Footer Nav Aside Section Article HTML 5 SEMANTIC LAYOUT TAGS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE Hgroup Figure Figcaption

25. 25 DIV LAYOUT GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

26. 26 HTML5 SEMATIC TAG LAYOUT GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

27. 27 CSS RESETS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

28. 28 POPULAR CSS RESETS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE Meyers Toucan YUI “poor-man’s”

29. 29 Poor man’s reset GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE html, body { padding: 0; margin: 0; } html { font-size: 1em; } body { font-size: 100%; } a img, a:link img, a:visited img { border: 0; }

30. 30 GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE