HTML5, CSS3 & Responsive Design
Post on 06-May-2015
308 Views
Preview:
DESCRIPTION
Transcript
Presented by: Fawzia Essa Twitter: @fawziaessa
To be familiar with websites Designing tools
WHY ?
AGENDA:
1. HTML, CSS, & JavaScript.
2. CSS & CSS3 (Transitions, CSS Effects, Columns Floats, Box Sizing, 3D
Transforms & Animations)
3. Responsive Design & Media Query Review
4. Samples of my work
HTML, CSS, & JavaScript
1 2 3 4
1 2 3 4
HTML doctype
CSS in the <head>
JavaScript at the bottom before </body>
Tags & attributes in lower case
Attributes double quoted
HTML, CSS & JavaScript
1 2 3 4
HTML, CSS & JavaScript
HTML
1 2 3 4
HTML, CSS & JavaScript
HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
1 2 3 4
HTML, CSS & JavaScript
http://www.w3schools.com/html/default.asp
Reference:
1 2 3 4
HTML, CSS & JavaScript
CSS Selectors: (Universal & Common)
http://w3schools.com/css/default.asp
Reference:
The 30 CSS Selectors you Must Memorize
1 2 3 4
HTML, CSS & JavaScript
CSS Selectors: (Pseudo-classes & Advanced)
1 2 3 4
HTML, CSS & JavaScript
CSS box Model:
1 2 3 4
HTML, CSS & JavaScript
CSS Float:
1 2 3 4
HTML, CSS & JavaScript
CSS Position:
Relative
Absolute
1 2 3 4
CSS3 (Transitions, CSS Effects, Columns Floats, Box Sizing, 3D Transforms & Animations)
Animate your HTML5
Reference:
What CSS3 can do?
Responsive Design
1 2 3 4
It’s a Philosophy
Small, Medium & Large
ONE WEBSITE
1 2 3 4
Responsive Design
Fluid Grid
Media Query
Fluid Images
http://getbootstrap.com/2.3.2/scaffolding.html
Reference:
1 2 3 4
Responsive Design
Fluid Grid: Turning static layout to fluid one by turning the static values to relative values.
Static Width= 700px
Fluid Width= 70%
Static Width= 300px
Fluid Width= 30%
1 2 3 4
Responsive Design
Media Queries: A media query is a CSS expression that will test certain device features , and return a boolean value. If the value is true, styles defined in the media query block will be applied to the document.
1 2 3 4
Responsive Design
Where may I query ?
• Link tags
• @import directive
• CSS
1 2 3 4
Responsive Design
What we can Query:
• Device-width/Device-height
• Width/Height
1 2 3 4
Responsive Design
What we can Query:
• Resolution
• Orientation
1 2 3 4
Responsive Design
Media Query Anatomy:
@media - Specifies the start of a media query.
only - States that the following query should apply only to screen media types. The only keyword also serves to hide the associated style rules from older browsers that don't support media queries.
screen - Specifies the media type we are targeting. Other media types include print, handheld, and tv.
and - Indicates the end of the media type specification and the beginning of the media feature rule.
(max-width: 768px) - Media feature rule to test. In this case, the browser window must be 768px or smaller for the rules to apply.
1 2 3 4
Responsive Design
Fluid Images:
Demo
1 2 3 4
Responsive Design
LAYOUT
RESPONSIVE IMAGES ICONS B
OO
TSR
AP
1 2 3 4
Samples of my Work
Rwaq.org
Akhbarak.net
Meetphool.net
Scroide.com
Dar-Alakhbar.com
optikcheck.de
Presented by: Fawzia Essa Twitter: @fawziaessa
top related