HTML  5  & YOU    & ME
W    ho          is               th                 isH                     gu TM                     y?   L5Br     ea   ...
W    ho          is               th                 isH                     gu TM                     y?   L5Br     ea   ...
W    ho          is               th                 isH                     gu TM                     y?   L5Br     ea   ...
W    ho          is               th                 isH                     gu TM                     y?   L5Br     ea   ...
W    ho          is               th                 isH                     gu TM                     y?   L5Br     ea   ...
W    ho          is               th                 isH                     gu TM                     y?   L5Br     ea   ...
W                                    ho                                          is                                       ...
Who Am I?
Who Am I?• I’m Fred LeBlanc.
Who Am I?• I’m Fred LeBlanc.• I run         .
Who Am I?• I’m Fred LeBlanc.• I run         .• I specialize in front-end development.
Who Am I?• I’m Fred LeBlanc.• I run         .• I specialize in front-end development.• I’ve been html-ing for 15 years.
Who Am I?• I’m Fred LeBlanc.• I run         .• I specialize in front-end development.• I’ve been html-ing for 15 years.• I...
OK —ENOUGH
LET’STALKHTML
Getting our Hands       DirtyHTML5
Getting our Hands       Dirty          Please open index.html from lab-01  in your favorite text editor.HTML5
This is HTML4.HTML5
This is HTML4.   Let’s make this html5.HTML5
Above the <html> element, write this:HTML5
Above the <html> element, write this:<!doctype html>HTML5
BOOM! DONHTML5
DOCTYPEsHTML5
DOCTYPEs a/k/a DTDsHTML5
DOCTYPEs a/k/a DTDs  “Document Type Definition”HTML5
Other DOCTYPEsHTML5
Other DOCTYPEs<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/           TR/html4/loose....
Other DOCTYPEs<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/           TR/html4/loose....
The Coolest PartHTML5
The Coolest Part Most of the html you know is   still valid html5!HTML5
Have a Look <!--...-->      <body>        <dl>       <head>       <map>       <samp>      <tfoot> <!doctype>       <br>   ...
Still Cool <!--...-->      <body>        <dl>       <head>       <map>       <samp>      <tfoot> <!doctype>       <br>    ...
Goodnight, Sweet <!--...-->             Prince                 <body>        <dl>       <head>       <map>       <samp>   ...
HTML5 Stages of Grief    How to cope with these losses.HTML5
Twelve Angry TagsHTML5
Twelve Angry TagsOut with the old…HTML5
Twelve Angry TagsOut with the old……in with the new.HTML5
Twelve Angry Tags     ith the old…   <acronym>Out w…in with the new.HTML5
Twelve Angry Tags     ith the old…   <acronym>Out w…in with the new.                    The <abbr> tag.HTML5
Twelve Angry TagsOut with the old…   <a p p l e t>…in with the new.HTML5
Twelve Angry TagsOut with the old…   <a p p l e t>…in with the new.                    JS, <canvas>, FlashHTML5
Twelve Angry Tags     ith the old…   <b asefont>Out w…in with the new.HTML5
Twelve Angry Tags     ith the old…   <b asefont>Out w…in with the new.                    CSS on html eleme               ...
Twelve Angry TagsOut with the old…   <big>…in with the new.HTML5
Twelve Angry TagsOut with the old…   <big>…in with the new.                    <span> & CSSHTML5
Twelve Angry TagsOut with the old…   <center>…in with the new.HTML5
Twelve Angry TagsOut with the old…   <center>…in with the new.                    CSSHTML5
Twelve Angry TagsOut with the old…   <dir>…in with the new.HTML5
Twelve Angry TagsOut with the old…   <dir>…in with the new.                    <ul>HTML5
Twelve Angry TagsOut with the old…   <font>…in with the new.HTML5
Twelve Angry TagsOut with the old…   <font>…in with the new.                    CSSHTML5
Twelve Angry Tags                    <frameset>/Out with the old…   <frame>…in with the new.HTML5
Twelve Angry Tags                    <frameset>/Out with the old…   <frame>…in with the new.                    <iframe>HT...
Twelve Angry Tags     ith the old…   <noframes>Out w…in with the new.HTML5
Twelve Angry Tags     ith the old…   <noframes>Out w…in with the new.                    Nothing…HTML5
Twelve Angry TagsOut with the old…   <strike>…in with the new.HTML5
Twelve Angry TagsOut with the old…   <strike>…in with the new.                    CSSHTML5
Twelve Angry TagsOut with the old…   <tt>…in with the new.HTML5
Twelve Angry TagsOut with the old…   <tt>…in with the new.   <code>, <var>,                    <pre>HTML5
It Was a Different           Time 2.0.     Waaaaay before WebHTML5
HTML5   All about semantics.HTML5
21     To help us out,    28 NEWHTML5
To help us out,29 28 NEW2827HTML5
Said New Tags  <article>      <figure>       <ruby>   <aside>       <footer>       <rp>   <audio>       <header>        <rt...
Today’s Focus Is On…    <article>      <figure>       <ruby>     <aside>       <footer>       <rp>     <audio>       <heade...
Notes on Others  <article>      <figure>       <ruby>   <aside>       <footer>       <rp>   <audio>       <header>        <...
Notes on Others  <article>      <figure>       <ruby>   <aside>       <footer>       <rp>   <audio>       <header>        <...
Notes on Others  <article>      <figure>       <ruby>   <aside>       <footer>       <rp>   <audio>       <header>        <...
Notes on Others  <article>      <figure>       <ruby>   <aside>       <footer>       <rp>   <audio>       <header>        <...
Notes on Others  <article>      <figure>       <ruby>   <aside>       <footer>       <rp>   <audio>       <header>        <...
Here We Go          Please open index.html from lab-02  in your favorite text editor.HTML5
DIVs,SECTIONs&HTML5
DIVs,SECTIONs&HTML5
DIVs,SECTIONs&HTML5
DIVs,SECTIONs&HTML5
This Can BeCONFUSING   And that’s A-OK!HTML5
Within the <div> element, create a    element, and add a heading.HTML5
Within the <div> element, create a   <section>    element, and add a heading.HTML5
Within that, create two elements, and give’em some content.HTML5
Within that, create two     <article> elements, and give’em some content.HTML5
On ManyHTML5
On Many   This is also OK!HTML5
Moving On          Please open index.html from lab-03  in your favorite text editor.HTML5
ASIDEsHTML5
After the <section> element, create an     element, with the class related.HTML5
After the <section> element, create an       <aside>     element, with the class related.HTML5
Inside of that, create a couple of elements, each with sample content.HTML5
Inside of that, create a couple of   <section> elements, each with sample content.HTML5
Header Time          Please open index.html from lab-04  in your favorite text editor.HTML5
HEADERs&FOOTERsHTML5
Before the <section> element, create a       element, with a page title.HTML5
Before the <section> element, create a     <header>       element, with a page title.HTML5
After the <aside> element, create a element, with copyright information.HTML5
After the <aside> element, create a     <footer> element, with copyright information.HTML5
Getting Around          Please open index.html from lab-05  in your favorite text editor.HTML5
NAVsHTML5
At the end of the <header> element, create a     element, with links to other pages.HTML5
At the end of the <header> element, create a            <nav>     element, with links to other pages.HTML5
HEY YOU!NICE HTML5PAGEHTML5
GEARCHANGHTML5
A Detail Page          Please open index.html from lab-06  in your favorite text editor.HTML5
FIGUREs&FIGCAPTIONsHTML5
After the first <p> element, create a  element, with the provided image.HTML5
After the first <p> element, create a     <figure>  element, with the provided image.HTML5
Within that element (after the image), create a    element, with an appropriate caption.HTML5
Within that element (after the image), create a   <figcaption>    element, with an appropriate caption.HTML5
Let’s Add Media          Please open index.html from lab-07  in your favorite text editor.HTML5
AUDIOsHTML5
After the first <p> element, create an    element, with the audio sources.HTML5
After the first <p> element, create an      <audio>    element, with the audio sources.HTML5
New Attributes     autoplay="autoplay"     controls="controls"         loop="loop"      preload="preload"HTML5
Last One          Please open index.html from lab-08  in your favorite text editor.HTML5
VIDEOsHTML5
After the first <p> element, create a   element, with the video sources.HTML5
After the first <p> element, create a      <video>   element, with the video sources.HTML5
New Attributes    autobuffer="autobuffer"      autoplay="autoplay"      controls="controls"          loop="loop"        po...
AS ALWAYS,BE CAREFUL WITHAUTOPLAHTML5
ONE MOREHTML5
IE!ONE MOREHTML5
THE SHIM http://code.google.com/p/html5shim/HTML5
&HTMLTHAT’S
IT’S ALMOSTBREATIME!
BUTFIRST…
Why You Should Come       Back
Why You Should Come         Back• Next up: css3! (The fun stuff)
Why You Should Come         Back• Next up: css3! (The fun stuff)• Transitions, transforms, new colors,  rounded corners & ...
Why You Should Come         Back• Next up: css3! (The fun stuff)• Transitions, transforms, new colors,  rounded corners & ...
Why You Should Come         Back• Next up: css3! (The fun stuff)• Transitions, transforms, new colors,  rounded corners & ...
SEEYOUSHORTL
HEY, YOUCAMEBACK!
LET’S TALKCSS
Diving InCSS3
Diving In          Please open index.html from lab-09  in your favorite text editor.CSS3
OPACITY& RGBACSS3
For IE7 & 8CSS3
For IE7 & 8 background-color: #ffc;CSS3
HSL &ColorsCSS3
HSLCSS3
HSLCSS3
HSL             isCSS3
HSL              is       hsl(60, 20%, 100%)CSS3
HSL       rgb(255, 255, 204)              is       hsl(60, 20%, 100%)CSS3
New Color Names!CSS3
New Color Names!CSS3
From One to AnotherCSS3
From One to Another          Please open index.html from lab-10  in your favorite text editor.CSS3
GRADIENTSCSS3
Use a Generator         The syntax is complex,       and differs across browsers.               My favorite:http://www.col...
Round It OffCSS3
Round It Off          Please open index.html from lab-11  in your favorite text editor.CSS3
BORDER-RADIUSCSS3
For IE7 & 8    Square corners. :)CSS3
Yet Another  http://border-radius.com/CSS3
And… Circles!CSS3
Make it PopCSS3
Make it Pop          Please open index.html from lab-12  in your favorite text editor.CSS3
SHADOWSCSS3
Segments      horizontal offset        vertical offset    blur radius (optional)   spread radius (optional)             co...
For IE7 & 8       No shadows.CSS3
TransformsCSS3
Transforms          Please open index.html from lab-13  in your favorite text editor.CSS3
TRANSFORMSCSS3
This part is a lot ofCSS3
Fantastic FourCSS3
Fantastic Four  SkewCSS3
Fantastic Four  Skew     RotateCSS3
Fantastic Four  Skew       Rotate TranslateCSS3
Fantastic Four  Skew       Rotate Translate   ScaleCSS3
For IE7 & 8         No transforms.  Don’t do anything that would    destroy your interface.CSS3
Awesome AnimationCSS3
Awesome Animation          Please open index.html from lab-14  in your favorite text editor.CSS3
TRANSITIONSCSS3
More AnimationCSS3
More Animation            Please open index-2.html from lab-14    in your favorite text editor.CSS3
For IE7 & 8   Again, no transitions.    Keep this in mind.CSS3
More Than ArialCSS3
More Than Arial          Please open index.html from lab-15  in your favorite text editor.CSS3
@FONT-FACECSS3
Finding Fonts          Font Squirrel  http://www.fontsquirrel.com/            TypeKit    http://www.typekit.comCSS3
Legal & LicensingCSS3
For IE7 & 8       These work!CSS3
Finally, EverywhereCSS3
Finally, Everywhere           Please open index.html from lab-16   in your favorite text editor.CSS3
MEDIAQUERIESCSS3
Simply Put… Media Queries allow us to change any css style based on screen-size,   pixel-density, and media-type.        (...
On Responsiveness   We’re still figuring it all out.CSS3
For IE7 & 8    These don’t work with css,  although people have created      JavaScript libraries that             will wo...
&CSSTHAT’S
MOVINGFORWARFROM HERE
QUESTIONS?  LET’S CHAT
THANK  I’m Fred LeBlanc. Find me:@fredhq   fred@fredhq.com   http://fredhq.com
What designers need to know about HTML5 and CSS3
Upcoming SlideShare
Loading in...5
×

What designers need to know about HTML5 and CSS3

2,336

Published on

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,336
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

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 of "What designers need to know about HTML5 and CSS3"

    1. 1. HTML 5 & YOU & ME
    2. 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. 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. 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. 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. 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. 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. 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. 9. Who Am I?
    10. 10. Who Am I?• I’m Fred LeBlanc.
    11. 11. Who Am I?• I’m Fred LeBlanc.• I run .
    12. 12. Who Am I?• I’m Fred LeBlanc.• I run .• I specialize in front-end development.
    13. 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. 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. 15. OK —ENOUGH
    16. 16. LET’STALKHTML
    17. 17. Getting our Hands DirtyHTML5
    18. 18. Getting our Hands Dirty Please open index.html from lab-01 in your favorite text editor.HTML5
    19. 19. This is HTML4.HTML5
    20. 20. This is HTML4. Let’s make this html5.HTML5
    21. 21. Above the <html> element, write this:HTML5
    22. 22. Above the <html> element, write this:<!doctype html>HTML5
    23. 23. BOOM! DONHTML5
    24. 24. DOCTYPEsHTML5
    25. 25. DOCTYPEs a/k/a DTDsHTML5
    26. 26. DOCTYPEs a/k/a DTDs “Document Type Definition”HTML5
    27. 27. Other DOCTYPEsHTML5
    28. 28. Other DOCTYPEs<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd">HTML5
    29. 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. 30. The Coolest PartHTML5
    31. 31. The Coolest Part Most of the html you know is still valid html5!HTML5
    32. 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. 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. 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. 35. HTML5 Stages of Grief How to cope with these losses.HTML5
    36. 36. Twelve Angry TagsHTML5
    37. 37. Twelve Angry TagsOut with the old…HTML5
    38. 38. Twelve Angry TagsOut with the old……in with the new.HTML5
    39. 39. Twelve Angry Tags ith the old… <acronym>Out w…in with the new.HTML5
    40. 40. Twelve Angry Tags ith the old… <acronym>Out w…in with the new. The <abbr> tag.HTML5
    41. 41. Twelve Angry TagsOut with the old… <a p p l e t>…in with the new.HTML5
    42. 42. Twelve Angry TagsOut with the old… <a p p l e t>…in with the new. JS, <canvas>, FlashHTML5
    43. 43. Twelve Angry Tags ith the old… <b asefont>Out w…in with the new.HTML5
    44. 44. Twelve Angry Tags ith the old… <b asefont>Out w…in with the new. CSS on html eleme ntHTML5
    45. 45. Twelve Angry TagsOut with the old… <big>…in with the new.HTML5
    46. 46. Twelve Angry TagsOut with the old… <big>…in with the new. <span> & CSSHTML5
    47. 47. Twelve Angry TagsOut with the old… <center>…in with the new.HTML5
    48. 48. Twelve Angry TagsOut with the old… <center>…in with the new. CSSHTML5
    49. 49. Twelve Angry TagsOut with the old… <dir>…in with the new.HTML5
    50. 50. Twelve Angry TagsOut with the old… <dir>…in with the new. <ul>HTML5
    51. 51. Twelve Angry TagsOut with the old… <font>…in with the new.HTML5
    52. 52. Twelve Angry TagsOut with the old… <font>…in with the new. CSSHTML5
    53. 53. Twelve Angry Tags <frameset>/Out with the old… <frame>…in with the new.HTML5
    54. 54. Twelve Angry Tags <frameset>/Out with the old… <frame>…in with the new. <iframe>HTML5
    55. 55. Twelve Angry Tags ith the old… <noframes>Out w…in with the new.HTML5
    56. 56. Twelve Angry Tags ith the old… <noframes>Out w…in with the new. Nothing…HTML5
    57. 57. Twelve Angry TagsOut with the old… <strike>…in with the new.HTML5
    58. 58. Twelve Angry TagsOut with the old… <strike>…in with the new. CSSHTML5
    59. 59. Twelve Angry TagsOut with the old… <tt>…in with the new.HTML5
    60. 60. Twelve Angry TagsOut with the old… <tt>…in with the new. <code>, <var>, <pre>HTML5
    61. 61. It Was a Different Time 2.0. Waaaaay before WebHTML5
    62. 62. HTML5 All about semantics.HTML5
    63. 63. 21 To help us out, 28 NEWHTML5
    64. 64. To help us out,29 28 NEW2827HTML5
    65. 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. 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. 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. 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. 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. 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. 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. 72. Here We Go Please open index.html from lab-02 in your favorite text editor.HTML5
    73. 73. DIVs,SECTIONs&HTML5
    74. 74. DIVs,SECTIONs&HTML5
    75. 75. DIVs,SECTIONs&HTML5
    76. 76. DIVs,SECTIONs&HTML5
    77. 77. This Can BeCONFUSING And that’s A-OK!HTML5
    78. 78. Within the <div> element, create a element, and add a heading.HTML5
    79. 79. Within the <div> element, create a <section> element, and add a heading.HTML5
    80. 80. Within that, create two elements, and give’em some content.HTML5
    81. 81. Within that, create two <article> elements, and give’em some content.HTML5
    82. 82. On ManyHTML5
    83. 83. On Many This is also OK!HTML5
    84. 84. Moving On Please open index.html from lab-03 in your favorite text editor.HTML5
    85. 85. ASIDEsHTML5
    86. 86. After the <section> element, create an element, with the class related.HTML5
    87. 87. After the <section> element, create an <aside> element, with the class related.HTML5
    88. 88. Inside of that, create a couple of elements, each with sample content.HTML5
    89. 89. Inside of that, create a couple of <section> elements, each with sample content.HTML5
    90. 90. Header Time Please open index.html from lab-04 in your favorite text editor.HTML5
    91. 91. HEADERs&FOOTERsHTML5
    92. 92. Before the <section> element, create a element, with a page title.HTML5
    93. 93. Before the <section> element, create a <header> element, with a page title.HTML5
    94. 94. After the <aside> element, create a element, with copyright information.HTML5
    95. 95. After the <aside> element, create a <footer> element, with copyright information.HTML5
    96. 96. Getting Around Please open index.html from lab-05 in your favorite text editor.HTML5
    97. 97. NAVsHTML5
    98. 98. At the end of the <header> element, create a element, with links to other pages.HTML5
    99. 99. At the end of the <header> element, create a <nav> element, with links to other pages.HTML5
    100. 100. HEY YOU!NICE HTML5PAGEHTML5
    101. 101. GEARCHANGHTML5
    102. 102. A Detail Page Please open index.html from lab-06 in your favorite text editor.HTML5
    103. 103. FIGUREs&FIGCAPTIONsHTML5
    104. 104. After the first <p> element, create a element, with the provided image.HTML5
    105. 105. After the first <p> element, create a <figure> element, with the provided image.HTML5
    106. 106. Within that element (after the image), create a element, with an appropriate caption.HTML5
    107. 107. Within that element (after the image), create a <figcaption> element, with an appropriate caption.HTML5
    108. 108. Let’s Add Media Please open index.html from lab-07 in your favorite text editor.HTML5
    109. 109. AUDIOsHTML5
    110. 110. After the first <p> element, create an element, with the audio sources.HTML5
    111. 111. After the first <p> element, create an <audio> element, with the audio sources.HTML5
    112. 112. New Attributes autoplay="autoplay" controls="controls" loop="loop" preload="preload"HTML5
    113. 113. Last One Please open index.html from lab-08 in your favorite text editor.HTML5
    114. 114. VIDEOsHTML5
    115. 115. After the first <p> element, create a element, with the video sources.HTML5
    116. 116. After the first <p> element, create a <video> element, with the video sources.HTML5
    117. 117. New Attributes autobuffer="autobuffer" autoplay="autoplay" controls="controls" loop="loop" poster="poster"HTML5
    118. 118. AS ALWAYS,BE CAREFUL WITHAUTOPLAHTML5
    119. 119. ONE MOREHTML5
    120. 120. IE!ONE MOREHTML5
    121. 121. THE SHIM http://code.google.com/p/html5shim/HTML5
    122. 122. &HTMLTHAT’S
    123. 123. IT’S ALMOSTBREATIME!
    124. 124. BUTFIRST…
    125. 125. Why You Should Come Back
    126. 126. Why You Should Come Back• Next up: css3! (The fun stuff)
    127. 127. Why You Should Come Back• Next up: css3! (The fun stuff)• Transitions, transforms, new colors, rounded corners & more
    128. 128. Why You Should Come Back• Next up: css3! (The fun stuff)• Transitions, transforms, new colors, rounded corners & more• Web fonts
    129. 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. 130. SEEYOUSHORTL
    131. 131. HEY, YOUCAMEBACK!
    132. 132. LET’S TALKCSS
    133. 133. Diving InCSS3
    134. 134. Diving In Please open index.html from lab-09 in your favorite text editor.CSS3
    135. 135. OPACITY& RGBACSS3
    136. 136. For IE7 & 8CSS3
    137. 137. For IE7 & 8 background-color: #ffc;CSS3
    138. 138. HSL &ColorsCSS3
    139. 139. HSLCSS3
    140. 140. HSLCSS3
    141. 141. HSL isCSS3
    142. 142. HSL is hsl(60, 20%, 100%)CSS3
    143. 143. HSL rgb(255, 255, 204) is hsl(60, 20%, 100%)CSS3
    144. 144. New Color Names!CSS3
    145. 145. New Color Names!CSS3
    146. 146. From One to AnotherCSS3
    147. 147. From One to Another Please open index.html from lab-10 in your favorite text editor.CSS3
    148. 148. GRADIENTSCSS3
    149. 149. Use a Generator The syntax is complex, and differs across browsers. My favorite:http://www.colorzilla.com/gradient-editor/CSS3
    150. 150. Round It OffCSS3
    151. 151. Round It Off Please open index.html from lab-11 in your favorite text editor.CSS3
    152. 152. BORDER-RADIUSCSS3
    153. 153. For IE7 & 8 Square corners. :)CSS3
    154. 154. Yet Another http://border-radius.com/CSS3
    155. 155. And… Circles!CSS3
    156. 156. Make it PopCSS3
    157. 157. Make it Pop Please open index.html from lab-12 in your favorite text editor.CSS3
    158. 158. SHADOWSCSS3
    159. 159. Segments horizontal offset vertical offset blur radius (optional) spread radius (optional) colorCSS3
    160. 160. For IE7 & 8 No shadows.CSS3
    161. 161. TransformsCSS3
    162. 162. Transforms Please open index.html from lab-13 in your favorite text editor.CSS3
    163. 163. TRANSFORMSCSS3
    164. 164. This part is a lot ofCSS3
    165. 165. Fantastic FourCSS3
    166. 166. Fantastic Four SkewCSS3
    167. 167. Fantastic Four Skew RotateCSS3
    168. 168. Fantastic Four Skew Rotate TranslateCSS3
    169. 169. Fantastic Four Skew Rotate Translate ScaleCSS3
    170. 170. For IE7 & 8 No transforms. Don’t do anything that would destroy your interface.CSS3
    171. 171. Awesome AnimationCSS3
    172. 172. Awesome Animation Please open index.html from lab-14 in your favorite text editor.CSS3
    173. 173. TRANSITIONSCSS3
    174. 174. More AnimationCSS3
    175. 175. More Animation Please open index-2.html from lab-14 in your favorite text editor.CSS3
    176. 176. For IE7 & 8 Again, no transitions. Keep this in mind.CSS3
    177. 177. More Than ArialCSS3
    178. 178. More Than Arial Please open index.html from lab-15 in your favorite text editor.CSS3
    179. 179. @FONT-FACECSS3
    180. 180. Finding Fonts Font Squirrel http://www.fontsquirrel.com/ TypeKit http://www.typekit.comCSS3
    181. 181. Legal & LicensingCSS3
    182. 182. For IE7 & 8 These work!CSS3
    183. 183. Finally, EverywhereCSS3
    184. 184. Finally, Everywhere Please open index.html from lab-16 in your favorite text editor.CSS3
    185. 185. MEDIAQUERIESCSS3
    186. 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. 187. On Responsiveness We’re still figuring it all out.CSS3
    188. 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. 189. &CSSTHAT’S
    190. 190. MOVINGFORWARFROM HERE
    191. 191. QUESTIONS? LET’S CHAT
    192. 192. THANK I’m Fred LeBlanc. Find me:@fredhq fred@fredhq.com http://fredhq.com

    ×