HTML5, CSS3 & Responsive Design

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

1 2 3 4


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

<!DOCTYPE html>

http://www.w3schools.com/html/default.asp

html5/HTML5 Presentation.htm

html5/HTML5 Presentation.htm

1 2 3 4



Reference:




1 2 3 4


CSS Selectors: (Universal & Common)

http://w3schools.com/css/default.asp

Reference:

The 30 CSS Selectors you Must Memorize




http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/



1 2 3 4


CSS Selectors: (Pseudo-classes & Advanced)

1 2 3 4


CSS box Model:

1 2 3 4


CSS Float:

1 2 3 4


CSS Position:

Relative

Absolute

1 2 3 4

html5/css3.htm

1 2 3 4

CSS3 (Transitions, CSS Effects, Columns Floats, Box Sizing, 3D Transforms & Animations)

Animate your HTML5

Reference:

What CSS3 can do?

http://animateyourhtml5.appspot.com/pres/index.html?lang=en

http://animateyourhtml5.appspot.com/pres/index.html?lang=en

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

http://iam.colum.edu/Jon.Petto/classes/ewt/week3/demo-img.html

Samples of my Work

1 2 3 4

http://deema.espace-technologies.com/prototypes/home

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

http://rwaq.org/

http://rwaq.org/

http://www.akhbarak.net/


http://meetphool.net/

http://www.scroide.com/

http://www.daralakhbar.com/




http://www.optikcheck.de/


Presented by: Fawzia Essa Twitter: @fawziaessa