├── .gitignore ├── README.md ├── assets ├── css │ └── main.css ├── img │ ├── grid.png │ └── texture.jpg └── js │ ├── html5shiv.js │ └── jquery-1.9.1.min.js ├── index.html ├── lessons ├── 00-experiments │ ├── assets │ │ ├── img │ │ │ └── weather.png │ │ └── psd │ │ │ ├── alerts.psd │ │ │ ├── calendar.psd │ │ │ ├── flights.psd │ │ │ └── weather.psd │ └── weather-application │ │ ├── assets │ │ ├── css │ │ │ └── main.css │ │ ├── img │ │ │ ├── grid.png │ │ │ └── sprite.png │ │ ├── js │ │ │ ├── html5shiv.js │ │ │ └── jquery-1.9.1.min.js │ │ └── psd │ │ │ └── weather-application-sprite.psd │ │ ├── index.html │ │ └── weather-application.zip ├── 01-terminology-syntax-introduction │ ├── basic │ │ ├── basic.html │ │ ├── basic.zip │ │ └── css │ │ │ └── basic.css │ └── reset │ │ ├── css │ │ └── reset.css │ │ ├── reset.html │ │ └── reset.zip ├── 02-elements-semantics │ ├── about.html │ ├── assets │ │ ├── css │ │ │ └── main.css │ │ └── js │ │ │ └── html5shiv.js │ ├── elements-semantics.zip │ ├── index.html │ └── journal.html ├── 03-box-model-positioning │ ├── about.html │ ├── assets │ │ ├── css │ │ │ └── main.css │ │ └── js │ │ │ └── html5shiv.js │ ├── box-model-positioning.zip │ ├── index.html │ └── journal.html ├── 04-typography │ ├── about.html │ ├── assets │ │ ├── css │ │ │ └── main.css │ │ └── js │ │ │ └── html5shiv.js │ ├── experiments.html │ ├── in-class │ │ ├── css │ │ │ └── styles.css │ │ ├── fonts │ │ │ └── .gitkeep │ │ └── index.html │ ├── index.html │ ├── journal.html │ └── typography.zip ├── 05-backgrounds-gradients │ ├── about.html │ ├── assets │ │ ├── css │ │ │ └── main.css │ │ ├── img │ │ │ ├── grid.png │ │ │ └── wile.jpg │ │ ├── js │ │ │ ├── html5shiv.js │ │ │ └── jquery-1.9.1.min.js │ │ └── psd │ │ │ ├── alerts.psd │ │ │ ├── calendar.psd │ │ │ ├── flights.psd │ │ │ └── weather.psd │ ├── experiments.html │ ├── experiments │ │ └── weather-application │ │ │ ├── assets │ │ │ ├── css │ │ │ │ └── main.css │ │ │ ├── img │ │ │ │ ├── grid.png │ │ │ │ └── sprite.png │ │ │ ├── js │ │ │ │ ├── html5shiv.js │ │ │ │ └── jquery-1.9.1.min.js │ │ │ └── psd │ │ │ │ └── weather-application-sprite.psd │ │ │ └── index.html │ ├── index.html │ ├── journal.html │ └── week-5-in-class │ │ ├── index.html │ │ ├── main.css │ │ └── week-5-in-class.zip ├── 06-unordered-ordered-definition-lists │ ├── activity.html │ ├── assets │ │ ├── css │ │ │ ├── main.css │ │ │ └── reset.css │ │ └── img │ │ │ └── road-runner-wile-e-coyote.png │ ├── css │ │ ├── activity.css │ │ └── main.css │ ├── img │ │ └── shay.jpg │ ├── index.html │ ├── lesson-6-in-class │ │ ├── index.html │ │ ├── lesson-6-in-class.zip │ │ └── main.css │ ├── paths.html │ └── quick-reference.html ├── 06a-hamburgers │ ├── assets │ │ ├── css │ │ │ ├── reset.css │ │ │ └── style.css │ │ ├── img │ │ │ └── home.png │ │ └── js │ │ │ ├── functions.js │ │ │ ├── jquery.js │ │ │ ├── modernizr.js │ │ │ └── plugins.js │ ├── files.zip │ └── index.html ├── 07-images-audio-video │ ├── activity.html │ ├── background-video.html │ ├── css │ │ ├── activity.css │ │ ├── background-video.css │ │ ├── main.css │ │ └── people.css │ ├── img │ │ ├── rr.jpg │ │ ├── shay.jpg │ │ ├── sprites.png │ │ ├── taz.jpg │ │ ├── wile.jpg │ │ ├── wile1.jpg │ │ └── wile2.jpg │ ├── index.html │ ├── people.html │ └── vid │ │ └── space.mp4 ├── 08-building-forms │ ├── Inspiration │ │ ├── desert.jpg │ │ ├── forms.psd │ │ ├── index.html │ │ ├── main.css │ │ └── wile.jpg │ ├── css │ │ └── main.css │ └── index.html ├── 09-organizing-data-with-tables │ ├── css │ │ └── main.css │ └── index.html ├── 10-coding-practices │ ├── troubleshooting-1.zip │ ├── troubleshooting-1 │ │ ├── css │ │ │ └── main.css │ │ ├── img │ │ │ ├── artwork.jpg │ │ │ ├── bubba_smith.jpg │ │ │ ├── gw_bailey.jpg │ │ │ ├── kim_cattrall.jpg │ │ │ ├── michael_winslow.jpg │ │ │ └── steve_guttenberg.jpg │ │ └── index.html │ ├── troubleshooting-2.zip │ ├── troubleshooting-2 │ │ ├── css │ │ │ └── main.css │ │ ├── img │ │ │ └── artwork.jpg │ │ └── index.html │ ├── troubleshooting-3.zip │ ├── troubleshooting-3 │ │ ├── css │ │ │ └── main.css │ │ ├── img │ │ │ ├── artwork.jpg │ │ │ └── award.png │ │ └── index.html │ ├── troubleshooting-4.zip │ └── troubleshooting-4 │ │ ├── css │ │ └── main.css │ │ ├── img │ │ ├── artwork.jpg │ │ └── award.png │ │ └── index.html └── 11-extras │ ├── jquery.zip │ └── jquery │ ├── css │ ├── main.css │ └── normalize.css │ ├── img │ ├── backstretch │ │ ├── cheers.jpg │ │ ├── garfield-interior.jpg │ │ └── outside.jpg │ └── lightbox │ │ ├── image-1.jpg │ │ ├── image-2.jpg │ │ ├── image-3.jpg │ │ ├── image-4.jpg │ │ ├── image-5.jpg │ │ ├── image-6.jpg │ │ ├── thumb-1.jpg │ │ ├── thumb-2.jpg │ │ ├── thumb-3.jpg │ │ ├── thumb-4.jpg │ │ ├── thumb-5.jpg │ │ └── thumb-6.jpg │ ├── index.html │ └── js │ └── main.js └── wile ├── about.html ├── assets ├── css │ └── main.css ├── img │ ├── grid.png │ └── wile.jpg ├── js │ ├── html5shiv.js │ └── jquery-1.9.1.min.js └── psd │ ├── alerts.psd │ ├── calendar.psd │ ├── flights.psd │ └── weather.psd ├── experiments.html ├── index.html └── journal.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A Beginner’s Guide to HTML & CSS Coursework 2 | =========================================== 3 | 4 | Exercises for lessons on http://learn.shayhowe.com/html-css/ -------------------------------------------------------------------------------- /assets/img/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/assets/img/grid.png -------------------------------------------------------------------------------- /assets/img/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/assets/img/texture.jpg -------------------------------------------------------------------------------- /assets/js/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;darticle,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | 6 | 7 | 8 | Weather Application - Wile E. Coyote 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 |
27 | 28 |
29 | 30 |
31 |

