Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
What designers need to know about HTML5 and CSS3
- 1. HTML 5 & YOU & ME
- 2. W ho is th is H gu TM y? L5 Br ea k CS S3 Ahead W or ld The Journey D om in at io n, e tc .
- 3. W ho is th is H gu TM y? L5 Br ea k CS S3 Ahead W or ld The Journey D om in at io n, e tc .
- 4. W ho is th is H gu TM y? L5 Br ea k CS S3 Ahead W or ld The Journey D om in at io n, e tc .
- 5. W ho is th is H gu TM y? L5 Br ea k CS S3 Ahead W or ld The Journey D om in at io n, e tc .
- 6. W ho is th is H gu TM y? L5 Br ea k CS S3 Ahead W or ld The Journey D om in at io n, e tc .
- 7. W ho is th is H gu TM y? L5 Br ea k CS S3 Ahead W or ld The Journey D om in at io n, e tc .
- 8. W ho is th is H gu TM y? L5 Br ea k CS S3 Ahead W or ld The Journey D om in at io n, PLEASE FASTEN YOUR SEAT BELTS e tc .
- 9. Who Am I?
- 10. Who Am I? • I’m Fred LeBlanc.
- 11. Who Am I? • I’m Fred LeBlanc. • I run .
- 12. Who Am I? • I’m Fred LeBlanc. • I run . • I specialize in front-end development.
- 13. Who Am I? • I’m Fred LeBlanc. • I run . • I specialize in front-end development. • I’ve been html-ing for 15 years.
- 14. Who Am I? • I’m Fred LeBlanc. • I run . • I specialize in front-end development. • I’ve been html-ing for 15 years. • I love making web things.
- 15. OK — ENOUG H
- 16. LET’S TALK HTML
- 17. Getting our Hands Dirty HTML5
- 18. Getting our Hands Dirty Please open index.html from lab-01 in your favorite text editor. HTML5
- 20. This is HTML4. Let’s make this html5. HTML5
- 21. Above the <html> element, write this: HTML5
- 22. Above the <html> element, write this: <!doctype html> HTML5
- 23. BOOM! DON HTML5
- 24. DOCTYPEs HTML5
- 26. DOCTYPEs a/k/a DTDs “Document Type Definition” HTML5
- 28. Other DOCTYPEs <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd"> HTML5
- 29. Other DOCTYPEs <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> HTML5
- 31. The Coolest Part Most of the html you know is still valid html5! HTML5
- 32. Have a Look <!--...--> <body> <dl> <head> <map> <samp> <tfoot> <!doctype> <br> <dt> <hr> <menu> <script> <th> <a> <button> <em> <html> <meta> <select> <thead> <abbr> <caption> <fieldset> <i> <noframes> <small> <title> <acronym> <center> <font> <iframe> <noscript> <span> <tr> <address> <cite> <form> <img> <object> <strike> <tt> <applet> <code> <frame> <input> <ol> <strong> <u> <area> <col> <frameset> <ins> <optgroup> <style> <ul> <b> <colgroup> <h1> <isindex> <option> <sub> <var> <base> <dd> <h2> <kbd> <p> <sup> <basefont> <del> <h3> <label> <param> <table> <bdo> <dfn> <h4> <legend> <pre> <tbody> <big> <dir> <h5> <li> <q> <td> <blockquote> <div> <h6> <link> <s> <textarea> HTML5
- 33. Still Cool <!--...--> <body> <dl> <head> <map> <samp> <tfoot> <!doctype> <br> <dt> <hr> <menu> <script> <th> <a> <button> <em> <html> <meta> <select> <thead> <abbr> <caption> <fieldset> <i> <noframes> <small> <title> <acronym> <center> <font> <iframe> <noscript> <span> <tr> <address> <cite> <form> <img> <object> <strike> <tt> <applet> <code> <frame> <input> <ol> <strong> <u> <area> <col> <frameset> <ins> <optgroup> <style> <ul> <b> <colgroup> <h1> <isindex> <option> <sub> <var> <base> <dd> <h2> <kbd> <p> <sup> <basefont> <del> <h3> <label> <param> <table> <bdo> <dfn> <h4> <legend> <pre> <tbody> <big> <dir> <h5> <li> <q> <td> <blockquote> <div> <h6> <link> <s> <textarea> HTML5
- 34. Goodnight, Sweet <!--...--> Prince <body> <dl> <head> <map> <samp> <tfoot> <!doctype> <br> <dt> <hr> <menu> <script> <th> <a> <button> <em> <html> <meta> <select> <thead> <abbr> <caption> <fieldset> <i> <noframes> <small> <title> <acronym> <center> <font> <iframe> <noscript> <span> <tr> <address> <cite> <form> <img> <object> <strike> <tt> <applet> <code> <frame> <input> <ol> <strong> <u> <area> <col> <frameset> <ins> <optgroup> <style> <ul> <b> <colgroup> <h1> <isindex> <option> <sub> <var> <base> <dd> <h2> <kbd> <p> <sup> <basefont> <del> <h3> <label> <param> <table> <bdo> <dfn> <h4> <legend> <pre> <tbody> <big> <dir> <h5> <li> <q> <td> <blockquote> <div> <h6> <link> <s> <textarea> HTML5
- 35. HTML5 Stages of Grief How to cope with these losses. HTML5
- 37. Twelve Angry Tags Out with the old… HTML5
- 38. Twelve Angry Tags Out with the old… …in with the new. HTML5
- 39. Twelve Angry Tags ith the old… <acronym> Out w …in with the new. HTML5
- 40. Twelve Angry Tags ith the old… <acronym> Out w …in with the new. The <abbr> tag. HTML5
- 41. Twelve Angry Tags Out with the old… <a p p l e t> …in with the new. HTML5
- 42. Twelve Angry Tags Out with the old… <a p p l e t> …in with the new. JS, <canvas>, Flash HTML5
- 43. Twelve Angry Tags ith the old… <b asefont> Out w …in with the new. HTML5
- 44. Twelve Angry Tags ith the old… <b asefont> Out w …in with the new. CSS on html eleme nt HTML5
- 45. Twelve Angry Tags Out with the old… <big> …in with the new. HTML5
- 46. Twelve Angry Tags Out with the old… <big> …in with the new. <span> & CSS HTML5
- 47. Twelve Angry Tags Out with the old… <center> …in with the new. HTML5
- 48. Twelve Angry Tags Out with the old… <center> …in with the new. CSS HTML5
- 49. Twelve Angry Tags Out with the old… <dir> …in with the new. HTML5
- 50. Twelve Angry Tags Out with the old… <dir> …in with the new. <ul> HTML5
- 51. Twelve Angry Tags Out with the old… <font> …in with the new. HTML5
- 52. Twelve Angry Tags Out with the old… <font> …in with the new. CSS HTML5
- 53. Twelve Angry Tags <frameset>/ Out with the old… <frame> …in with the new. HTML5
- 54. Twelve Angry Tags <frameset>/ Out with the old… <frame> …in with the new. <iframe> HTML5
- 55. Twelve Angry Tags ith the old… <noframes> Out w …in with the new. HTML5
- 56. Twelve Angry Tags ith the old… <noframes> Out w …in with the new. Nothing… HTML5
- 57. Twelve Angry Tags Out with the old… <strike> …in with the new. HTML5
- 58. Twelve Angry Tags Out with the old… <strike> …in with the new. CSS HTML5
- 59. Twelve Angry Tags Out with the old… <tt> …in with the new. HTML5
- 60. Twelve Angry Tags Out with the old… <tt> …in with the new. <code>, <var>, <pre> HTML5
- 61. It Was a Different Time 2.0. Waaaaay before Web HTML5
- 62. HTML5 All about semantics. HTML5
- 63. 2 1 To help us out, 28 NEW HTML5
- 64. To help us out, 29 28 NEW 28 27 HTML5
- 65. Said New Tags <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource <output> <wbr> > <progress> <figcaption> HTML5
- 66. Today’s Focus Is On… <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource> <output> <wbr> <figcaption> <progress> HTML5
- 67. Notes on Others <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource <output> <wbr> > <progress> <figcaption> HTML5
- 68. Notes on Others <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource <output> <wbr> > <progress> <figcaption> HTML5
- 69. Notes on Others <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource <output> <wbr> > <progress> <figcaption> HTML5
- 70. Notes on Others <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource <output> <wbr> > <progress> <figcaption> HTML5
- 71. Notes on Others <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource <output> <wbr> > <progress> <figcaption> HTML5
- 72. Here We Go Please open index.html from lab-02 in your favorite text editor. HTML5
- 77. This Can Be CONFUSING And that’s A-OK! HTML5
- 78. Within the <div> element, create a element, and add a heading. HTML5
- 79. Within the <div> element, create a <section> element, and add a heading. HTML5
- 80. Within that, create two elements, and give’em some content. HTML5
- 81. Within that, create two <article> elements, and give’em some content. HTML5
- 82. On Many HTML5
- 83. On Many This is also OK! HTML5
- 84. Moving On Please open index.html from lab-03 in your favorite text editor. HTML5
- 85. ASIDEs HTML5
- 86. After the <section> element, create an element, with the class related. HTML5
- 87. After the <section> element, create an <aside> element, with the class related. HTML5
- 88. Inside of that, create a couple of elements, each with sample content. HTML5
- 89. Inside of that, create a couple of <section> elements, each with sample content. HTML5
- 90. Header Time Please open index.html from lab-04 in your favorite text editor. HTML5
- 92. Before the <section> element, create a element, with a page title. HTML5
- 93. Before the <section> element, create a <header> element, with a page title. HTML5
- 94. After the <aside> element, create a element, with copyright information. HTML5
- 95. After the <aside> element, create a <footer> element, with copyright information. HTML5
- 96. Getting Around Please open index.html from lab-05 in your favorite text editor. HTML5
- 97. NAVs HTML5
- 98. At the end of the <header> element, create a element, with links to other pages. HTML5
- 99. At the end of the <header> element, create a <nav> element, with links to other pages. HTML5
- 101. GEAR CHANG HTML5
- 102. A Detail Page Please open index.html from lab-06 in your favorite text editor. HTML5
- 104. After the first <p> element, create a element, with the provided image. HTML5
- 105. After the first <p> element, create a <figure> element, with the provided image. HTML5
- 106. Within that element (after the image), create a element, with an appropriate caption. HTML5
- 107. Within that element (after the image), create a <figcaption> element, with an appropriate caption. HTML5
- 108. Let’s Add Media Please open index.html from lab-07 in your favorite text editor. HTML5
- 109. AUDIOs HTML5
- 110. After the first <p> element, create an element, with the audio sources. HTML5
- 111. After the first <p> element, create an <audio> element, with the audio sources. HTML5
- 112. New Attributes autoplay="autoplay" controls="controls" loop="loop" preload="preload" HTML5
- 113. Last One Please open index.html from lab-08 in your favorite text editor. HTML5
- 114. VIDEOs HTML5
- 115. After the first <p> element, create a element, with the video sources. HTML5
- 116. After the first <p> element, create a <video> element, with the video sources. HTML5
- 117. New Attributes autobuffer="autobuffer" autoplay="autoplay" controls="controls" loop="loop" poster="poster" HTML5
- 118. AS ALWAYS, BE CAREFUL WITH AUTOPLA HTML5
- 119. ONE MORE HTML5
- 120. IE! ONE MORE HTML5
- 122. & HTML THAT’S
- 124. BUT FIRST …
- 125. Why You Should Come Back
- 126. Why You Should Come Back • Next up: css3! (The fun stuff)
- 127. Why You Should Come Back • Next up: css3! (The fun stuff) • Transitions, transforms, new colors, rounded corners & more
- 128. Why You Should Come Back • Next up: css3! (The fun stuff) • Transitions, transforms, new colors, rounded corners & more • Web fonts
- 129. Why You Should Come Back • Next up: css3! (The fun stuff) • Transitions, transforms, new colors, rounded corners & more • Web fonts • Media queries & responsive web stuff
- 130. SEE YOU SHORTL
- 132. HEY, YOU CAME BACK!
- 133. LET’S TALK CSS
- 134. Diving In CSS3
- 135. Diving In Please open index.html from lab-09 in your favorite text editor. CSS3
- 136. OPACITY & RGBA CSS3
- 137. For IE7 & 8 CSS3
- 138. For IE7 & 8 background-color: #ffc; CSS3
- 139. HSL & Colors CSS3
- 140. HSL CSS3
- 141. HSL CSS3
- 142. HSL is CSS3
- 143. HSL is hsl(60, 20%, 100%) CSS3
- 144. HSL rgb(255, 255, 204) is hsl(60, 20%, 100%) CSS3
- 147. From One to Another CSS3
- 148. From One to Another Please open index.html from lab-10 in your favorite text editor. CSS3
- 149. GRADIENT S CSS3
- 150. Use a Generator The syntax is complex, and differs across browsers. My favorite: http://www.colorzilla.com/gradient-editor/ CSS3
- 151. Round It Off CSS3
- 152. Round It Off Please open index.html from lab-11 in your favorite text editor. CSS3
- 153. BORDER- RADIUS CSS3
- 154. For IE7 & 8 Square corners. :) CSS3
- 155. Yet Another http://border-radius.com/ CSS3
- 156. And… Circles! CSS3
- 157. Make it Pop CSS3
- 158. Make it Pop Please open index.html from lab-12 in your favorite text editor. CSS3
- 159. SHADOWS CSS3
- 160. Segments horizontal offset vertical offset blur radius (optional) spread radius (optional) color CSS3
- 161. For IE7 & 8 No shadows. CSS3
- 162. Transforms CSS3
- 163. Transforms Please open index.html from lab-13 in your favorite text editor. CSS3
- 164. TRANSFORM S CSS3
- 165. This part is a lot of CSS3
- 166. Fantastic Four CSS3
- 167. Fantastic Four Skew CSS3
- 168. Fantastic Four Skew Rotate CSS3
- 169. Fantastic Four Skew Rotate Translate CSS3
- 170. Fantastic Four Skew Rotate Translate Scale CSS3
- 171. For IE7 & 8 No transforms. Don’t do anything that would destroy your interface. CSS3
- 173. Awesome Animation Please open index.html from lab-14 in your favorite text editor. CSS3
- 174. TRANSITION S CSS3
- 175. More Animation CSS3
- 176. More Animation Please open index-2.html from lab-14 in your favorite text editor. CSS3
- 177. For IE7 & 8 Again, no transitions. Keep this in mind. CSS3
- 178. More Than Arial CSS3
- 179. More Than Arial Please open index.html from lab-15 in your favorite text editor. CSS3
- 180. @FONT- FACE CSS3
- 181. Finding Fonts Font Squirrel http://www.fontsquirrel.com/ TypeKit http://www.typekit.com CSS3
- 183. For IE7 & 8 These work! CSS3
- 185. Finally, Everywhere Please open index.html from lab-16 in your favorite text editor. CSS3
- 186. MEDIA QUERIES CSS3
- 187. Simply Put… Media Queries allow us to change any css style based on screen-size, pixel-density, and media-type. (This is super powerful.) CSS3
- 188. On Responsiveness We’re still figuring it all out. CSS3
- 189. For IE7 & 8 These don’t work with css, although people have created JavaScript libraries that will work. But is that necessary? CSS3
- 190. & CSS THAT’S
- 192. QUESTIONS? LET’S CHAT
- 193. THANK I’m Fred LeBlanc. Find me: @fredhq fred@fredhq.com http://fredhq.com
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n