Building with HTML and CSS

HTML & CSS Building W I T H Frances Botsford
@strikeseason Brian Talbot @talbs “Helper Languages” The Boston Python User Group

Frances and Brian HELLO! WE ARE Building with HTML &
CSS http://www.flickr.com/photos/gregor_y/38137970/

Designers at edX Frances and Brian HELLO! WE ARE Building
with HTML & CSS http://www.flickr.com/photos/gregor_y/38137970/

Designers at edX Frances and Brian Nerds HELLO! WE ARE
Building with HTML & CSS http://www.flickr.com/photos/gregor_y/38137970/

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

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

ITS A GREAT TIME TO START learning to write HTML
& CSS now Building with HTML & CSS http://www.flickr.com/photos/ruffedgedesign/8022018799

& CSS now • HTML & CSS have been out and around Building with HTML & CSS http://www.flickr.com/photos/ruffedgedesign/8022018799

& 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

& 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

& 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

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

write HTML & CSS now • Lots of new features with spotty support Building with HTML & CSS http://www.flickr.com/photos/ruffedgedesign/8022018799

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

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

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

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

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>

“GOTTA KEEP THEM SEPARATED” Structure and Presentation online Building with
HTML & CSS

“GOTTA KEEP THEM SEPARATED” Structure and Presentation online • HTML
= Structure Building with HTML & CSS

= Structure • CSS = Presentation Building with HTML & CSS

= Structure • CSS = Presentation • JavaScript = Behavior Building with HTML & CSS

= Structure • Where else do we see structure + presentation separated in the real world? • CSS = Presentation • JavaScript = Behavior Building with HTML & CSS

STRUCTURE What are we working with here? • Semantic Tags!
• Attributes • Supporting Tags! Building with HTML & CSS

• 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

• 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  <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>

• 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  <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>  <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>

• 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  <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>  <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>  <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>

What are we working with here? PRESENTATION • Rules •
Cascade and Specificity • Selectors + Properties + Values Building with HTML & CSS

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

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

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; }

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; }

Demo Time! STOP! Building with HTML & CSS http://www.flickr.com/photos/gregor_y/38137970/

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8" /> <title>Page title</title> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> </head> <body>  </body> </html> Building with HTML & CSS DEMO: BASIC FRAME

<!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

<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

</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

HOW’S IT LOOKING? Building with HTML & CSS

</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)

<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)

/* 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

</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

<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

</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

/* 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

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

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

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

HOW’S THAT BASIC VERSION LOOKING? Building with HTML & CSS

HOW’S THAT FANCY VERSION LOOKING? Building with HTML & CSS

HOW’S THAT FANCY VERSION LOOKING (SCRUNCHED)? Building with HTML &
CSS

Building with HTML & CSS Some Advanced Topics & Concepts
ONWARD TO

ADVANCED TOPICS & CONCEPTS Responsive Design How does your layout
and UI react based on different browser/viewport sizes? Building with HTML & CSS

ADVANCED TOPICS & CONCEPTS CSS Preprocessors Can CSS be made
better? How about variables? Extendable classes? Functions? Abstracted architecture + production optimization? Building with HTML & CSS

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;

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);

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

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

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

</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

Building with HTML and CSS

Building with HTML and CSS

More Decks by Brian Talbot

Other Decks in Design

Featured

Transcript