Chicago

32 |

Today

33 |
34 | 35 |
    36 |
  • 37 | H: 81° 38 |
    • 39 |
  • 40 | L: 63° 41 |
    • 42 |
43 | 44 |
45 | 46 |

47 | 48 | 75° 49 | Sunny 50 | 51 |

52 | 53 |
54 | 55 | 56 | 57 |
    58 | 59 |
  1. 60 |

    Tue

    61 |
    Partly Cloudy
    62 |
      63 |
    • 79°
      • 64 |
    • 56°
      • 65 |
    66 |
    2. 67 | 68 |
  2. 69 |

    Wed

    70 |
    Rainy
    71 |
      72 |
    • 72°
      • 73 |
    • 49°
      • 74 |
    75 |
    3. 76 | 77 |
  3. 78 |

    Thu

    79 |
    Sunny
    80 |
      81 |
    • 85°
      • 82 |
    • 68°
      • 83 |
    84 | 85 |
  4. 86 |

    Fri

    87 |
    Cloudy
    88 |
      89 |
    • 78°
      • 90 |
    • 59°
      • 91 |
    92 |
    5. 93 | 94 |
95 | 96 |
97 | 98 |

99 | View Source 100 | / 101 | Download Source 102 |

103 | 104 | 105 | 106 | 107 | 108 |
109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /lessons/00-experiments/weather-application/weather-application.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/00-experiments/weather-application/weather-application.zip -------------------------------------------------------------------------------- /lessons/01-terminology-syntax-introduction/basic/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Basic HTML Document & CSS Stylesheet 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

I said the keys are in here.

21 | 22 |

Doc, I’m from the future. I came here in a time machine that you invented. Now, I need your help to get back to the year 1985. I, I don’t know. Hey, Doc, we better back up, we don’t have enough roads to get up to 88. Yeah, I guessed you’re a sailor, aren’t you, that’s why you wear that life preserver. Hey, George, buddy, you weren’t at school, what have you been doing all day?

23 | 24 |

Right, and where am I gonna be?

25 | 26 |

Thank you. In about thirty years. Wow, ah Red, you look great. Everything looks great. 1:24, I still got time. Oh my god. No, no not again, c’mon, c’mon. Hey. Libyans. Marty you gotta come back with me. I will. Go. Go.

27 | 28 |

No, I refuse to except the responsibility.

29 | 30 |

He’s your brother, Mom. The car, Dad, I mean He wrecked it, totaled it. I needed that car tomorrow night, Dad, I mean do you have any idea how important this was, do you have any clue? Don’t stop, Wilbert, drive. Hello, hello, anybody home? Think, McFly, think. I gotta have time to recopy it. Do your realize what would happen if I hand in my homework in your handwriting? I’d get kicked out of school. You wouldn’t want that to happen would you, would you? George.

31 | 32 |

Content provided by DeLorean Ipsum, the Back to the Future Lorem Ipsum generator.

33 | 34 |

← Return to the Coursework

