HTML5 and CSS3
1 like617 views
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.
HTML5 and CSS3
- 2. CourseAgenda 1. HTML5 2. CSS3 3. Feature Supportand Polyfills 4. Resources
- 3. AboutMe I am Web Designer and Themer forDrupal Mediacurrent
- 4. Experience Worked for the FederalGovernmentas lead Front-end Developer
- 5. NoticebleProjects 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. PublicSpeaker I conductcommunity-driven and private workshops DrupalCamp Los Angeles CodeCamp Los Angeles &San Diego San Diego .NetUser Group Meetups througoutLos Angeles
- 7. HTML5 HyperTextMarkupLanguage Progressive Enhancements and GracefulDegradation Its official! Block LevelElements vs. Inline LevelElements Forms and Form Elements Audio &Video Picture ExtendingSemantics &Accessibility Performance and Optimization
- 8. CSS3Syntax AddingCSS to apage Floats Positioning Box Model Web fonts MediaQueries Preprocessors -Introduction to Sass
- 18. Audio&Video Demo
- 19. Picture
- 20. How<picture>works <picture> <sourcesrcset="mobile.png"> <sourcemedia="(min-width:480px)"srcset="tablet.png"> <sourcemedia="(min-width:960px)"srcset="desktop.png"> <imgsrc=/slideshow/html5-css3-43410756/43410756/"default.png"alt="Alternatetextisaddedinimgtag"> </picture> View article for description Another greatarticle
- 25. Agenda Syntax and code format AddingCSS to apage Floats Positions z-index Box Model Web fonts MediaQueries Flexbox Transitions Preprocessors -Introduction to Sass
- 30. AddingCSStoapage InternalStylesheet <head> <style> </style> </head> h1{ color:red; font-size:24px; }
- 32. Floats Demo
- 33. Positioning
- 35. FixedPositioning 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. RelativePositioning Arelative positioned elementis positioned relative to its normal position. h2{ position:relative; left:-20px; } h2{ position:relative; right:20px; }
- 37. RelativePositioning The contentof relativelypositioned elements can be moved and overlap other elements, butthe reserved space for the elementis stillpreserved in the normalflow. Demo
- 38. AbsolutePositioning 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. AbsolutePositioning 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. OverlappingElements 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. 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. BoxModel The CSS box modelis essentiallyabox thatwraps around HTML elements, and itconsists of: margins, borders, padding, and the actualcontent. Demo & Code Example
- 43. 安艶恢油酷看稼岳壊
- 46. WhatisSass? 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. FeaturesofSass FullyCSS3-compatible Language extensions such as variables, nesting, and mixins Manyusefulfunctions for manipulating Well-formatted, customizable output For more visitsass-lang.com
- 56. Download slides: Download slides source code: Anyquestions?about.me/mario.hernandez @Designsdrive slideshare.net/marequi github.com/mariohernandez/html5-css3