Training Html5 -CSS3 New things

Agenda
• HTML vs HTML5: New features
• CSS vs CSS3: New features
• Responsive Design core concepts
• Modernizr

HTML VS HTML5: NEW
FEATURES
HTML5 & CSS3

DOCTYPE
• HTML5
– <!DOCTYPE html>
• HTML
– <!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0 Transitional//EN" "htt
p://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

<Figure>
• HTML5
– <figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
– </figure>
• HTML
– N/A

“Type” – Links & Js
• HTML5
– Not necessary
• <script src="path/to/script.js"></script>
• HTML
– Necessary
• <script src="path/to/script.js“
type=“text/javascript”></script>

“” – ID’s & Classes
• HTML5
– Not necessary
• <p class=myClass id=someId>
• HTML
– Necessary
• <p class=“myClass” id=“someId”>

UL Editable
• HTML5
– <ul contenteditable=true>
• HTML
– N/A

Type=“Email”
• HTML5
– <input id="email" name="email" type="email"
/>
• HTML
– N/A

Placeholders
• HTML5
– <input name="email" type="email"
placeholder=“mail@domain.com" />
• HTML
– N/A

Semantic Tags
• HTML5
– <Nav>
– <Header>
– <Article>
• <Section>
– <Aside>
– <Footer>
• HTML
– N/A

Training Html5 -CSS3 New things

Required
• HTML5
– <input type="text" name="someInput"
required>
• HTML
– N/A

Autofocus
• HTML5
– <input type="text" name="someInput"
placeholder="Douglas Quaid" required
autofocus>
• HTML
– N/A

Audio
• HTML5
– <audio autoplay="autoplay"
controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
– </audio>
• HTML
– N/A

Video
• HTML5
– <video controls preload>
<source src=“video.ogv" type="video/ogg" />
<source src=“video.mp4" type="video/mp4”/>
<p> Your browser is old. <a
href=“video.mp4">Download this video instead.</a>
</p>
– </video>
• HTML
– N/A

Data Attributes
• HTML5
– <div id="myDiv" data-custom-attr="My
Value"> Text</div>
• HTML
– N/A

More help
• http://joshduck.com/periodic-table.html

CSS3 VS CSS: NEW FEATURES
HTML5 & CSS3

First Child
• CSS3
– #big_section p:first-child{ }
• CSS
– N/A

First Letter
• CSS3
– #p_line:first-letter{ }
• CSS
– N/A

Border Radius
• CSS3
– border-radius: 10px 90px 90px 10px;
• CSS
– N/A

Transition
• CSS3
– transition: width 2s, height 2s, color
3s, transform 2s, linear 2s;
• CSS
– N/A

Transformation
• CSS3
– transform:rotate(7deg);
– transform: translate(70px);
• CSS
– N/A

RESPONSIVE WEB DESIGN
HTML5 & CSS3

What is?
• “A website that responds to the device that
accesses it and delivers the appropriate
output for it uses responsive design.
Rather than designing multiple sites for
different-sized devices, this approach
designs one site but specifies how it
should appear on varied devices.”
https://itservices.stanford.edu/service/web/mobile/about/terminology

What isn’t?
• A small website
• Different url’s for different devices
• Having 100% width elements

Viewports
• <meta name="viewport"
content="width=device-width, user-
scalable=false;">

Media Queries
• CSS3 module
• Adapt to conditions like screen resolution
• Breakpoint
– @media only screen and (max-device-width:
480px) { }

Examples
• Fixed Design: http://www.corvusart.com/
• Elastic Design: http://clearleft.com/
• Responsive Web Design: Demo

Modernizr
• Use HTML5 on old browsers
• Simple: Add reference to the js file
• Download: www.modernizr.com

Links
• Lynda:
– Responsive Design Fundamentals
– CSS3 First Look
• www.modernizr.com
• www.html5test.com/compare/browser/inde
x.html
• www.slideshare.net/Jim04

Training Html5 -CSS3 New things

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Training Html5 -CSS3 New things (20)

More from Jimmy Campos (6)

Recently uploaded (20)

Training Html5 -CSS3 New things

Editor's Notes