Your SlideShare is downloading. ×
0
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
What designers need to know about HTML5 and CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What designers need to know about HTML5 and CSS3

2,309

Published on

A talk/lab introducing HTML5 & CSS3 — what's new, how to use the new things and what to be careful for.

A talk/lab introducing HTML5 & CSS3 — what's new, how to use the new things and what to be careful for.

Published in: Education, Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,309
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \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
  • Transcript

    • 1. HTML 5 & YOU & ME
    • 2. W ho is th isH gu TM y? L5Br ea kCS S3 AheadW or ld The Journey D om in at io n, e tc .
    • 3. W ho is th isH gu TM y? L5Br ea kCS S3 AheadW or ld The Journey D om in at io n, e tc .
    • 4. W ho is th isH gu TM y? L5Br ea kCS S3 AheadW or ld The Journey D om in at io n, e tc .
    • 5. W ho is th isH gu TM y? L5Br ea kCS S3 AheadW or ld The Journey D om in at io n, e tc .
    • 6. W ho is th isH gu TM y? L5Br ea kCS S3 AheadW or ld The Journey D om in at io n, e tc .
    • 7. W ho is th isH gu TM y? L5Br ea kCS S3 AheadW 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 —ENOUGH
    • 16. LET’STALKHTML
    • 17. Getting our Hands DirtyHTML5
    • 18. Getting our Hands Dirty Please open index.html from lab-01 in your favorite text editor.HTML5
    • 19. This is HTML4.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! DONHTML5
    • 24. DOCTYPEsHTML5
    • 25. DOCTYPEs a/k/a DTDsHTML5
    • 26. DOCTYPEs a/k/a DTDs “Document Type Definition”HTML5
    • 27. Other DOCTYPEsHTML5
    • 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 XHTML1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">HTML5
    • 30. The Coolest PartHTML5
    • 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
    • 36. Twelve Angry TagsHTML5
    • 37. Twelve Angry TagsOut with the old…HTML5
    • 38. Twelve Angry TagsOut 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 TagsOut with the old… <a p p l e t>…in with the new.HTML5
    • 42. Twelve Angry TagsOut with the old… <a p p l e t>…in with the new. JS, <canvas>, FlashHTML5
    • 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 ntHTML5
    • 45. Twelve Angry TagsOut with the old… <big>…in with the new.HTML5
    • 46. Twelve Angry TagsOut with the old… <big>…in with the new. <span> & CSSHTML5
    • 47. Twelve Angry TagsOut with the old… <center>…in with the new.HTML5
    • 48. Twelve Angry TagsOut with the old… <center>…in with the new. CSSHTML5
    • 49. Twelve Angry TagsOut with the old… <dir>…in with the new.HTML5
    • 50. Twelve Angry TagsOut with the old… <dir>…in with the new. <ul>HTML5
    • 51. Twelve Angry TagsOut with the old… <font>…in with the new.HTML5
    • 52. Twelve Angry TagsOut with the old… <font>…in with the new. CSSHTML5
    • 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 TagsOut with the old… <strike>…in with the new.HTML5
    • 58. Twelve Angry TagsOut with the old… <strike>…in with the new. CSSHTML5
    • 59. Twelve Angry TagsOut with the old… <tt>…in with the new.HTML5
    • 60. Twelve Angry TagsOut with the old… <tt>…in with the new. <code>, <var>, <pre>HTML5
    • 61. It Was a Different Time 2.0. Waaaaay before WebHTML5
    • 62. HTML5 All about semantics.HTML5
    • 63. 21 To help us out, 28 NEWHTML5
    • 64. To help us out,29 28 NEW2827HTML5
    • 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
    • 73. DIVs,SECTIONs&HTML5
    • 74. DIVs,SECTIONs&HTML5
    • 75. DIVs,SECTIONs&HTML5
    • 76. DIVs,SECTIONs&HTML5
    • 77. This Can BeCONFUSING 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 ManyHTML5
    • 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. ASIDEsHTML5
    • 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
    • 91. HEADERs&FOOTERsHTML5
    • 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. NAVsHTML5
    • 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
    • 100. HEY YOU!NICE HTML5PAGEHTML5
    • 101. GEARCHANGHTML5
    • 102. A Detail Page Please open index.html from lab-06 in your favorite text editor.HTML5
    • 103. FIGUREs&FIGCAPTIONsHTML5
    • 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. AUDIOsHTML5
    • 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. VIDEOsHTML5
    • 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 WITHAUTOPLAHTML5
    • 119. ONE MOREHTML5
    • 120. IE!ONE MOREHTML5
    • 121. THE SHIM http://code.google.com/p/html5shim/HTML5
    • 122. &HTMLTHAT’S
    • 123. IT’S ALMOSTBREATIME!
    • 124. BUTFIRST…
    • 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. SEEYOUSHORTL
    • 131. HEY, YOUCAMEBACK!
    • 132. LET’S TALKCSS
    • 133. Diving InCSS3
    • 134. Diving In Please open index.html from lab-09 in your favorite text editor.CSS3
    • 135. OPACITY& RGBACSS3
    • 136. For IE7 & 8CSS3
    • 137. For IE7 & 8 background-color: #ffc;CSS3
    • 138. HSL &ColorsCSS3
    • 139. HSLCSS3
    • 140. HSLCSS3
    • 141. HSL isCSS3
    • 142. HSL is hsl(60, 20%, 100%)CSS3
    • 143. HSL rgb(255, 255, 204) is hsl(60, 20%, 100%)CSS3
    • 144. New Color Names!CSS3
    • 145. New Color Names!CSS3
    • 146. From One to AnotherCSS3
    • 147. From One to Another Please open index.html from lab-10 in your favorite text editor.CSS3
    • 148. GRADIENTSCSS3
    • 149. Use a Generator The syntax is complex, and differs across browsers. My favorite:http://www.colorzilla.com/gradient-editor/CSS3
    • 150. Round It OffCSS3
    • 151. Round It Off Please open index.html from lab-11 in your favorite text editor.CSS3
    • 152. BORDER-RADIUSCSS3
    • 153. For IE7 & 8 Square corners. :)CSS3
    • 154. Yet Another http://border-radius.com/CSS3
    • 155. And… Circles!CSS3
    • 156. Make it PopCSS3
    • 157. Make it Pop Please open index.html from lab-12 in your favorite text editor.CSS3
    • 158. SHADOWSCSS3
    • 159. Segments horizontal offset vertical offset blur radius (optional) spread radius (optional) colorCSS3
    • 160. For IE7 & 8 No shadows.CSS3
    • 161. TransformsCSS3
    • 162. Transforms Please open index.html from lab-13 in your favorite text editor.CSS3
    • 163. TRANSFORMSCSS3
    • 164. This part is a lot ofCSS3
    • 165. Fantastic FourCSS3
    • 166. Fantastic Four SkewCSS3
    • 167. Fantastic Four Skew RotateCSS3
    • 168. Fantastic Four Skew Rotate TranslateCSS3
    • 169. Fantastic Four Skew Rotate Translate ScaleCSS3
    • 170. For IE7 & 8 No transforms. Don’t do anything that would destroy your interface.CSS3
    • 171. Awesome AnimationCSS3
    • 172. Awesome Animation Please open index.html from lab-14 in your favorite text editor.CSS3
    • 173. TRANSITIONSCSS3
    • 174. More AnimationCSS3
    • 175. More Animation Please open index-2.html from lab-14 in your favorite text editor.CSS3
    • 176. For IE7 & 8 Again, no transitions. Keep this in mind.CSS3
    • 177. More Than ArialCSS3
    • 178. More Than Arial Please open index.html from lab-15 in your favorite text editor.CSS3
    • 179. @FONT-FACECSS3
    • 180. Finding Fonts Font Squirrel http://www.fontsquirrel.com/ TypeKit http://www.typekit.comCSS3
    • 181. Legal & LicensingCSS3
    • 182. For IE7 & 8 These work!CSS3
    • 183. Finally, EverywhereCSS3
    • 184. Finally, Everywhere Please open index.html from lab-16 in your favorite text editor.CSS3
    • 185. MEDIAQUERIESCSS3
    • 186. 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
    • 187. On Responsiveness We’re still figuring it all out.CSS3
    • 188. For IE7 & 8 These don’t work with css, although people have created JavaScript libraries that will work. But is that necessary?CSS3
    • 189. &CSSTHAT’S
    • 190. MOVINGFORWARFROM HERE
    • 191. QUESTIONS? LET’S CHAT
    • 192. THANK I’m Fred LeBlanc. Find me:@fredhq fred@fredhq.com http://fredhq.com

    ×