HTML5, CSS3 & Responsive Design
•
2 likes•1,099 views
Be familiar with websites Designing tools
Recommended
More Related Content
Viewers also liked
Similar to HTML5, CSS3 & Responsive Design
Similar to HTML5, CSS3 & Responsive Design (20)
Recently uploaded
Recently uploaded (20)
HTML5, CSS3 & Responsive Design
- 1. Presented by: Fawzia Essa Twitter: @fawziaessa
- 2. WHY ? To be familiar with websites Designing tools
- 4. 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
- 5. 1 2 3 HTML, CSS, & JavaScript 4
- 6. 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
- 7. 1 HTML, CSS & JavaScript 2 3 4
- 8. 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
- 9. 1 2 HTML, CSS & JavaScript Reference: http://www.w3schools.com/html/default.asp 3 4
- 10. 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
- 11. 1 2 3 HTML, CSS & JavaScript CSS Selectors: (Pseudo-classes & Advanced) 4
- 12. 1 HTML, CSS & JavaScript CSS box Model: 2 3 4
- 13. 1 HTML, CSS & JavaScript CSS Float: 2 3 4
- 14. 1 2 3 4 HTML, CSS & JavaScript CSS Position: Relative Absolute
- 15. 1 2 3 4
- 16. 1 2 3 4 CSS3 (Transitions, CSS Effects, Columns Floats, Box Sizing, 3D Transforms & Animations) What CSS3 can do? Reference: Animate your HTML5
- 18. 1 2 3 4 Responsive Design It’s a Philosophy Small, Medium & Large ONE WEBSITE
- 19. 1 2 Responsive Design Fluid Grid Media Query Fluid Images Reference: http://getbootstrap.com/2.3.2/scaffolding.html 3 4
- 20. 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%
- 21. 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.
- 22. 1 2 Responsive Design Where may I query ? • Link tags • @import directive • CSS 3 4
- 23. 1 2 Responsive Design What we can Query: • Width/Height • Device-width/Device-height 3 4
- 24. 1 2 Responsive Design What we can Query: • Orientation • Resolution 3 4
- 25. 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.
- 28. 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
- 30. Presented by: Fawzia Essa Twitter: @fawziaessa