35 | 36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /lessons/01-terminology-syntax-introduction/basic/basic.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/01-terminology-syntax-introduction/basic/basic.zip -------------------------------------------------------------------------------- /lessons/01-terminology-syntax-introduction/basic/css/basic.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* 51 | Resetting defaults 52 | */ 53 | 54 | b, strong { 55 | font-weight: bold; 56 | } 57 | i, em { 58 | font-style: italic; 59 | } 60 | 61 | /* 62 | Custom Styles 63 | */ 64 | 65 | body { 66 | background: #fff9ad; 67 | color: #5d5445; 68 | font: 16px/24px Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; 69 | } 70 | .container { 71 | max-width: 960px; 72 | margin: 48px auto; 73 | } 74 | 75 | /* 76 | Typography 77 | */ 78 | 79 | h1, h2, h3, h4, h5, h6 { 80 | color: #965d51; 81 | font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 82 | font-weight: bold; 83 | margin-bottom: 24px; 84 | } 85 | h1 { 86 | font-size: 48px; 87 | line-height: 48px; 88 | } 89 | h2 { 90 | font-size: 36px; 91 | line-height: 48px; 92 | } 93 | h3 { 94 | font-size: 24px; 95 | } 96 | p { 97 | margin-bottom: 24px; 98 | } 99 | 100 | /* 101 | Links 102 | */ 103 | 104 | a { 105 | color: #e4a467; 106 | text-decoration: none; 107 | } 108 | a:hover { 109 | color: #c9905b; 110 | } 111 | -------------------------------------------------------------------------------- /lessons/01-terminology-syntax-introduction/reset/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* 51 | Custom Styles 52 | */ 53 | -------------------------------------------------------------------------------- /lessons/01-terminology-syntax-introduction/reset/reset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HTML Document & CSS Reset 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Hello World!

19 | 20 |

Peek inside the reset.css file to see default styles, such as line heights, margins, paddings and font sizes, for elements toned down to help reduce browser inconsistencies.

21 | 22 |

← Return to the Coursework

23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /lessons/01-terminology-syntax-introduction/reset/reset.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/01-terminology-syntax-introduction/reset/reset.zip -------------------------------------------------------------------------------- /lessons/02-elements-semantics/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | About - Wile E. Coyote 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 |
26 | 27 |

Wile E. Coyote

28 | 29 | 36 | 37 |
38 | 39 | 40 | 41 |
42 | 43 |

About

44 | 45 |

Motivated by engineering, science and ornithology, Wile E. Coyote has made a successful career testing and prototyping in all fields of his study. His dedicated research on the wild Road Runner has been widely read in aviation circles. Recently he become the pre-eminent scholar on Acme studies including dynamite, inventing, and bird watching.

46 | 47 |
48 | 49 | 50 | 51 |
52 | 53 |

Experience

54 | 55 |
56 | 57 | 58 |

Freelancer, Genius

59 | 60 |

The dynamic combination of a bachelor’s degree in Ornithology and a master’s degree in Electrical Drawings & Schematics can only be described as Genius, if not Super Genius. Current work includes trapping the elusive Disapperalis Quickius, or road runner.

61 | 62 |
63 | 64 |
65 | 66 | 67 |

Product Tester & Usability Expert, Acme Corporation

68 | 69 |

Every year Acme Corporation releases an abundance of new products, including explosive tennis balls, giant rubber bands, rocket powered roller skates, and more, all of which need to be extensively tested and reported on.

70 | 71 |
72 | 73 |
74 | 75 | 76 | 77 |
78 | 79 |

Education

80 | 81 |
82 | 83 | 84 |

Electrical Drawings & Schematics, Looney State College

85 | 86 |

The Electrical Drawings & Schematics graduate program at Looney State College offers a strict discipline encompassing a diverse set of studies, including drawling, engineering, operations, pyrotechnics, schematics, and wiring.

87 | 88 |
89 | 90 |
91 | 92 | 93 |

Ornithology, Warner University

94 | 95 |

At the Warner Lab of Ornithology, students study to understand birds, reviewing their evolution, behavior, and ecology. Birds, and other related species, are brought into the laboratory for observation and examination.

96 | 97 |
98 | 99 |
100 | 101 | 102 | 103 |
104 | 105 |

Skills

106 | 107 |
    108 |
  • Amateur Paramedics
    • 109 |
  • Booby Traps
    • 110 |
  • Construction
    • 111 |
  • Dedication
    • 112 |
  • Extreme Sports
    • 113 |
  • Gourmet Cooking
    • 114 |
  • Hunting & Trapping
    • 115 |
  • Painting
    • 116 |
  • Setting Explosives
    • 117 |
118 | 119 |
120 | 121 | 122 | 123 | 126 | 127 |
128 | 129 | 130 | -------------------------------------------------------------------------------- /lessons/02-elements-semantics/assets/css/main.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* 51 | Resetting defaults 52 | */ 53 | 54 | b, strong { 55 | font-weight: bold; 56 | } 57 | i, em { 58 | font-style: italic; 59 | } 60 | sup { 61 | vertical-align: super; 62 | font-size: .85em; 63 | } 64 | 65 | /* 66 | Grid 67 | */ 68 | 69 | .container { 70 | max-width: 960px; 71 | margin: 48px auto; 72 | } 73 | 74 | /* 75 | Custom styles 76 | */ 77 | 78 | body { 79 | background: #fff9ad; 80 | color: #5d5445; 81 | font: 16px/24px Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; 82 | } 83 | 84 | /* 85 | Typography 86 | */ 87 | 88 | h1, h2, h3, h4, h5, h6 { 89 | color: #965d51; 90 | font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 91 | font-weight: bold; 92 | margin-bottom: 24px; 93 | } 94 | h1 { 95 | font-size: 48px; 96 | line-height: 48px; 97 | } 98 | h2 { 99 | font-size: 36px; 100 | line-height: 48px; 101 | } 102 | h3 { 103 | font-size: 24px; 104 | } 105 | p { 106 | margin-bottom: 24px; 107 | } 108 | 109 | /* 110 | Links 111 | */ 112 | 113 | a { 114 | color: #e4a467; 115 | text-decoration: none; 116 | } 117 | a:hover { 118 | color: #c9905b; 119 | } 120 | 121 | /* 122 | List 123 | */ 124 | 125 | ul { 126 | margin-bottom: 24px; 127 | } 128 | -------------------------------------------------------------------------------- /lessons/02-elements-semantics/assets/js/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | 6 | 7 | 8 | Wile E. Coyote 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 |
26 | 27 |

Wile E. Coyote

28 | 29 | 36 | 37 |
38 | 39 | 40 | 41 |
42 | 43 |

Genius

44 | 45 |

Wile E. Coyote is a true genius and aspiring front end designer and developer. When he’s not trapping the enchanting road runner he is wrangling code and designing beautiful websites.

46 | 47 |

View Wile E. Coyote’s Accomplishments »

48 | 49 |
50 | 51 | 52 | 53 |
54 | 55 |

Journal

56 | 57 |

Why Can’t I Catch this Bird?

58 |

I’ve struggled for so long to capture this one illusive…

59 |

Continue Reading »

60 | 61 |

Construction, Acme, Apex

62 |

Warner University preaches itself as the ‘apex’ of…

63 |

Continue Reading »

64 | 65 |

Bird Flu

66 |

Like Darwin I’ve became fascinated with birds. Their…

67 |

Continue Reading »

68 | 69 |
70 | 71 | 72 | 73 | 76 | 77 |
78 | 79 | 80 | -------------------------------------------------------------------------------- /lessons/02-elements-semantics/journal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Journal - Wile E. Coyote 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 |
26 | 27 |

Wile E. Coyote

28 | 29 | 36 | 37 |
38 | 39 | 40 | 41 |
42 | 43 |

Journal

44 | 45 | 55 | 56 | 68 | 69 | 79 | 80 |
81 | 82 | 83 | 84 | 87 | 88 |
89 | 90 | 91 | -------------------------------------------------------------------------------- /lessons/03-box-model-positioning/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | About - Wile E. Coyote 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 |

27 | Wile E. Coyote 28 |

29 | 30 | 37 | 38 |
39 |
40 | 41 |
42 | 43 | 44 | 45 |
46 | 47 |

About

48 | 49 |
50 | 51 |

Motivated by engineering, science and ornithology, Wile E. Coyote has made a successful career testing and prototyping in all fields of his study. His dedicated research on the wild Road Runner has been widely read in aviation circles. Recently he become the pre-eminent scholar on Acme studies including dynamite, inventing, and bird watching.

52 | 53 |
54 | 55 |
56 | 57 | 58 | 59 |
60 | 61 |

Experience

62 | 63 |
    64 | 65 |
  • 66 | 70 |
    71 |

    Genius

    72 |

    The dynamic combination of a bachelor’s degree in Ornithology and a master’s degree in Electrical Drawings & Schematics can only be described as Genius, if not Super Genius. Current work includes trapping the elusive Disapperalis Quickius, or road runner.

    73 |
    74 |
    • 75 | 76 |
  • 77 | 81 |
    82 |

    Product Tester & Usability Expert

    83 |

    Every year Acme Corporation releases an abundance of new products, including explosive tennis balls, giant rubber bands, rocket powered roller skates, and more, all of which need to be extensively tested and reported on.

    84 |
    85 |
    • 86 | 87 |
88 | 89 |
90 | 91 | 92 | 93 |
94 | 95 |

Education

96 | 97 |
    98 | 99 |
  • 100 | 104 |
    105 |

    Electrical Drawings & Schematics

    106 |

    The Electrical Drawings & Schematics graduate program at Looney State College offers a strict discipline encompassing a diverse set of studies, including drawling, engineering, operations, pyrotechnics, schematics, and wiring.

    107 |
    108 |
    • 109 | 110 |
  • 111 | 115 |
    116 |

    Ornithology

    117 |

    At the Warner Lab of Ornithology, students study to understand birds, reviewing their evolution, behavior, and ecology. Birds, and other related species, are brought into the laboratory for observation and examination.

    118 |
    119 |
    • 120 | 121 |
122 | 123 |
124 | 125 | 126 | 127 |
128 | 129 |

Skills

130 | 131 | 132 |
    133 |
  • Amateur Paramedics
    • 134 |
  • Booby Traps
    • 135 |
  • Construction
    • 136 |
  • Dedication
    • 137 |
  • Extreme Sports
    • 138 |
  • Gourmet Cooking
    • 139 |
  • Hunting & Trapping
    • 140 |
  • Painting
    • 141 |
  • Setting Explosives
    • 142 |
143 | 144 |
145 | 146 | 147 | 148 | 151 | 152 |
153 | 154 | 155 | -------------------------------------------------------------------------------- /lessons/03-box-model-positioning/assets/css/main.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | body { 27 | line-height: 1; 28 | } 29 | blockquote, q { 30 | quotes: none; 31 | } 32 | blockquote:before, blockquote:after, 33 | q:before, q:after { 34 | content: ''; 35 | content: none; 36 | } 37 | table { 38 | border-collapse: collapse; 39 | border-spacing: 0; 40 | } 41 | 42 | /* 43 | Resetting defaults 44 | */ 45 | 46 | b, strong { 47 | font-weight: bold; 48 | } 49 | i, em { 50 | font-style: italic; 51 | } 52 | sup { 53 | vertical-align: super; 54 | font-size: .85em; 55 | } 56 | 57 | /* 58 | Grid 59 | */ 60 | 61 | .container { 62 | max-width: 960px; 63 | margin: 0 auto; 64 | } 65 | .col-1, 66 | .col-2, 67 | .col-3 { 68 | float: left; 69 | margin-left: 10px; 70 | margin-right: 10px; 71 | } 72 | .col-1 { 73 | width: 220px; 74 | } 75 | .col-2 { 76 | width: 460px; 77 | } 78 | .col-3 { 79 | width: 700px; 80 | } 81 | .gutters { 82 | margin-left: 10px; 83 | margin-right: 10px; 84 | } 85 | 86 | /* 87 | Clearfix 88 | */ 89 | 90 | .group:before, 91 | .group:after { 92 | content: ""; 93 | display: table; 94 | } 95 | .group:after { 96 | clear: both; 97 | } 98 | .group { 99 | clear: both; 100 | *zoom: 1; 101 | } 102 | 103 | /* 104 | Custom styles 105 | */ 106 | 107 | body { 108 | background: #fff9ad; 109 | color: #5d5445; 110 | font: 16px/24px Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; 111 | } 112 | 113 | /* 114 | Typography 115 | */ 116 | 117 | h1, h2, h3, h4, h5, h6 { 118 | color: #965d51; 119 | font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 120 | font-weight: 700; 121 | } 122 | h1 { 123 | font-size: 48px; 124 | line-height: 48px; 125 | } 126 | h2 { 127 | font-size: 36px; 128 | line-height: 48px; 129 | } 130 | h3 { 131 | font-size: 24px; 132 | } 133 | h4 { 134 | font-size: 21px; 135 | } 136 | h5 { 137 | font-size: 18px; 138 | } 139 | h2, h3, h4, p { 140 | margin-bottom: 24px; 141 | } 142 | 143 | /* 144 | Links 145 | */ 146 | 147 | a { 148 | color: #e4a467; 149 | text-decoration: none; 150 | } 151 | a:hover { 152 | color: #c9905b; 153 | } 154 | 155 | /* 156 | List 157 | */ 158 | 159 | .list-compact { 160 | list-style: none; 161 | } 162 | .list-cols { 163 | margin-bottom: 24px; 164 | } 165 | .list-cols li { 166 | float: left; 167 | margin: 0 20px; 168 | width: 200px; 169 | } 170 | .list-cols li:nth-child(3n) { 171 | margin-right: 0; 172 | } 173 | 174 | /* 175 | Misc styles 176 | */ 177 | 178 | .divider { 179 | border-bottom: 2px solid #e4de9a; 180 | margin-bottom: 47px; 181 | padding-bottom: 23px; 182 | } 183 | 184 | /* 185 | Primary header 186 | */ 187 | 188 | .primary-header { 189 | background: #e4a467; 190 | border-bottom: 2px solid #c9905b; 191 | margin-bottom: 48px; 192 | padding: 23px 0; 193 | } 194 | 195 | /* Logo */ 196 | 197 | .primary-logo { 198 | float: left; 199 | margin-left: 10px; 200 | } 201 | .primary-logo a { 202 | color: #fff; 203 | } 204 | .primary-logo a:hover { 205 | color: #965d51; 206 | } 207 | 208 | /* Nav */ 209 | 210 | .primary-nav { 211 | float: right; 212 | margin-top: 21px; 213 | } 214 | .primary-nav li { 215 | float: left; 216 | margin: 0 10px; 217 | } 218 | .primary-nav a { 219 | color: #965d51; 220 | } 221 | .primary-nav a:hover { 222 | color: #fff; 223 | } 224 | 225 | /* 226 | Primary footer 227 | */ 228 | 229 | .primary-footer { 230 | margin: 48px 0; 231 | } 232 | -------------------------------------------------------------------------------- /lessons/03-box-model-positioning/assets/js/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | 6 | 7 | 8 | Wile E. Coyote 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 |

27 | Wile E. Coyote 28 |

29 | 30 | 37 | 38 |
39 |
40 | 41 |
42 | 43 | 44 | 45 |
46 | 47 |

Genius

48 | 49 |

Wile E. Coyote is a true genius and aspiring front end designer and developer. When he’s not trapping the enchanting road runner he is wrangling code and designing beautiful websites.

50 | 51 |

View Wile E. Coyote’s Accomplishments »

52 | 53 |
54 | 55 | 56 | 57 |
58 | 59 |

Journal

60 | 61 |
62 |

Why Can’t I Catch this Bird?

63 |

I’ve struggled for so long to capture this one illusive…

64 |

Continue Reading »

65 |
66 | 67 |
68 |

Construction, Acme, Apex

69 |

Warner University preaches itself as the ‘apex’ of…

70 |

Continue Reading »

71 |
72 | 73 |
74 |

Bird Flu

75 |

Like Darwin I’ve became fascinated with birds. Their…

76 |

Continue Reading »

77 |
78 | 79 |
80 | 81 | 82 | 83 | 86 | 87 |
88 | 89 | 90 | -------------------------------------------------------------------------------- /lessons/03-box-model-positioning/journal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Journal - Wile E. Coyote 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 |

27 | Wile E. Coyote 28 |

29 | 30 | 37 | 38 |
39 |
40 | 41 |
42 | 43 | 44 | 45 |
46 | 47 |

Journal

48 | 49 | 69 | 70 | 92 | 93 | 113 | 114 |
115 | 116 | 117 | 118 | 121 | 122 |
123 | 124 | 125 | -------------------------------------------------------------------------------- /lessons/04-typography/assets/css/main.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | body { 27 | line-height: 1; 28 | } 29 | blockquote, q { 30 | quotes: none; 31 | } 32 | blockquote:before, blockquote:after, 33 | q:before, q:after { 34 | content: ''; 35 | content: none; 36 | } 37 | table { 38 | border-collapse: collapse; 39 | border-spacing: 0; 40 | } 41 | 42 | /* 43 | Resetting defaults 44 | */ 45 | 46 | b, strong { 47 | font-weight: bold; 48 | } 49 | i, em { 50 | font-style: italic; 51 | } 52 | sup { 53 | vertical-align: super; 54 | font-size: .85em; 55 | } 56 | 57 | /* 58 | Grid 59 | */ 60 | 61 | .container { 62 | max-width: 960px; 63 | margin: 0 auto; 64 | } 65 | .col-1, 66 | .col-2, 67 | .col-3 { 68 | float: left; 69 | margin-left: 10px; 70 | margin-right: 10px; 71 | } 72 | .col-1 { 73 | width: 220px; 74 | } 75 | .col-2 { 76 | width: 460px; 77 | } 78 | .col-3 { 79 | width: 700px; 80 | } 81 | .gutters { 82 | margin-left: 10px; 83 | margin-right: 10px; 84 | } 85 | 86 | /* 87 | Clearfix 88 | */ 89 | 90 | .group:before, 91 | .group:after { 92 | content: ""; 93 | display: table; 94 | } 95 | .group:after { 96 | clear: both; 97 | } 98 | .group { 99 | clear: both; 100 | *zoom: 1; 101 | } 102 | 103 | /* 104 | Custom styles 105 | */ 106 | 107 | body { 108 | background: #fff9ad; 109 | color: #5d5445; 110 | font: 16px/24px "PT Serif", Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; 111 | } 112 | 113 | /* 114 | Typography 115 | */ 116 | 117 | h1, h2, h3, h4, h5, h6 { 118 | color: #965d51; 119 | font-family: "PT Sans Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif; 120 | font-weight: 700; 121 | } 122 | h1, 123 | .h-headline { 124 | font-size: 48px; 125 | line-height: 48px; 126 | text-transform: uppercase; 127 | } 128 | h2, 129 | .h-subheadline { 130 | font-size: 36px; 131 | line-height: 48px; 132 | margin-bottom: 24px; 133 | } 134 | h3, 135 | .h-byline { 136 | font-size: 24px; 137 | margin-bottom: 24px; 138 | } 139 | h4, 140 | .h-standfirst { 141 | font-size: 21px; 142 | margin-bottom: 24px; 143 | } 144 | h5, 145 | .h-related { 146 | font-size: 18px; 147 | } 148 | p { 149 | margin-bottom: 24px; 150 | } 151 | .text-offset { 152 | color: #827762; 153 | font-size: 14px; 154 | } 155 | .text-intro { 156 | font-size: 24px; 157 | line-height: 36px; 158 | } 159 | abbr[title="and"] { 160 | font-family: Baskerville,Palatino,"Book Antiqua",serif; 161 | font-style: italic; 162 | font-weight: normal; 163 | font-size: .8em; 164 | line-height: 1; 165 | } 166 | code { 167 | color: #8f816a; 168 | font-family: "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier; 169 | } 170 | 171 | /* 172 | Links 173 | */ 174 | 175 | a { 176 | color: #e4a467; 177 | text-decoration: none; 178 | -webkit-transition: all .15s linear; 179 | -moz-transition: all .15s linear; 180 | -o-transition: all .15s linear; 181 | transition: all .15s linear; 182 | } 183 | a:hover { 184 | color: #c9905b; 185 | } 186 | .link-feat { 187 | font: 700 15px/1 "PT Sans Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif; 188 | text-transform: uppercase; 189 | } 190 | 191 | /* 192 | List 193 | */ 194 | 195 | .list-compact { 196 | list-style: none; 197 | } 198 | .list-cols { 199 | margin-bottom: 24px; 200 | } 201 | .list-cols li { 202 | float: left; 203 | margin: 0 20px; 204 | width: 200px; 205 | } 206 | .list-cols li:nth-child(3n) { 207 | margin-right: 0; 208 | } 209 | 210 | /* 211 | Misc styles 212 | */ 213 | 214 | .divider { 215 | border-bottom: 2px solid #e4de9a; 216 | margin-bottom: 47px; 217 | padding-bottom: 23px; 218 | } 219 | 220 | /* 221 | Primary header 222 | */ 223 | 224 | .primary-header { 225 | background: #e4a467; 226 | border-bottom: 2px solid #c9905b; 227 | margin-bottom: 48px; 228 | padding: 23px 0; 229 | } 230 | 231 | /* Logo */ 232 | 233 | .primary-logo { 234 | float: left; 235 | line-height: 1; 236 | margin-left: 10px; 237 | text-shadow: 0 1px 1px rgba(0, 0, 0, .15); 238 | } 239 | .primary-logo a { 240 | color: #fff; 241 | } 242 | .primary-logo a:hover { 243 | color: #965d51; 244 | } 245 | .primary-logo span { 246 | color: #965d51; 247 | text-shadow: none; 248 | text-transform: none; 249 | } 250 | 251 | /* Nav */ 252 | 253 | .primary-nav { 254 | float: right; 255 | margin-top: 21px; 256 | } 257 | .primary-nav li { 258 | float: left; 259 | margin: 0 10px; 260 | } 261 | .primary-nav a { 262 | color: #965d51; 263 | font: 700 18px/24px "PT Sans Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif; 264 | } 265 | .primary-nav a:hover, 266 | .nav-active a { 267 | color: #fff; 268 | } 269 | .nav-active a { 270 | cursor: default; 271 | } 272 | 273 | /* 274 | Primary footer 275 | */ 276 | 277 | .primary-footer { 278 | margin: 48px 0; 279 | text-align: center; 280 | } 281 | -------------------------------------------------------------------------------- /lessons/04-typography/assets/js/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | 6 | 7 | 8 | Experiments - Wile E. Coyote 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 | 27 |

28 | 29 | Wile E. Coyote Have Brain. Will Travel. 30 | 31 |

32 | 33 | 41 | 42 |
43 |
44 | 45 |
46 | 47 | 48 | 49 |
50 | 51 |

Experiments

52 | 53 | 54 | 55 | 68 | 69 |
70 | 71 | 72 | 73 | 76 | 77 |
78 | 79 | 80 | -------------------------------------------------------------------------------- /lessons/04-typography/in-class/css/styles.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* My styles */ 51 | 52 | @font-face { 53 | /* 54 | * Note: I'm not including the actual font here, 55 | * because I don't know if I'm licensed to use it as 56 | * a web font. But, I'm leaving this in, so you know 57 | * how a font-face declaration works. 58 | */ 59 | font-family: "Metal Lord!!!"; 60 | src: url('../fonts/metal lord.ttf') format('truetype'); 61 | } 62 | 63 | .group:before, 64 | .group:after { 65 | content: ""; 66 | display: table; 67 | } 68 | .group:after { 69 | clear: both; 70 | } 71 | .group { 72 | zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 73 | } 74 | 75 | header, 76 | footer, 77 | .container { 78 | width: 960px; 79 | margin: 0 auto; 80 | padding: 20px 0; 81 | } 82 | 83 | article { 84 | float: left; 85 | width: 460px; 86 | margin: 0 10px; 87 | } 88 | 89 | aside { 90 | float: left; 91 | width: 220px; 92 | margin: 0 10px; 93 | } 94 | 95 | /* General */ 96 | body { 97 | font-family: Georgia, "Times New Roman", serif; 98 | font-size: 16px; 99 | line-height: 20px; 100 | } 101 | 102 | a { 103 | color: orange; 104 | text-decoration: none; 105 | } 106 | a:hover { text-decoration: underline; } 107 | 108 | p { 109 | margin-bottom: 20px; 110 | } 111 | 112 | strong { 113 | font-weight: bold; 114 | } 115 | 116 | em { 117 | font-style: italic; 118 | } 119 | 120 | ul { 121 | list-style: none; 122 | } 123 | 124 | li { 125 | margin-bottom: 20px; 126 | } 127 | 128 | h1, h2, h3, h4, h5, h6 { 129 | /* 130 | * Since the Metal Lord font isn't included, 131 | * the declaration will fail, and try loading 132 | * Helvetica 133 | * 134 | * Scroll up for more details.... 135 | */ 136 | font-family: "Metal Lord!!!", "Open Sans" Helvetica, Arial, sans-serif; 137 | font-weight: bold; 138 | margin-bottom: 10px; 139 | line-height: 1em; 140 | } 141 | 142 | h1 { 143 | font-size: 36px; 144 | text-align: center; 145 | color: red; 146 | 147 | text-shadow: 2px 2px 0 orange, 148 | 4px 4px 0 yellow, 149 | 6px 6px 0 blue; 150 | } 151 | 152 | h2 { 153 | font-size: 24px; 154 | margin-bottom: 20px; 155 | } 156 | 157 | h3 { 158 | font-size: 21px; 159 | margin-bottom: 20px; 160 | } 161 | 162 | h4 { 163 | font-size: 14px; 164 | text-transform: uppercase; 165 | letter-spacing: 2px; 166 | color: #ccc; 167 | } 168 | 169 | section { 170 | margin-bottom: 40px; 171 | } 172 | 173 | article.intro p { 174 | line-height: 24px; 175 | text-indent: 20px; 176 | } 177 | 178 | .left { 179 | text-align: left; 180 | } 181 | 182 | .center { 183 | text-align: center; 184 | } 185 | 186 | .right { 187 | text-align: right; 188 | } 189 | 190 | .justified { 191 | text-align: justify; 192 | } -------------------------------------------------------------------------------- /lessons/04-typography/in-class/fonts/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/04-typography/in-class/fonts/.gitkeep -------------------------------------------------------------------------------- /lessons/04-typography/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Wile E. Coyote 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 | 27 |

28 | 29 | Wile E. Coyote Have Brain. Will Travel. 30 | 31 |

32 | 33 | 41 | 42 |
43 |
44 | 45 |
46 | 47 | 48 | 49 |
50 | 51 |

Genius

52 | 53 |

Wile E. Coyote is a true genius and aspiring front end designer and developer. When he’s not trapping the enchanting road runner he is wrangling code and designing beautiful websites.

54 | 55 |

View Wile E. Coyote’s Accomplishments »

56 | 57 |
58 | 59 | 60 | 61 |
62 | 63 |

Experiments

64 | 65 |
66 |

Weather Application

67 |

Paying attention to the typographic scale, this weather application experiment is meant to exercise a handful of the different font and text based CSS properties.

68 |

View Weather Application Experiment »

69 |
70 | 71 |
72 |

Coming Soon

73 |

More experiments will be added in the coming weeks, please stay tuned.

74 |
75 | 76 |
77 | 78 | 79 | 80 |
81 | 82 |

Journal

83 | 84 |
85 |

Why Can’t I Catch this Bird?

86 |

I’ve struggled for so long to capture this one illusive…

87 |

Continue Reading »

88 |
89 | 90 |
91 |

Construction, Acme, Apex

92 |

Warner University preaches itself as the ‘apex’ of…

93 |

Continue Reading »

94 |
95 | 96 |
97 |

Bird Flu

98 |

Like Darwin I’ve became fascinated with birds. Their…

99 |

Continue Reading »

100 |
101 | 102 |
103 | 104 | 105 | 106 | 109 | 110 |
111 | 112 | 113 | -------------------------------------------------------------------------------- /lessons/04-typography/journal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Journal - Wile E. Coyote 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 | 27 |

28 | 29 | Wile E. Coyote Have Brain. Will Travel. 30 | 31 |

32 | 33 | 41 | 42 |
43 |
44 | 45 |
46 | 47 | 48 | 49 |
50 | 51 |

Journal

52 | 53 | 73 | 74 | 96 | 97 | 117 | 118 |
119 | 120 | 121 | 122 | 125 | 126 |
127 | 128 | 129 | -------------------------------------------------------------------------------- /lessons/04-typography/typography.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/04-typography/typography.zip -------------------------------------------------------------------------------- /lessons/05-backgrounds-gradients/assets/img/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/05-backgrounds-gradients/assets/img/grid.png -------------------------------------------------------------------------------- /lessons/05-backgrounds-gradients/assets/img/wile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/05-backgrounds-gradients/assets/img/wile.jpg -------------------------------------------------------------------------------- /lessons/05-backgrounds-gradients/assets/js/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;darticle,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | 6 | 7 | 8 | Weather Application - Wile E. Coyote 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 |
27 | 28 |
    29 |
  • 30 |

    Chicago

    31 |
    • 32 |
  • 33 |

    Today

    34 |
    • 35 |
36 | 37 |
    38 |
  • 39 | H: 81° 40 |
    • 41 |
  • 42 | L: 63° 43 |
    • 44 |
45 | 46 |

75°

47 |
Sunny
48 | 49 |
50 | 51 | 52 | 53 |
    54 | 55 |
  1. 56 |

    Tue

    57 |
    Partly Cloudy
    58 |
      59 |
    • 79°
      • 60 |
    • 56°
      • 61 |
    62 |
    2. 63 | 64 |
  2. 65 |

    Wed

    66 |
    Rainy
    67 |
      68 |
    • 72°
      • 69 |
    • 49°
      • 70 |
    71 |
    3. 72 | 73 |
  3. 74 |

    Thu

    75 |
    Sunny
    76 |
      77 |
    • 85°
      • 78 |
    • 68°
      • 79 |
    80 |
    4. 81 | 82 |
  4. 83 |

    Fri

    84 |
    Cloudy
    85 |
      86 |
    • 78°
      • 87 |
    • 59°
      • 88 |
    89 |
    5. 90 | 91 |
92 | 93 |
94 | 95 | 96 | 97 | 98 | 99 |
100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /lessons/05-backgrounds-gradients/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Wile E. Coyote 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 | 27 |

28 | 29 | Wile E. Coyote Have Brain. Will Travel. 30 | 31 |

32 | 33 | 41 | 42 |
43 |
44 | 45 |
46 | 47 | 48 | 49 |
50 | 51 |

Genius

52 | 53 | Wile E. Coyote 54 | 55 |

Wile E. Coyote is a true genius and aspiring front end designer and developer. When he’s not trapping the enchanting road runner he is wrangling code and designing beautiful websites.

56 | 57 |

View Wile E. Coyote’s Accomplishments »

58 | 59 |
60 | 61 | 62 | 63 |
64 | 65 |

Experiments

66 | 67 |
68 |

Weather Application

69 |

Paying attention to the typographic scale, this weather application experiment is meant to exercise a handful of the different font and text based CSS properties.

70 |

View Weather Application Experiment »

71 |
72 | 73 |
74 |

Alert Messages

75 |

Background colors, gradients, and images, along with the principles of color theory, are the foundations for this alert messages experiment.

76 |

View Alert Messages Experiment »

77 |
78 | 79 |
80 | 81 | 82 | 83 |
84 | 85 |

Journal

86 | 87 |
88 |

Why Can’t I Catch this Bird?

89 |

I’ve struggled for so long to capture this one illusive…

90 |

Continue Reading »

91 |
92 | 93 |
94 |

Construction, Acme, Apex

95 |

Warner University preaches itself as the ‘apex’ of…

96 |

Continue Reading »

97 |
98 | 99 |
100 |

Bird Flu

101 |

Like Darwin I’ve became fascinated with birds. Their…

102 |

Continue Reading »

103 |
104 | 105 |
106 | 107 | 108 | 109 |
110 | © Copyright Wile E. Coyote 111 |
112 | 113 |
114 | 115 | 116 | 117 | 118 | 119 |
120 | 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /lessons/05-backgrounds-gradients/week-5-in-class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello World 6 | 7 | 8 | 9 | 10 |
Awesome
11 | 12 |

Shay is awesome

13 | 14 | 15 | -------------------------------------------------------------------------------- /lessons/05-backgrounds-gradients/week-5-in-class/main.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | strong { 50 | font-weight: bold; 51 | } 52 | em { 53 | font-style: italic; 54 | } 55 | 56 | /* Custom styles */ 57 | 58 | html { 59 | height: 100%; 60 | } 61 | body { 62 | background: #1f2dcc url("http://www.funwirks.com/Resources/ProductPhotos/C186_Mr_T_Costume.JPG") 600px 100px no-repeat; 63 | height: 100%; 64 | } 65 | 66 | div, 67 | p { 68 | margin: 40px; 69 | } 70 | 71 | div { 72 | background-color: orange; 73 | background-image: -ms-radial-gradient(center top, circle farthest-side, #fff 0%, #344551 50%, #8492d1 75%, #00a3ef 100%); 74 | background-image: -moz-radial-gradient(center top, circle farthest-side, #fff 0%, #344551 50%, #8492d1 75%, #00a3ef 100%); 75 | background-image: -o-radial-gradient(center top, circle farthest-side, #fff 0%, #344551 50%, #8492d1 75%, #00a3ef 100%); 76 | background-image: -webkit-gradient(radial, center top, 0, center top, 477, color-stop(0, #fff), color-stop(0.5, #344551), color-stop(0.75, #8492d1), color-stop(1, #00a3ef)); 77 | background-image: -webkit-radial-gradient(center top, circle farthest-side, #fff 0%, #344551 50%, #8492d1 75%, #00a3ef 100%); 78 | background-image: radial-gradient(circle farthest-side at center top, #fff 0%, #344551 50%, #8492d1 75%, #00a3ef 100%); 79 | height: 300px; 80 | width: 300px; 81 | } 82 | 83 | a { 84 | /*background: url("http://p.yusukekamiyamane.com/icons/search/fugue/icons/thumb-up.png") 20px 50% no-repeat, linear-gradient(#FFC400, #916F00);*/ 85 | background: url("http://p.yusukekamiyamane.com/icons/search/fugue/icons/thumb-up.png") 20px 50% no-repeat, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)); 86 | background-color: #f60; 87 | border-radius: 6px; 88 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 3px rgba(0, 0, 0, .5); 89 | color: #fff; 90 | font-weight: bold; 91 | margin: 20px; 92 | padding: 10px 20px 10px 50px; 93 | text-decoration: none; 94 | text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); 95 | transition: all .5s ease-in-out; 96 | } 97 | a:hover { 98 | /*background: url("http://p.yusukekamiyamane.com/icons/search/fugue/icons/thumb-up.png") 20px 50% no-repeat, linear-gradient(#FFDA61, #BA951E);*/ 99 | color: yellow; 100 | background-color: #fff; 101 | } 102 | -------------------------------------------------------------------------------- /lessons/05-backgrounds-gradients/week-5-in-class/week-5-in-class.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/05-backgrounds-gradients/week-5-in-class/week-5-in-class.zip -------------------------------------------------------------------------------- /lessons/06-unordered-ordered-definition-lists/activity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Wile E. Coyote - Activity Feed 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Wile E. Coyote's Friends

19 | 33 |
34 |
35 |
    36 |
  • 37 | 38 |
    39 |

    Shay Howe @shayhowe

    40 |

    41 | Have I mentioned how awesome @starterleague is? Learn to be a great programmer! 42 |

    43 |
    44 |
    • 45 |
  • 46 | 47 |
    48 |

    Shay Howe @shayhowe

    49 |

    50 | Who's got a recommendation on a great place to eat in San Francisco? 51 |

    52 |
    53 |
    • 54 |
  • 55 | 56 |
    57 |

    Shay Howe @shayhowe

    58 |

    59 | I don't always drink beer. But when I do, I drink it lots of it...and fast. 60 |

    61 |
    62 |
    • 63 |
  • 64 | 65 |
    66 |

    Shay Howe @shayhowe

    67 |

    68 | Thinking about getting a dog. Medium sized with lazy tendencies. Basset Hound? 69 |

    70 |
    71 |
    • 72 |
  • 73 | 74 |
    75 |

    Shay Howe @shayhowe

    76 |

    77 | If you haven't visited @kumascorner on Diversey yet, you're missing out! 78 |

    79 |
    80 |
    • 81 |
82 |
83 |
84 | © 2013, Wile E. Coyote 85 |
86 |
87 | 88 | 89 | -------------------------------------------------------------------------------- /lessons/06-unordered-ordered-definition-lists/assets/css/main.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* 51 | Custom Styles 52 | */ 53 | 54 | body { 55 | background: #fafbfc; 56 | color: #555; 57 | font: 14px/20px "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 58 | text-shadow: 0 1px 0 #fff 59 | } 60 | .container { 61 | margin: 40px auto; 62 | width: 800px; 63 | } 64 | 65 | /* 66 | Typography 67 | */ 68 | 69 | strong { 70 | font-weight: bold; 71 | } 72 | h1, h2, h3 { 73 | color: #404853; 74 | font-weight: bold; 75 | margin-bottom: 24px; 76 | } 77 | h1 { 78 | font-size: 24px; 79 | } 80 | h2 { 81 | font-size: 21px; 82 | } 83 | h3 { 84 | font-size: 18px; 85 | } 86 | p, pre { 87 | margin-bottom: 20px; 88 | } 89 | code { 90 | color: #8c9198; 91 | font: 13px/19px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier; 92 | } 93 | 94 | /* 95 | Pre 96 | */ 97 | 98 | pre { 99 | background: #e8eae9; 100 | -webkit-border-radius: 8px; 101 | -moz-border-radius: 8px; 102 | -ms-border-radius: 8px; 103 | -o-border-radius: 8px; 104 | border-radius: 8px; 105 | -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 1px 0 #fff; 106 | -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 1px 0 #fff; 107 | box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 1px 0 #fff; 108 | padding: 10px 20px; 109 | } 110 | 111 | /* 112 | Lists 113 | */ 114 | 115 | dd { 116 | margin-bottom: 20px; 117 | } 118 | -------------------------------------------------------------------------------- /lessons/06-unordered-ordered-definition-lists/assets/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* 51 | Custom Styles 52 | */ 53 | -------------------------------------------------------------------------------- /lessons/06-unordered-ordered-definition-lists/assets/img/road-runner-wile-e-coyote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/06-unordered-ordered-definition-lists/assets/img/road-runner-wile-e-coyote.png -------------------------------------------------------------------------------- /lessons/06-unordered-ordered-definition-lists/css/activity.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | article, aside, details, figcaption, figure, 27 | footer, header, hgroup, menu, nav, section { 28 | display: block; 29 | } 30 | body { 31 | line-height: 1; 32 | } 33 | ol, ul { 34 | list-style: none; 35 | } 36 | blockquote, q { 37 | quotes: none; 38 | } 39 | blockquote:before, blockquote:after, 40 | q:before, q:after { 41 | content: ''; 42 | content: none; 43 | } 44 | table { 45 | border-collapse: collapse; 46 | border-spacing: 0; 47 | } 48 | 49 | /* 50 | Reset Customizations 51 | */ 52 | body { 53 | font-family: Georgia, serif; 54 | } 55 | header{ 56 | font-family: Helvetica, sans-serif; 57 | } 58 | a { 59 | text-decoration: none; 60 | color: #2d597f; 61 | } 62 | a:hover { 63 | color: #5096d4; 64 | } 65 | b, strong { 66 | font-weight: bold; 67 | } 68 | i, em { 69 | font-style: italic; 70 | } 71 | h1 { 72 | float: left; 73 | font-size: 32px; 74 | } 75 | h2 { 76 | font-size: 24px; 77 | margin: 0 0 5px 0; 78 | } 79 | footer { 80 | text-align: center; 81 | padding: 50px; 82 | } 83 | p { 84 | margin: 10px 0 20px 0; 85 | font-size: 18px; 86 | line-height: 27px; 87 | } 88 | section { 89 | margin: 30px 0; 90 | } 91 | li { 92 | display: block; 93 | } 94 | 95 | /* 96 | Custom Styles 97 | */ 98 | .container { 99 | max-width: 650px; 100 | margin: 0 auto; 101 | } 102 | .text-offset { 103 | color: #94a0ac; 104 | } 105 | .avatar { 106 | border-radius: 50%; 107 | float: left; 108 | width: 100px; 109 | } 110 | .tweet { 111 | float: right; 112 | width: 525px; 113 | padding-top: 15px; 114 | } 115 | .icons { 116 | font-size: 12px; 117 | } 118 | 119 | /* 120 | Grouping and Clearfix 121 | */ 122 | .group:before, .group:after { 123 | content: ""; 124 | display: table; 125 | } 126 | .group:after { 127 | clear: both; 128 | } 129 | .group { 130 | *zoom: 1; 131 | padding: 25px 0; 132 | border-bottom: 1px solid #c8d2d8; 133 | } 134 | 135 | /* 136 | Dropdown Menu 137 | */ 138 | nav { 139 | float: right; 140 | width: 275px; 141 | font-size: 18px; 142 | } 143 | nav ul { 144 | position: relative; 145 | list-style: none; 146 | } 147 | nav ul li { 148 | display: inline-block; 149 | } 150 | nav ul ul { 151 | display: none; 152 | position: absolute; 153 | top: 100%; 154 | background: #5f6975; 155 | border-radius: 5px; 156 | font-size: 14px; 157 | } 158 | nav ul ul a { 159 | color: #fff; 160 | } 161 | nav ul ul a:hover { 162 | color: #c8d2d8; 163 | } 164 | nav ul li a { 165 | display: block; 166 | padding: 8px 15px; 167 | } 168 | nav ul li:hover > ul { 169 | display: block; 170 | } 171 | -------------------------------------------------------------------------------- /lessons/06-unordered-ordered-definition-lists/css/main.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* 51 | Custom Styles 52 | */ 53 | 54 | b, strong { 55 | font-weight: bold; 56 | } 57 | i, em { 58 | font-style: italic; 59 | } -------------------------------------------------------------------------------- /lessons/06-unordered-ordered-definition-lists/img/shay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/06-unordered-ordered-definition-lists/img/shay.jpg -------------------------------------------------------------------------------- /lessons/06-unordered-ordered-definition-lists/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Wile E. Coyote 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

Wile E. Coyote

18 |

Coming soon.

19 | 20 | 21 | -------------------------------------------------------------------------------- /lessons/06-unordered-ordered-definition-lists/lesson-6-in-class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello World 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 |

Awesome Land

14 | 21 |
22 | 23 |
    24 |
  • One
    • 25 |
  • Two
    • 26 |
  • Three
    • 27 |
28 | 29 |
    30 |
  • One
    • 31 |
  • Two
    • 32 |
  • Three
    • 33 |
  • Four
    • 34 |
35 | 36 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 37 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 38 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 39 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 40 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 41 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

42 | 43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /lessons/06-unordered-ordered-definition-lists/lesson-6-in-class/lesson-6-in-class.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/06-unordered-ordered-definition-lists/lesson-6-in-class/lesson-6-in-class.zip -------------------------------------------------------------------------------- /lessons/06-unordered-ordered-definition-lists/lesson-6-in-class/main.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | strong { 50 | font-weight: bold; 51 | } 52 | em { 53 | font-style: italic; 54 | } 55 | 56 | /* Clearfix */ 57 | 58 | .group { 59 | *zoom: 1; 60 | } 61 | .group:before, 62 | .group:after { 63 | content: ""; 64 | display: table; 65 | } 66 | .group:after { 67 | clear: both; 68 | } 69 | 70 | /* Container */ 71 | 72 | .container { 73 | margin: 0 auto; 74 | width: 960px; 75 | } 76 | 77 | /* Header */ 78 | 79 | header { 80 | padding: 10px; 81 | } 82 | header h1 { 83 | float: left; 84 | font-size: 30px; 85 | line-height: 36px; 86 | } 87 | nav { 88 | float: right; 89 | } 90 | .nav-primary { 91 | background: linear-gradient(pink, orange); 92 | border-radius: 10px; 93 | padding: 0 10px; 94 | } 95 | .nav-primary li { 96 | float: left; 97 | padding: 10px; 98 | } 99 | 100 | /* Three columns */ 101 | 102 | .col-3 li { 103 | border: 2px solid sandybrown; 104 | float: left; 105 | margin: 0 10px; 106 | padding: 10px; 107 | width: 276px; 108 | } 109 | 110 | /* Four columns */ 111 | 112 | .col-4 li { 113 | border: 5px solid yellow; 114 | float: left; 115 | margin: 10px; 116 | padding: 20px; 117 | width: 170px; 118 | } 119 | -------------------------------------------------------------------------------- /lessons/06-unordered-ordered-definition-lists/paths.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Introduction to File Paths 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |

Introduction to File Paths

20 | 21 | 22 | 23 |

Internal Reference Path

24 | 25 |

Connecting an HTML document to a stylesheet hosted on the same server, in the same directory as the HTML file.

26 | 27 | 
<link rel="stylesheet" href="styles.css">
28 | 29 | 30 | 31 |

Internal Reference Path within a Different Directory

32 | 33 |

Connecting an HTML document to a stylesheet hosted on the same server, but in a directory below the HTML file. This is very common.

34 | 35 | 
<link rel="stylesheet" href="css/styles.css">
36 | 37 | 38 | 39 |

External Reference Path

40 | 41 |

Connecting an HTML document to a stylesheet hosted on another server. This example connects the HTML document to a stylesheet hosted by Google for a font.

42 | 43 | 
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Serif">
44 | 45 | 46 | 47 |

Internal Image Reference Path

48 |

Displaying an image hosted on the same server, but in a directory below the HTML file.

49 | 50 | 
<img src="assets/img/road-runner-wile-e-coyote.png">
51 | 52 | 53 | 54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /lessons/06a-hamburgers/assets/css/reset.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/06a-hamburgers/assets/css/reset.css -------------------------------------------------------------------------------- /lessons/06a-hamburgers/assets/img/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/06a-hamburgers/assets/img/home.png -------------------------------------------------------------------------------- /lessons/06a-hamburgers/assets/js/functions.js: -------------------------------------------------------------------------------- 1 | var Site = window.Site || {}; 2 | (function($) { 3 | 4 | $(function() { 5 | 6 | $('nav a').click(function (e) { 7 | $('.active').removeClass('active'); 8 | e.preventDefault(); 9 | $(this).tab('show'); 10 | }); 11 | 12 | }); 13 | 14 | })(jQuery); -------------------------------------------------------------------------------- /lessons/06a-hamburgers/assets/js/modernizr.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.5.3 (Custom Build) | MIT & BSD 2 | * Build: http://www.modernizr.com/download/#-shiv-cssclasses 3 | */ 4 | ;window.Modernizr=function(a,b,c){function u(a){j.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e});for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return u(""),i=k=null,function(a,b){function g(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){var b={},c=a.createElement,e=a.createDocumentFragment,f=e();a.createElement=function(a){var e=(b[a]||(b[a]=c(a))).cloneNode();return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+h().join().replace(/\w+/g,function(a){return b[a]=c(a),f.createElement(a),'c("'+a+'")'})+");return n}")(k,f)}function j(a){var b;return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),f||(b=!i(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;(function(){var a=b.createElement("a");a.innerHTML="",e="hidden"in a,f=a.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var k={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j};a.html5=k,j(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+p.join(" "):""),e}(this,this.document); -------------------------------------------------------------------------------- /lessons/06a-hamburgers/assets/js/plugins.js: -------------------------------------------------------------------------------- 1 | // Plugins 2 | 3 | /** 4 | * Bootstrap.js by @fat & @mdo 5 | * plugins: bootstrap-transition.js, bootstrap-tab.js 6 | * Copyright 2012 Twitter, Inc. 7 | * http://www.apache.org/licenses/LICENSE-2.0.txt 8 | */ 9 | !function(a){a(function(){a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery); -------------------------------------------------------------------------------- /lessons/06a-hamburgers/files.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/beginners-guide-html-css/d971c6467108a200bc0f28406316b03da9b357aa/lessons/06a-hamburgers/files.zip -------------------------------------------------------------------------------- /lessons/07-images-audio-video/activity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Wile E. Coyote - Activity Feed 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Wile E. Coyote

19 | 33 |
34 |
35 |
    36 |
  • 37 | 38 |
    39 |

    Wile E. Coyote @mustcatchroadrunner

    40 |

    41 | Archery was never my strong suit. 42 |

    43 | 44 |
    45 |
    • 46 |
47 |
48 |
49 | © 2013, Wile E. Coyote 50 |
51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /lessons/07-images-audio-video/background-video.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Wile E. Coyote - Background Video 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Space is sweet!

17 |