Web Design Bootcamp - Day1
0 likes462 views
This document provides a summary of a one day web design bootcamp. The agenda includes an introduction to HTML5, CSS3, CSS frameworks, and SASS & Compass. In the HTML5 section, the document defines new HTML5 elements and features. It also discusses CSS units, selectors, properties, inheritance, specificity, and techniques for resolving conflicts. The CSS frameworks section demonstrates CSS resets and grids. The document concludes with an overview of SASS and Compass.
![“
I don’t want to take styles effects for granted[…] It
makes me think just that little bit harder about the
semantics of my document. With the reset in place, I
don’t pick strong because the design call for
boldfacing. Instead, I pick the right element whether
it’s strong or em or b or h3 or whatever - and then
style it as needed
– Eric Meyer, Reset Reasoning](https://image.slidesharecdn.com/web-design-bootcamp-day-01-131202022043-phpapp02/85/Web-Design-Bootcamp-Day1-62-320.jpg)
Web Design Bootcamp - Day1
- 1. Web Design Bootcamp day 01 with Aslam Najeebdeen
- 3. Why I’m here today? Help people Make friends Have Fun
- 4. Agenda • HTML 5 • CSS 3 • CSS Frameworks • SASS & Compass
- 5. HTML 5
- 6. What is hTML 5? Not revolution it’s an evolution
- 7. WHY HTML5? • Backword compatibility • Error parsing
- 8. New Features • Semantic elements and attributes • Support for audio and video • Reduce the need of 3rd party plugins • Detailed algorithms for parsing errors • Built in APIs to help web application
- 9. .” “ HTML5 is a brand – Michael Mahemoff, Software as She Developed
- 10. what isn’t HTML5? • Web Sockets • Geolocations • SVG • CSS3 transitions • CSS @font-face
- 11. “ If you think something is HTML5, it probably isn't. Don't worry though, even the W3C is confused. @whathtml5isnot
- 12. Demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <%= yield %> <h1>Hello World</h1> </body> </html> layout.erb index.html index.html.erb
- 14. Section tag <section></section> “The section element represent a generic section of a document or application. A section, in this context, is a thematic groups of content, typically with a heading…” <section> tag is not a replacement for <div> tag
- 15. Article tag <article></article> “The article element represents a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, in syndication e.g: a blog entry, newspaper article, forum post, blog comments or any other independent item of content
- 16. aside tag <aside></aside> Represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. e.g: sidebar content, polls, quotes, relation navigations
- 18. header tag <header></header> Represents a a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1 - h6 element or an hgroup element), but this not required. The header element can also be used to wrap a section’s table of contents, a search form or any relevant logos.” Note: a document can contain multiple headers
- 20. Hgroup tag <hgroup></hgroup> Represents the heading of a section. This element is used to group a set of h1-h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or tag lines.
- 21. footer tag <footer></footer> “Represents a footer for it’s nearest ancestor sectioning content or sectioning root element. Typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like” Note: a document can contain multiple footers
- 23. Nav tag <nav></nav> “Represents a section of a page that links to other pages or to parts within the page: a section with navigation links.” Note: only to be used in major navigation block.
- 24. Other NEW <tags>
- 30. Out of date tags <dir> <applet> <acronym> <isindex>
- 31. CSS
- 32. declaration selector property value h1 { font-size: 3.2em; } CSS Rule
- 33. • Selectors - http://goo.gl/ZdvQj • Properties and values: http://goo.gl/ wzNdc
- 34. Units
- 35. Units px pixels vw viewport width em ems vh viewport height rem root ems vmin viewport minimum ex exes vmax viewport maximum gd grids ch character
- 36. ems 1em 100% default browser font size = 16px A relative unit of measurement
- 37. calculating ems target size / default size = # of ems 20px = 20 / 16 = 1.25em
- 38. ems h1{ font-size: 2em; padding-bottom: 1em; background: red; } 2em = 2 x base font size (16px) = 32px 1em = 2 x font size (32px) = 32px demo
- 39. Better way to calculate ems? What if we can make the base font size to 10px? 10/16 = .625em
- 40. why rem (root ems)? <div class=“featured”> <h1>Hello World</h1> </div> .featured { font-size: 2em; } 2em = 2 x base font size (16px) = 32px ! .featured h1 { font-size: 2em; } 2em = 2 x font size (32px) = 64px ! .featured h1 { font-size: 2rem; } 2em = 2 x base font size (16px) = 32px http://goo.gl/85fhM demo
- 44. Box model margin padding The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. 600px 700px demo
- 46. “ If you have lot’s of !important in your stylesheet, you are doing it wrong! – Author Unknown
- 47. Things you should master Cascade Inheritance Specificity
- 49. Inheritance • Child always wins • Organize the basic and default styles for top level elements demo
- 51. Specificity • Keep specificity as low as possible demo
- 52. General rules of thumb Avoid local and inline styles
- 53. Colors
- 57. Tools • Adobe Kuler - http://kuler.adobe.com • ColorSchemer Studio (Mac/Windows) • ColorSnapper (Mac) • Alfred Color plugin
- 58. Cross browser issues • Avoid Hacks as much as possible • Use conditional comments
- 61. CSS Reset • Eric Mayer’s reset • YUI Reset • Normalize demo
- 62. “ I don’t want to take styles effects for granted[…] It makes me think just that little bit harder about the semantics of my document. With the reset in place, I don’t pick strong because the design call for boldfacing. Instead, I pick the right element whether it’s strong or em or b or h3 or whatever - and then style it as needed – Eric Meyer, Reset Reasoning
- 63. Please don’t do this! * { margin: 0; padding: 0; }
- 64. CSS GRIDS
- 65. DEMO demo
- 67. keep in touch Twitter: @aslamnd Facebook: /aslamnajeebdeen Email: [email protected] Blog: http://aslamnajeebdeen.com