Building with HTML and CSS

An introductory level presentation on using HTML and CSS.

Transcript

1. HTML & CSS Building W I T H Frances Botsford @strikeseason Brian Talbot @talbs “Helper Languages” The Boston Python User Group
2. Frances and Brian HELLO! WE ARE Building with HTML & CSS http://www.flickr.com/photos/gregor_y/38137970/
3. Designers at edX Frances and Brian HELLO! WE ARE Building with HTML & CSS http://www.flickr.com/photos/gregor_y/38137970/
4. Designers at edX Frances and Brian Nerds HELLO! WE ARE Building with HTML & CSS http://www.flickr.com/photos/gregor_y/38137970/
5. FIRST, A FEW THINGS to make our trip together better • Metaphors and cultural references, oh my! • Be on the lookout for links/resources • Some slide code is abbreviated Building with HTML & CSS • We “git push”ed our demo code github.com/frrrances/bostonpython-htmlcss-talk • Slides are online speakerdeck.com/talbs/building-with-html-and-css
6. EVERYONE NEEDS A PLAN! Here’s ours for the next 20-30 minutes • Get to know HTML + CSS • Drive by fancy stuff and next steps • Q&A here and over <slang>bevies</slang> • Walk through introductory-level demo • Form some good habits when “coding” Building with HTML & CSS
7. ITS A GREAT TIME TO START learning to write HTML & CSS now Building with HTML & CSS http://www.flickr.com/photos/ruffedgedesign/8022018799
8. ITS A GREAT TIME TO START learning to write HTML & CSS now • HTML & CSS have been out and around Building with HTML & CSS http://www.flickr.com/photos/ruffedgedesign/8022018799
9. ITS A GREAT TIME TO START learning to write HTML & CSS now • HTML & CSS have been out and around • Lots of conventions, tutorials and help Building with HTML & CSS http://www.flickr.com/photos/ruffedgedesign/8022018799
10. ITS A GREAT TIME TO START learning to write HTML & CSS now • HTML & CSS have been out and around • Lots of conventions, tutorials and help • Great tools to make the job easier Building with HTML & CSS http://www.flickr.com/photos/ruffedgedesign/8022018799
11. ITS A GREAT TIME TO START learning to write HTML & CSS now • HTML & CSS have been out and around • Bootstrap and other libraries • Lots of conventions, tutorials and help • Great tools to make the job easier Building with HTML & CSS http://www.flickr.com/photos/ruffedgedesign/8022018799
12. ITS A HELL OF A TIME TO START learning to write HTML & CSS now Building with HTML & CSS http://www.flickr.com/photos/ruffedgedesign/8022018799
13. ITS A HELL OF A TIME TO START learning to write HTML & CSS now • Lots of new features with spotty support Building with HTML & CSS http://www.flickr.com/photos/ruffedgedesign/8022018799
14. ITS A HELL OF A TIME TO START learning to write HTML & CSS now • Lots of new features with spotty support • More is expected of HTML/CSS devs Building with HTML & CSS http://www.flickr.com/photos/ruffedgedesign/8022018799
15. ITS A HELL OF A TIME TO START learning to write HTML & CSS now • Lots of new features with spotty support • More is expected of HTML/CSS devs • Tons of devices/contexts Building with HTML & CSS http://www.flickr.com/photos/ruffedgedesign/8022018799
16. ITS A HELL OF A TIME TO START learning to write HTML & CSS now • Lots of new features with spotty support • Bootstrap and other libraries • More is expected of HTML/CSS devs • Tons of devices/contexts Building with HTML & CSS http://www.flickr.com/photos/ruffedgedesign/8022018799
17. SO, LET’S START WITH A CLEAN SLATE and agree on the following. Dealsies? • HTML and CSS’s job(s) • Flavors of HTML and CSS • Knowing just enough can be dangerous Building with HTML & CSS
18. SO, LET’S START WITH A CLEAN SLATE and agree on the following. Dealsies? • HTML and CSS’s job(s) • Flavors of HTML and CSS • Knowing just enough can be dangerous Building with HTML & CSS
19. SO, LET’S START WITH A CLEAN SLATE and agree on the following. Dealsies? • HTML and CSS’s job(s) • Flavors of HTML and CSS • Knowing just enough can be dangerous Building with HTML & CSS
20. SO, LET’S START WITH A CLEAN SLATE and agree on the following. Dealsies? • HTML and CSS’s job(s) • Flavors of HTML and CSS • Knowing just enough can be dangerous Building with HTML & CSS * .div { background: taupe; } <marquee>This just in...</marquee> <div class=”heading”>The Geocities Home of Fred</div> <blink>Click Here!</blink> <div><div><div>Claustrophobia: Chapter 1</div></div></div> <a href=”” target=”_blank” style=”background: red; color: green;”>How not to write a link</a>
21. “GOTTA KEEP THEM SEPARATED” Structure and Presentation online Building with HTML & CSS
22. “GOTTA KEEP THEM SEPARATED” Structure and Presentation online • HTML = Structure Building with HTML & CSS
23. “GOTTA KEEP THEM SEPARATED” Structure and Presentation online • HTML = Structure • CSS = Presentation Building with HTML & CSS
24. “GOTTA KEEP THEM SEPARATED” Structure and Presentation online • HTML = Structure • CSS = Presentation • JavaScript = Behavior Building with HTML & CSS
25. “GOTTA KEEP THEM SEPARATED” Structure and Presentation online • HTML = Structure • Where else do we see structure + presentation separated in the real world? • CSS = Presentation • JavaScript = Behavior Building with HTML & CSS
26. STRUCTURE What are we working with here? • Semantic Tags! • Attributes • Supporting Tags! Building with HTML & CSS
27. STRUCTURE What are we working with here? • Semantic Tags! • Attributes • Supporting Tags! Building with HTML & CSS My “Honey-do” List ========== Grocery Store ---------- * Milk * Eggs * Toothpaste * Kashi Cereal (Only if on sale!) Yardwork ---------- * Get leaf bags at Home Depot * Deal with dead herbs * Rake leaves * Clean gutters
28. STRUCTURE What are we working with here? • Semantic Tags! • Attributes • Supporting Tags! Building with HTML & CSS My “Honey-do” List ========== Grocery Store ---------- * Milk * Eggs * Toothpaste * Kashi Cereal (Only if on sale!) Yardwork ---------- * Get leaf bags at Home Depot * Deal with dead herbs * Rake leaves * Clean gutters <!-- semantic tags --> <h1>My “Honey-do” List</h1> <h2>Grocery Store</h2> <ul> <li>Milk</li> <li>Eggs</li> <li>Toothpaste</li> <li>Kashi Cereal <em>(Only if on sale!)</em></li> </ul> <h2>Yardwork</h2> <ol> <li>Get leaf bags at Home Depot</li> <li>Deal with dead herbs</li> <li>Rake leaves</li> <li>Clean gutters</li> </ol>
29. STRUCTURE What are we working with here? • Semantic Tags! • Attributes • Supporting Tags! Building with HTML & CSS My “Honey-do” List ========== Grocery Store ---------- * Milk * Eggs * Toothpaste * Kashi Cereal (Only if on sale!) Yardwork ---------- * Get leaf bags at Home Depot * Deal with dead herbs * Rake leaves * Clean gutters <!-- semantic tags --> <h1>My “Honey-do” List</h1> <h2>Grocery Store</h2> <ul> <li>Milk</li> <li>Eggs</li> <li>Toothpaste</li> <li>Kashi Cereal <em>(Only if on sale!)</em></li> </ul> <h2>Yardwork</h2> <ol> <li>Get leaf bags at Home Depot</li> <li>Deal with dead herbs</li> <li>Rake leaves</li> <li>Clean gutters</li> </ol> <!-- semantic w/ supporting tags --> <div> <h1>My “Honey-do” List</h1> <h2>Grocery Store</h2> <ul> <li>Milk</li> <li>Eggs</li> <li>Toothpaste</li> <li>Kashi Cereal <em>(Only if on sale!)</em></li> </ul> ... </div> <div> <h1>My Holiday <span>or I just did ALLTHECHORES</span> Wishlist</h1> <ul> <li>Playstation 4</li> <li>Macbook Air</li> <li>Comics! <span>Anything Green Lantern, please</span></li> <li>A Pony</li> </ul> </div>
30. STRUCTURE What are we working with here? • Semantic Tags! • Attributes • Supporting Tags! Building with HTML & CSS My “Honey-do” List ========== Grocery Store ---------- * Milk * Eggs * Toothpaste * Kashi Cereal (Only if on sale!) Yardwork ---------- * Get leaf bags at Home Depot * Deal with dead herbs * Rake leaves * Clean gutters <!-- semantic tags --> <h1>My “Honey-do” List</h1> <h2>Grocery Store</h2> <ul> <li>Milk</li> <li>Eggs</li> <li>Toothpaste</li> <li>Kashi Cereal <em>(Only if on sale!)</em></li> </ul> <h2>Yardwork</h2> <ol> <li>Get leaf bags at Home Depot</li> <li>Deal with dead herbs</li> <li>Rake leaves</li> <li>Clean gutters</li> </ol> <!-- semantic w/ supporting tags --> <div> <h1>My “Honey-do” List</h1> <h2>Grocery Store</h2> <ul> <li>Milk</li> <li>Eggs</li> <li>Toothpaste</li> <li>Kashi Cereal <em>(Only if on sale!)</em></li> </ul> ... </div> <div> <h1>My Holiday <span>or I just did ALLTHECHORES</span> Wishlist</h1> <ul> <li>Playstation 4</li> <li>Macbook Air</li> <li>Comics! <span>Anything Green Lantern, please</span></li> <li>A Pony</li> </ul> </div> <!-- semantic w/ supporting tags and attributes --> <div class=”list list-honeydo” id=”honeydo-nov2”> <h1>My “Honey-do” List</h1> <h2>Grocery Store</h2> <ul> <li>Milk</li> <li>Eggs</li> <li>Toothpaste</li> <li><a href=”https://www.kashi.com/”>Kashi Cereal</a> <em>(Only if on sale!)</em></li> </ul> ... </div> <div class=”list list-wishlist” id=”wishlist-2013”> <h1>My Holiday <span class=”scream”>or I just did ALLTHECHORES</span> Wishlist</h1> <ul> <li>Playstation 4</li> <li>Macbook Air</li> <li>Comics! <span class=”preference”>Anything Green Lantern, please</span></li> <li>A Pony</li> </ul> </div>
31. What are we working with here? PRESENTATION • Rules • Cascade and Specificity • Selectors + Properties + Values Building with HTML & CSS
32. What are we working with here? PRESENTATION • Rules • Cascade and Specificity • Selectors + Properties + Values // css rules - list em out // selector { property: value goes here; } milk ---------- Hood, half gallon eggs ---------- dozen, brown, brand doesn't matter peanut butter ---------- Teddy's creamy Building with HTML & CSS
33. What are we working with here? PRESENTATION • Rules • Cascade and Specificity • Selectors + Properties + Values // css rules - list em out // selector { property: value goes here; } milk ---------- Hood, half gallon eggs ---------- dozen, brown, brand doesn't matter peanut butter ---------- Teddy's creamy // css rules - list em out // selector { property: value goes here; } milk { brand: hood; pasteurized: yes; growth-hormones: none; size: half-gallon; } eggs { brand: generic; color: brown; count: 12; } peanut-butter { brand: teddy’s; // the best, hands down texture: creamy; salt: none; } Building with HTML & CSS
34. What are we working with here? PRESENTATION • Rules • Cascade and Specificity • Selectors + Properties + Values // css rules - list em out // selector { property: value goes here; } milk ---------- Hood, half gallon eggs ---------- dozen, brown, brand doesn't matter peanut butter ---------- Teddy's creamy // css rules - list em out // selector { property: value goes here; } milk { brand: hood; pasteurized: yes; growth-hormones: none; size: half-gallon; } eggs { brand: generic; color: brown; count: 12; } peanut-butter { brand: teddy’s; // the best, hands down texture: creamy; salt: none; } Building with HTML & CSS // css rules - list em out // selector { property: value goes here; } h1 { font-size: 48px; margin-bottom: 24px; } ol, ul { list-style: none; color: black; } ol li, ul li { font-size: 16px; margin-bottom: 10px; border-bottom: 1px solid teal; padding-bottom: 10px; }
35. What are we working with here? PRESENTATION • Rules • Cascade and Specificity • Selectors + Properties + Values // css rules - list em out // selector { property: value goes here; } milk ---------- Hood, half gallon eggs ---------- dozen, brown, brand doesn't matter peanut butter ---------- Teddy's creamy // css rules - list em out // selector { property: value goes here; } milk { brand: hood; pasteurized: yes; growth-hormones: none; size: half-gallon; } eggs { brand: generic; color: brown; count: 12; } peanut-butter { brand: teddy’s; // the best, hands down texture: creamy; salt: none; } Building with HTML & CSS // css rules - list em out // selector { property: value goes here; } h1 { font-size: 48px; margin-bottom: 24px; } ol, ul { list-style: none; color: black; } ol li, ul li { font-size: 16px; margin-bottom: 10px; border-bottom: 1px solid teal; padding-bottom: 10px; } // css rules - list em out // selector { property: value goes here; } #honeydo-nov2 { font-size: 48px; margin-bottom: 24px; } .list { list-style: none; color: black; } .list li { font-size: 16px; margin-bottom: 10px; border-bottom: 1px solid teal; padding-bottom: 10px; }
36. Demo Time! STOP! Building with HTML & CSS http://www.flickr.com/photos/gregor_y/38137970/
37. <!DOCTYPE html> <html lang="en"> <head> <!-- page metadata/supporting content area --> <meta charset="utf-8" /> <title>Page title</title> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> </head> <body> <!-- content area --> </body> </html> Building with HTML & CSS DEMO: BASIC FRAME
38. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Page title</title> <link rel="stylesheet" href="basic.css" type="text/css" media="all" /> </head> <body> Recipe Image Recipe Name Preparation Time Total Time Serving Size Ingredients Directions Source Related Recipes </body> </html> Building with HTML & CSS DEMO: ADDING CONTENT
39. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Page title</title> <link rel="stylesheet" href="basic.css" type="text/css" media="all" /> </head> <body> <h1>Recipe Book</h1> <figure> <img src="raspberry-lemonade.jpg" alt="Raspberry Lemonade" /> <figcaption>A cool glass of Rasperry Lemonade is perfect for a summer afternoon</figcaption> </figure> <h2>Raspberry Lemonade</h2> <dl> <dt>prep:</dt> <dd>15 mins</dd> <dt>total time:</dt> <dd>45 mins</dd> <dt>servings:</dt> <dd> 12</dd> </dl> <h3>Ingredients</h3> <ul> <li>10 sliced lemons</li> Building with HTML & CSS DEMO: ADDING SEMANTIC STRUCTURE
40. <h3>Ingredients</h3> <ul> <li>10 sliced lemons</li> <li>2 cups raspberries</li> <li>1 1/2 cups sugar</li> <li>6 cups water</li> <li>2 1/4 cups tequila blanco (optional)</li> <li>Mint, for garnish</li> </ul> <h3>Directions</h3> <ol> <li>Combine lemons, raspberries, and sugar in a large pot. Pound the mixture firmly with the end of a straight rolling pin (or a large wooden spoon), extracting as much juice as possible, about 10 minutes.</li> <li>Stir in water. Pour through a sieve into a large bowl. Press the solids until all juice is extracted. Discard the solids. Serve over ice.</li> <li>Cocktail version: Stir tequila into lemonade. Serve over ice, and garnish with mint.</li> </ol> <p>Source: <a href="http://www.marthastewart.com/345019/raspberry-lemonade">Everyday Food, May 2009</a></p> <h2>Related Recipes</h2> <ul> <li> <a href="http://www.nytimes.com/interactive/2012/06/12/dining/summer-drinks- generator.html?ref=dining#/?id=singapore-sling_3-0-0"> <img src="singapore-sling.jpg" alt="Singapore Sling" /> Singapore Sling from the New York Times </a> </li> Building with HTML & CSS DEMO: ADDING SEMANTIC STRUCTURE
41. </ol> <p>Source: <a href="http://www.marthastewart.com/345019/raspberry-lemonade">Everyday Food, May 2009</a></p> <h2>Related Recipes</h2> <ul> <li> <a href="http://www.nytimes.com/interactive/2012/06/12/dining/summer-drinks- generator.html?ref=dining#/?id=singapore-sling_3-0-0"> <img src="singapore-sling.jpg" alt="Singapore Sling" /> Singapore Sling from the New York Times </a> </li> <li> <a href="http://www.simplyrecipes.com/recipes/lavender_lemonade/"> <img src="lavender-lemonade.jpg" alt="Lavender Lemonade" /> Lavender Lemonade from Simply Recipes </a> </li> <li> <a href="http://www.esquire.com/the-side/food-and-drink/summer- cocktails-2013#slide-7"> <img src="firing-squad.jpg" alt="Sicilian Firing Squad Cocktail" /> Sicilian Firing Squad from Esquire </a> </li> </ul> </body> </html> Building with HTML & CSS DEMO: ADDING SEMANTIC STRUCTURE
42. HOW’S IT LOOKING? Building with HTML & CSS
43. HOW’S IT LOOKING? Building with HTML & CSS
44. HOW’S IT LOOKING? Building with HTML & CSS
45. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Page title</title> <link rel="stylesheet" href="basic.css" type="text/css" media="all" /> </head> <body> <h1>Recipe Book</h1> <figure> <img src="raspberry-lemonade.jpg" alt="Raspberry Lemonade" /> <figcaption>A cool glass of Rasperry Lemonade is perfect for a summer afternoon</figcaption> </figure> <h2>Raspberry Lemonade</h2> <dl> <dt>prep:</dt> <dd>15 mins</dd> <dt>total time:</dt> <dd>45 mins</dd> <dt>servings:</dt> <dd> 12</dd> </dl> <h3>Ingredients</h3> <ul> <li>10 sliced lemons</li> Building with HTML & CSS DEMO: HOW CSS IS REFERENCED (EXTERNALLY)
46. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Page title</title> <style type=”text/css” media=”all”> /* CSS rules applied to this page go here */ </style> </head> <body> <h1>Recipe Book</h1> <figure> <img src="raspberry-lemonade.jpg" alt="Raspberry Lemonade" /> <figcaption>A cool glass of Rasperry Lemonade is perfect for a summer afternoon</figcaption> </figure> <h2>Raspberry Lemonade</h2> <dl> <dt>prep:</dt> <dd>15 mins</dd> <dt>total time:</dt> <dd>45 mins</dd> <dt>servings:</dt> <dd> 12</dd> </dl> <h3>Ingredients</h3> Building with HTML & CSS DEMO: HOW CSS IS REFERENCED (IN DOCUMENT)
47. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Page title</title> </head> <body> <h1 style=”background: green;”>Recipe Book</h1> <figure> <img src="raspberry-lemonade.jpg" alt="Raspberry Lemonade" /> <figcaption>A cool glass of Rasperry Lemonade is perfect for a summer afternoon</figcaption> </figure> <h2 style=”background: green; color: yellow;”>Raspberry Lemonade</h2> <dl> <dt>prep:</dt> <dd>15 mins</dd> <dt>total time:</dt> <dd>45 mins</dd> <dt>servings:</dt> <dd> 12</dd> </dl> <h3>Ingredients</h3> <ul> <li>10 sliced lemons</li> <li>2 cups raspberries</li> <li>1 1/2 cups sugar</li> Building with HTML & CSS DEMO: HOW CSS IS REFERENCED (IN LINE)
48. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Page title</title> <!-- external is “totes” the preferred way to reference CSS --> <link rel="stylesheet" href="basic.css" type="text/css" media="all" /> </head> <body> <h1>Recipe Book</h1> <figure> <img src="raspberry-lemonade.jpg" alt="Raspberry Lemonade" /> <figcaption>A cool glass of Rasperry Lemonade is perfect for a summer afternoon</figcaption> </figure> <h2>Raspberry Lemonade</h2> <dl> <dt>prep:</dt> <dd>15 mins</dd> <dt>total time:</dt> <dd>45 mins</dd> <dt>servings:</dt> <dd> 12</dd> </dl> <h3>Ingredients</h3> <ul> Building with HTML & CSS DEMO: HOW CSS IS REFERENCED (PREFERRED)
49. /* Recipe example - basic style */ body { background-color: #FCC8C3; margin: 0; padding: 3%; font: 16px/1.5 "Lucida Grande", helvetica, arial, sans-serif; } a { color: #F0A39B; text-decoration: none; transition: all 0.3s ease-in-out 0s; } a:hover { color: #F05B4B; } h1 { display: none; } h2 { border-bottom: 1px solid #DDDDDD; padding-bottom: .2em; } img { width: 100%; } Building with HTML & CSS DEMO: BASIC CSS
50. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Page title</title> <link rel="stylesheet" href="basic.css" type="text/css" media="all" /> </head> <body> <div id="container"> <header> <h1>Recipe Book</h1> </header> <section> <article class="recipe raspberry-lemonade"> <figure> <img src="raspberry-lemonade.jpg" alt="Raspberry Lemonade" /> <figcaption>A cool glass of Rasperry Lemonade is perfect for a summer afternoon</figcaption> </figure> <h2 class=”title”>Raspberry <span class="color-splash">Lemonade</span> <a href="#note1">*</a> </h2> <dl class="meta"> Building with HTML & CSS DEMO: ADDING CLASSES/SUPPORT
51. </h2> <dl class="meta"> <dt>prep:</dt> <dd>15 mins</dd> <dt>total time:</dt> <dd>45 mins</dd> <dt>servings:</dt> <dd> 12</dd> </dl> <section class="ingredients"> <h3>Ingredients</h3> <ul> <li>10 sliced lemons</li> <li>2 cups raspberries</li> <li>1 1/2 cups sugar</li> <li>6 cups water</li> <li>2 1/4 cups tequila blanco (optional)</li> <li>Mint, for garnish</li> </ul> </section> <section class="directions"> <h3>Directions</h3> <ol class="directions-list"> <li>Combine lemons, raspberries, and sugar in a large pot. Pound the mixture firmly with the end of a straight rolling pin (or a large wooden spoon), extracting as much juice as possible, about 10 minutes.</li> <li>Stir in water. Pour through a sieve into a large bowl. Press the solids until all juice is extracted. Discard the solids. Serve over ice.</li> <li>Cocktail version: Stir tequila into lemonade. Serve over ice, and garnish with mint.</li> </ol> </section> Building with HTML & CSS DEMO: ADDING CLASSES/SUPPORT
52. <footer> <p>Source: <a href="http://www.marthastewart.com/345019/raspberry- lemonade">Everyday Food, May 2009</a></p> <p id="note1" class="note">*with a kick</p> </footer> </article> </section> <aside> <h2 class="title">Related Recipes</h2> <ul class="related-list"> <li> <a href="http://www.nytimes.com/interactive/2012/06/12/dining/summer-drinks- generator.html?ref=dining#/?id=singapore-sling_3-0-0"> <img src="singapore-sling.jpg" alt="Singapore Sling" /> Singapore Sling from the <span class="source">New York Times</span> </a> </li> <li> <a href="http://www.simplyrecipes.com/recipes/lavender_lemonade/"> <img src="lavender-lemonade.jpg" alt="Lavender Lemonade" /> Lavender Lemonade from <span class="source">Simply Recipes</span> </a> </li> <li> <a href="http://www.esquire.com/the-side/food-and-drink/summer- cocktails-2013#slide-7"> <img src="firing-squad.jpg" alt="Sicilian Firing Squad Cocktail" /> Sicilian Firing Squad from <span class="source">Esquire</span> </a> </li> </ul> </aside> Building with HTML & CSS DEMO: ADDING CLASSES/SUPPORT
53. </article> </section> <aside> <h2 class="title">Related Recipes</h2> <ul class="related-list"> <li> <a href="http://www.nytimes.com/interactive/2012/06/12/dining/summer-drinks- generator.html?ref=dining#/?id=singapore-sling_3-0-0"> <img src="singapore-sling.jpg" alt="Singapore Sling" /> Singapore Sling from the <span class="source">New York Times</span> </a> </li> <li> <a href="http://www.simplyrecipes.com/recipes/lavender_lemonade/"> <img src="lavender-lemonade.jpg" alt="Lavender Lemonade" /> Lavender Lemonade from <span class="source">Simply Recipes</span> </a> </li> <li> <a href="http://www.esquire.com/the-side/food-and-drink/summer- cocktails-2013#slide-7"> <img src="firing-squad.jpg" alt="Sicilian Firing Squad Cocktail" /> Sicilian Firing Squad from <span class="source">Esquire</span> </a> </li> </ul> </aside> </div> </body> </html> Building with HTML & CSS DEMO: ADDING CLASSES/SUPPORT
54. /* Recipe example - basic style with */ body { background-color: #FCC8C3; margin: 0; padding: 3%; font: 16px/1.5 "Lucida Grande", helvetica, arial, sans-serif; } a { color: #F0A39B; text-decoration: none; transition: all 0.3s ease-in-out 0s; } a:hover { color: #F05B4B; } h1 { display: none; } h2 { border-bottom: 1px solid #DDDDDD; padding-bottom: .2em; } img { width: 100%; } #container { width: 600px; Building with HTML & CSS DEMO: ADDING MORE STYLE WITH CLASSES
55. width: 100%; } #container { width: 600px; margin: 0 auto; } .recipe { padding: 3%; background-color: #fff; } .recipe .title { margin: 0 0 .5em 0; font-size: 36px; } .recipe figure { width: 400px; margin: 20px auto; } .recipe img { border: 1px solid #FCC8C3; } .recipe figcaption { color: #aaa; font-size: 11px; font-style: italic; } .recipe .meta dt, .recipe .meta dd { display: inline; } Building with HTML & CSS DEMO: ADDING MORE STYLE WITH CLASSES
56. font-style: italic; } .recipe .meta dt, .recipe .meta dd { display: inline; } .recipe .meta dd { clear: right; margin: 0 10px 0 0; font-weight: bold; } .recipe footer p { font-size: 14px; font-style: italic; color: #999; } .recipe footer .note { color: #aaa; font-size: 11px; } aside { background-color: #FCE1DD; text-align: center; padding: 5%; } aside .title { border-bottom: 1px solid #FC9A84; } aside .related-list { Building with HTML & CSS DEMO: ADDING MORE STYLE WITH CLASSES
57. padding: 5%; } aside .title { border-bottom: 1px solid #FC9A84; } aside .related-list { list-style-type: none; margin: 0 auto; padding: 0; width: 250px; } aside .related-list li { margin: 10% 0; } aside .related-list img { border: 1px solid #BDBAA7; background-color: #fff; padding: 5px; } Building with HTML & CSS DEMO: ADDING MORE STYLE WITH CLASSES
58. HOW’S THAT BASIC VERSION LOOKING? Building with HTML & CSS
59. HOW’S THAT BASIC VERSION LOOKING? Building with HTML & CSS
60. HOW’S THAT BASIC VERSION LOOKING? Building with HTML & CSS
61. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Page title</title> <link rel="stylesheet" href="fancy.css" type="text/css" media="all" /> </head> <body> <h1>Recipe Book</h1> <figure> <img src="raspberry-lemonade.jpg" alt="Raspberry Lemonade" /> <figcaption>A cool glass of Rasperry Lemonade is perfect for a summer afternoon</figcaption> </figure> <h2>Raspberry Lemonade</h2> <dl> <dt>prep:</dt> <dd>15 mins</dd> <dt>total time:</dt> <dd>45 mins</dd> <dt>servings:</dt> <dd> 12</dd> </dl> <h3>Ingredients</h3> <ul> <li>10 sliced lemons</li> Building with HTML & CSS DEMO: HOW CSS IS REFERENCED (EXTERNALLY)
62. HOW’S THAT FANCY VERSION LOOKING? Building with HTML & CSS
63. HOW’S THAT FANCY VERSION LOOKING? Building with HTML & CSS
64. HOW’S THAT FANCY VERSION LOOKING (SCRUNCHED)? Building with HTML & CSS
65. HOW’S THAT FANCY VERSION LOOKING (SCRUNCHED)? Building with HTML & CSS
66. Building with HTML & CSS Some Advanced Topics & Concepts ONWARD TO
67. ADVANCED TOPICS & CONCEPTS Responsive Design How does your layout and UI react based on different browser/viewport sizes? Building with HTML & CSS
68. ADVANCED TOPICS & CONCEPTS Responsive Design How does your layout and UI react based on different browser/viewport sizes? Building with HTML & CSS
69. ADVANCED TOPICS & CONCEPTS Responsive Design How does your layout and UI react based on different browser/viewport sizes? Building with HTML & CSS
70. ADVANCED TOPICS & CONCEPTS CSS Preprocessors Can CSS be made better? How about variables? Extendable classes? Functions? Abstracted architecture + production optimization? Building with HTML & CSS
71. ADVANCED TOPICS & CONCEPTS CSS Preprocessors Can CSS be made better? How about variables? Extendable classes? Functions? Abstracted architecture + production optimization? Building with HTML & CSS // SASS-based variables: colors - basic $black: rgb(10,10,10); $white: rgb(250,250,250); $d-blue: rgb(58, 162, 224); $d-orange: rgb(247, 168, 86); $d-yellow: rgb(242, 212, 142); $d-green: rgb(95, 187, 121); $d-red: rgb(226, 94, 100); // SASS-based variables: application: general colors $color-confirm: $d-green; $color-warning: $d-yellow; $color-error: $d-red; $color-status: $d-blue; $color-create: $d-green; $color-delete: $d-red; $color-support: $d-orange; // SASS-based variables: fonts $f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif; $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
72. ADVANCED TOPICS & CONCEPTS CSS Preprocessors Can CSS be made better? How about variables? Extendable classes? Functions? Abstracted architecture + production optimization? Building with HTML & CSS // SASS-based variables: colors - basic $black: rgb(10,10,10); $white: rgb(250,250,250); $d-blue: rgb(58, 162, 224); $d-orange: rgb(247, 168, 86); $d-yellow: rgb(242, 212, 142); $d-green: rgb(95, 187, 121); $d-red: rgb(226, 94, 100); // SASS-based variables: application: general colors $color-confirm: $d-green; $color-warning: $d-yellow; $color-error: $d-red; $color-status: $d-blue; $color-create: $d-green; $color-delete: $d-red; $color-support: $d-orange; // SASS-based variables: fonts $f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif; $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace; // SASS-based extend - no scrubs nor bullets %ui-no-list { list-style: none; margin: 0; padding: 0; text-indent: 0; li, dt, dd { margin: 0; padding: 0; } } nav ul { @extend %ui-no-list; } // SASS-based mixin - size them fonts @mixin font-size($sizeValue: 16){ font-size: $sizeValue + px; font-size: ($sizeValue/10) + rem; } @include font-size(12);
73. ADVANCED TOPICS & CONCEPTS Accessibility How can we ensure our semantics and planned interaction controls can be used as many people as possible? Building with HTML & CSS
74. ADVANCED TOPICS & CONCEPTS Accessibility How can we ensure our semantics and planned interaction controls can be used as many people as possible? Building with HTML & CSS
75. ADVANCED TOPICS & CONCEPTS Accessibility How can we ensure our semantics and planned interaction controls can be used as many people as possible? Building with HTML & CSS
76. ADVANCED TOPICS & CONCEPTS Scalable & Modular HTML & CSS How do we structure our HTML and CSS code to ensure that we can plug and play bits of UI over time? How do we avoid Front End Development Jenga? Building with HTML & CSS
77. WE JUST TOUCHED THE SURFACE. HERE’S MORE! Building with HTML & CSS HTML CSS Tools Topics Responsive Design http://bradfrost.github.io/this-is- responsive/resources.html Can I Use? http://caniuse.com/ HTML5 Doctor http://html5doctor.com CSSCSS http://zmoazeni.github.io/csscss/ CodeKit http://incident57.com/codekit/ CSS-Guidelines https://github.com/csswizardry/CSS- Guidelines CSS Almanac http://css-tricks.com/almanac/ ST2 HTML5 Bundle https://github.com/mrmartineau/ HTML5 CSS3 for Web Designers http://www.abookapart.com/ products/css3-for-web-designers Codepen http://codepen.io/ CSS Preprocessors http://sass-lang.com/ http://lesscss.org/ CSS Frameworks http://getbootstrap.com/ http://bourbon.io/ http://foundation.zurb.com/ Helium https://github.com/geuis/helium-css Accessibility http://www.google.com/accessibility/ building/ http://webaim.org/ Scalable & Modular CSS http://smacss.com/ W3Schools HTML5 Intro http://www.w3schools.com/html/ html5_intro.asp Sitepoint HTML Wiki http://www.sitepoint.com/html/ html5-html-css/ CSS Inheritance http://www.sitepoint.com/css3- inheritance-tips-tricks/ CSS Selector Tutorial http://css.maxdesign.com.au/ selectutorial/ HTML Elements http://reference.sitepoint.com/html/ elements CSS Properties http://reference.sitepoint.com/css/ propertyref HTML5 for Web Designers http://www.abookapart.com/ products/html5-for-web-designers
78. </presentation> <discussion> T(H)ANKS! Slides speakerdeck.com/talbs/building-with-html-and-css Demo Code github.com/frrrances/bostonpython-htmlcss-talk Say “Hi” and Chat More @strikeseason @talbs Building with HTML & CSS http://www.flickr.com/photos/newyork/3717381867