HTML5 and CSS3

HTML5 & CSS3Building a mobile website
ByMarioHernandez

Course Agenda
1. HTML5
2. CSS3
3. Feature Supportand Polyfills
4. Resources

About Me
I am Web Designer and Themer forDrupal Mediacurrent

Experience
Worked for the FederalGovernmentas lead Front-end
Developer

Noticeble Projects
1.
2.
3.
4.
5.
6.
7.
Teens ExploringTechnology
FederalCourtin Los Angeles
Dallas Cowboys
New England Patriots
San Diego Chargers
Harvard University
Habitatfor Humanity

Public Speaker
I conductcommunity-driven and private workshops
DrupalCamp Los Angeles
CodeCamp Los Angeles &San Diego
San Diego .NetUser Group
Meetups througoutLos Angeles

HTML5
HyperText Markup Language
Progressive Enhancements and GracefulDegradation
It’s official!
Block LevelElements vs. Inline LevelElements
Forms and Form Elements
Audio &Video
Picture
ExtendingSemantics &Accessibility
Performance and Optimization

CSS3Syntax
AddingCSS to apage
Floats
Positioning
Box Model
Web fonts
MediaQueries
Preprocessors -Introduction to Sass

Tools and
PollyfillsModernizr
HTML5Shiv
Respond.js

Resources1.
2.
3.
4.
CodePen
Can I Use
CSS3Please.com
HTML5Doctor.com

Example of Graceful
Degradation
.selector{
background-color:rgba(0,0,0,.5);
}
.lt-ie9.selector{
background-color:#999;
}

Example of Progressive
Enhacement
.selector{
background:url(images/image.png)00no-repeat;
}
.lt-ie9.selector{
background:url(images/image.gif)00no-repeat;
}

It's Official!!!HTML5 declared complete on October 28,
2014

Block Level Elements
Vs.
Inline Level Elements
Demo

How <picture> works
<picture>
<sourcesrcset="mobile.png">
<sourcemedia="(min-width:480px)"srcset="tablet.png">
<sourcemedia="(min-width:960px)"srcset="desktop.png">
<imgsrc="default.png"alt="Alternatetextisaddedinimgtag">
</picture>
View article for description
Another greatarticle

Extending Semantics &
Accessibility
Getinfo from article

Performance and Optimization
Getinfo from article

Agenda
Syntax and code format
AddingCSS to apage
Floats
Positions
z-index
Box Model
Web fonts
MediaQueries
Flexbox
Transitions
Preprocessors -Introduction to Sass

Syntax
selector{property:value;property:value;}

Syntax
body{background:white;color:blue;}

Syntax
body{
background:white;
color:blue;
}

Adding CSS to a page
Inline
<h1style="color:red;font-size:24px;">HelloWorld!</h1>

Internal Stylesheet
<head>
<style>
</style>
</head>
h1{
color:red;
font-size:24px;
}

External Stylesheet
<linkrel="stylesheet"href="css/styles.css">

Fixed Positioning
An elementwith fixed position is positioned relative to the
browser window. Itwillnotmove even if the window is scrolled:
h1{
position:fixed;
top:30px;
right:5px;
}

Relative Positioning
Arelative positioned elementis positioned relative to its normal
position.
h2{
position:relative;
left:-20px;
}
h2{
position:relative;
right:20px;
}

Relative Positioning
The contentof relativelypositioned elements can be moved and
overlap other elements, butthe reserved space for the elementis
stillpreserved in the normalflow.
Demo

Absolute Positioning
An absolute position elementis positioned relative to the first
parentelementthathas aposition other than static. If no such
elementis found, the containingblock is <html>:
h2{
position:absolute;
left:100px;
top:150px;
}

Absolute Positioning
Absolutelypositioned elements are removed from the normal
flow. The documentand other elements behave like the
absolutelypositioned elementdoes notexist. Absolutely
positioned elements can overlap other elements.

Overlapping Elements
When elements are positioned outside the normalflow, theycan
overlap other elements.
The z-index propertyspecifies the stack order of an element
(which elementshould be placed in frontof, or behind, the
others).
An elementcan have apositive or negative stack order:

img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
An elementwith greater stack order is always in frontof an
elementwith alower stack order.
If two positioned elements overlap withoutaz-index specified,
the elementpositioned lastin the HTML code willbe shown on
top.

Box Model
The CSS box modelis essentiallyabox thatwraps around HTML
elements, and itconsists of: margins, borders, padding, and the
actualcontent.
Demo
&
Code Example

Media Queries
@mediascreenand(max-width:300px){
body{
background-color:lightblue;
}
}

Sass(Syntactically Awesome Style Sheets)
Introduction to Preprocessors

What is Sass?
Sass is an extension of CSS thatadds power and elegance to the
basic language. Itallows you to use variables, nested rules,
mixins, inline imports, and more, allwith afullyCSS-compatible
syntax.

Features of Sass
FullyCSS3-compatible
Language extensions such as variables, nesting, and mixins
Manyusefulfunctions for manipulating
Well-formatted, customizable output
For more visitsass-lang.com

Let's see Sass in action
Live demo

Getting Started with Sass
Installing Sass

Mac
Sass requires Ruby
geminstallsass

Windows
InstallRubyInstaller first
geminstallsass
Go

Confirm Sass is up and running
sass-v

What is Compass?
Open Source CSS Authoring Framework
Demo

Installing Compass
geminstallcompass

Download slides:
Download slides source code:
Any questions?about.me/mario.hernandez
@Designsdrive
slideshare.net/marequi
github.com/mariohernandez/html5-css3

Basic Markup
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>HTML5andCSS3</title>
<linkrel="stylesheet"href="css/styles.css?v=1.0">
<head>
<body>
Contentgoeshere...
<scriptsrc="js/scripts.js"></script>
</body>
</html>

HTML5 and CSS3

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie HTML5 and CSS3

Ähnlich wie HTML5 and CSS3 (20)

Mehr von Mario Hernandez

Mehr von Mario Hernandez (15)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

HTML5 and CSS3