HTML5, CSS3 & Responsive Design

580 views

Published on

Be familiar with websites Designing tools

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
580
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5, CSS3 & Responsive Design

  1. 1. Presented by: Fawzia Essa Twitter: @fawziaessa
  2. 2. WHY ? To be familiar with websites Designing tools
  3. 3. 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
  4. 4. 1 2 3 HTML, CSS, & JavaScript 4
  5. 5. 1 2 HTML, CSS & JavaScript  HTML doctype  CSS in the <head>  JavaScript at the bottom before </body>  Tags & attributes in lower case  Attributes double quoted 3 4
  6. 6. 1 HTML, CSS & JavaScript 2 3 4
  7. 7. 1 2 3 HTML, CSS & JavaScript HTML HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd"> <!DOCTYPE html> 4
  8. 8. 1 2 HTML, CSS & JavaScript Reference: http://www.w3schools.com/html/default.asp 3 4
  9. 9. 1 2 3 4 HTML, CSS & JavaScript CSS Selectors: (Universal & Common) Reference: http://w3schools.com/css/default.asp The 30 CSS Selectors you Must Memorize
  10. 10. 1 2 3 HTML, CSS & JavaScript CSS Selectors: (Pseudo-classes & Advanced) 4
  11. 11. 1 HTML, CSS & JavaScript CSS box Model: 2 3 4
  12. 12. 1 HTML, CSS & JavaScript CSS Float: 2 3 4
  13. 13. 1 2 3 4 HTML, CSS & JavaScript CSS Position: Relative Absolute
  14. 14. 1 2 3 4
  15. 15. 1 2 3 4 CSS3 (Transitions, CSS Effects, Columns Floats, Box Sizing, 3D Transforms & Animations) What CSS3 can do? Reference: Animate your HTML5
  16. 16. 1 2 3 Responsive Design 4
  17. 17. 1 2 3 4 Responsive Design It’s a Philosophy  Small, Medium & Large ONE WEBSITE
  18. 18. 1 2 Responsive Design  Fluid Grid  Media Query  Fluid Images Reference: http://getbootstrap.com/2.3.2/scaffolding.html 3 4
  19. 19. 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 Static Width= 300px Fluid Width= 70% Fluid Width= 30%
  20. 20. 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.
  21. 21. 1 2 Responsive Design Where may I query ? • Link tags • @import directive • CSS 3 4
  22. 22. 1 2 Responsive Design What we can Query: • Width/Height • Device-width/Device-height 3 4
  23. 23. 1 2 Responsive Design What we can Query: • Orientation • Resolution 3 4
  24. 24. 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.
  25. 25. 1 2 3 4 Responsive Design Fluid Images: Demo
  26. 26. 1 2 3 Samples of my Work 4
  27. 27. 1 2 3 4 Samples of my Work BOOTSRAP LAYOUT RESPONSIVE ICONS IMAGES  Rwaq.org  Dar-Alakhbar.com  Akhbarak.net  optikcheck.de  Meetphool.net  Scroide.com
  28. 28. Presented by: Fawzia Essa Twitter: @fawziaessa

×