Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 and CSS3

370 views

Published on

HTML and CSS are the core technologies for building any website. In this presentation I focus on the core features of each and also introduce Sass as the next way of writing more efficient CSS.

Published in: Technology

HTML5 and CSS3

  1. 1. HTML5 & CSS3Building a mobile website ByMarioHernandez
  2. 2. Course Agenda 1. HTML5 2. CSS3 3. Feature Supportand Polyfills 4. Resources
  3. 3. About Me I am Web Designer and Themer forDrupal Mediacurrent
  4. 4. Experience Worked for the FederalGovernmentas lead Front-end Developer
  5. 5. 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
  6. 6. Public Speaker I conductcommunity-driven and private workshops DrupalCamp Los Angeles CodeCamp Los Angeles &San Diego San Diego .NetUser Group Meetups througoutLos Angeles
  7. 7. 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
  8. 8. CSS3Syntax AddingCSS to apage Floats Positioning Box Model Web fonts MediaQueries Preprocessors -Introduction to Sass
  9. 9. Tools and PollyfillsModernizr HTML5Shiv Respond.js
  10. 10. Resources1. 2. 3. 4. CodePen Can I Use CSS3Please.com HTML5Doctor.com
  11. 11. Graceful Degradation
  12. 12. Progressive Enhancement
  13. 13. Example of Graceful Degradation .selector{ background-color:rgba(0,0,0,.5); } .lt-ie9.selector{ background-color:#999; }
  14. 14. Example of Progressive Enhacement .selector{ background:url(images/image.png)00no-repeat; } .lt-ie9.selector{ background:url(images/image.gif)00no-repeat; }
  15. 15. It's Official!!!HTML5 declared complete on October 28, 2014
  16. 16. Block Level Elements Vs. Inline Level Elements Demo
  17. 17. Forms & Form Elements Demo
  18. 18. Audio & Video Demo
  19. 19. Picture
  20. 20. 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
  21. 21. Browser Support Can I Use
  22. 22. Extending Semantics & Accessibility Getinfo from article
  23. 23. Performance and Optimization Getinfo from article
  24. 24. CSS3Cascading Style Sheets
  25. 25. Agenda Syntax and code format AddingCSS to apage Floats Positions z-index Box Model Web fonts MediaQueries Flexbox Transitions Preprocessors -Introduction to Sass
  26. 26. Syntax selector{property:value;property:value;}
  27. 27. Syntax body{background:white;color:blue;}
  28. 28. Syntax body{ background:white; color:blue; }
  29. 29. Adding CSS to a page Inline <h1style="color:red;font-size:24px;">HelloWorld!</h1>
  30. 30. Adding CSS to a page Internal Stylesheet <head> <style> </style> </head> h1{ color:red; font-size:24px; }
  31. 31. Adding CSS to a page External Stylesheet <linkrel="stylesheet"href="css/styles.css">
  32. 32. Floats Demo
  33. 33. Positioning
  34. 34. Static Positioning
  35. 35. 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; }
  36. 36. Relative Positioning Arelative positioned elementis positioned relative to its normal position. h2{ position:relative; left:-20px; } h2{ position:relative; right:20px; }
  37. 37. Relative Positioning The contentof relativelypositioned elements can be moved and overlap other elements, butthe reserved space for the elementis stillpreserved in the normalflow. Demo
  38. 38. 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; }
  39. 39. 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.
  40. 40. 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:
  41. 41. 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.
  42. 42. Box Model The CSS box modelis essentiallyabox thatwraps around HTML elements, and itconsists of: margins, borders, padding, and the actualcontent. Demo & Code Example
  43. 43. Web Fonts
  44. 44. Media Queries @mediascreenand(max-width:300px){ body{ background-color:lightblue; } }
  45. 45. Sass(Syntactically Awesome Style Sheets) Introduction to Preprocessors
  46. 46. 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.
  47. 47. 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
  48. 48. Let's see Sass in action Live demo
  49. 49. Getting Started with Sass Installing Sass
  50. 50. Mac Sass requires Ruby geminstallsass
  51. 51. Windows InstallRubyInstaller first geminstallsass Go
  52. 52. Confirm Sass is up and running sass-v
  53. 53. Compass The awesome sauce!
  54. 54. What is Compass? Open Source CSS Authoring Framework Demo
  55. 55. Installing Compass geminstallcompass
  56. 56. Download slides: Download slides source code: Any questions?about.me/mario.hernandez @Designsdrive slideshare.net/marequi github.com/mariohernandez/html5-css3
  57. 57. 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>

×