Web Design Bootcamp

day 01
with Aslam Najeebdeen
About me
Aslam Najeebdeen
@aslamnd
Why I’m here today?
Help people
Make friends
Have Fun
Agenda
•

HTML 5

•

CSS 3

•

CSS Frameworks

•

SASS & Compass
HTML 5
What is hTML 5?

Not revolution it’s an evolution
WHY HTML5?
•

Backword compatibility

•

Error parsing
New Features
•

Semantic elements and attributes

•

Support for audio and video

•

Reduce the need of 3rd party plugins
...
.”

“

HTML5 is a brand

– Michael Mahemoff, Software as She Developed
what isn’t HTML5?
•

Web Sockets

•

Geolocations

•

SVG

•

CSS3 transitions

•

CSS @font-face
“

If you think something is
HTML5, it probably isn't. Don't
worry though, even the W3C is
confused.
@whathtml5isnot
Demo
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>
<%= yield %>

<h1>H...
New Structural
<tags>
Section tag
<section></section>
“The section element represent a generic section of a
document or application. A section, ...
Article tag
<article></article>
“The article element represents a self-contained
composition in a document, page, applicat...
aside tag
<aside></aside>
Represents a section of a page that consists of content
that is tangentially related to the cont...
Aside tag
!
!

<article>

<aside>

<aside>
header tag
<header></header>
Represents a a group of introductory or navigational
aids. A header element is intended to us...
header tag
<header>

<header>
!
!

<article>
<aside>
<header>
!
!

<article>
Hgroup tag
<hgroup></hgroup>
Represents the heading of a section. This element is
used to group a set of h1-h6 elements wh...
footer tag
<footer></footer>
“Represents a footer for it’s nearest ancestor sectioning
content or sectioning root element....
Footer tag
<header>
<header>
<article>
<footer>
<aside>
<header>
<article>
<footer>
<footer>
Nav tag
<nav></nav>
“Represents a section of a page that links to other pages
or to parts within the page: a section with ...
Other NEW
<tags>
content tags
<video>
<audio>
<figure>
<embed>
<canvas>
Application focus tags
<meter>
<time>
<progress>
<details>
<command>
<menu>
Deprecated
<tags>
presentational tags
<basefont>
<big>
<center>
<font>
<s>
<strike>
<tt>
<u>
Accessibility concerns
<frame>
<frameset>
<noframe>
Out of date tags
<dir>
<applet>
<acronym>
<isindex>
CSS
declaration
selector

property

value

h1 { font-size: 3.2em; }
CSS Rule
•

Selectors - http://goo.gl/ZdvQj

•

Properties and values: http://goo.gl/
wzNdc
Units
Units
px

pixels

vw

viewport width

em

ems

vh

viewport height

rem

root ems

vmin

viewport minimum

ex

exes

vmax
...
ems

1em

100% default browser font size = 16px
A relative unit of measurement
calculating ems
target size / default size = # of ems

20px = 20 / 16 = 1.25em
ems
h1{
font-size: 2em;
padding-bottom: 1em;
background: red;
}

2em = 2 x base font size (16px) = 32px
1em = 2 x font siz...
Better way to calculate ems?
What if we can make the base font size to 10px?

10/16 = .625em
why rem (root ems)?
<div class=“featured”>
<h1>Hello World</h1>
</div>
.featured {
font-size: 2em;
}

2em = 2 x base font ...
viewport measurements
http://goo.gl/Vxm7J
Understanding
the Box model
Box model
margin
padding

The CSS box model describes the rectangular boxes that
are generated for elements in the documen...
Resolving
Conflicts
“

If you have lot’s of !important in
your stylesheet, you are doing
it wrong!
– Author Unknown
Things you should master
Cascade
Inheritance
Specificity
Cascade

•

Last style applies
wins

demo
Inheritance
•

Child always wins

•

Organize the basic
and default styles
for top level
elements

demo
Specificity
selector

Inline

ID

class

elements

specificity

body

0

0

0

1

1

div p

0

0

0

2

2

.author

0

0

...
Specificity

•

Keep specificity as
low as possible

demo
General rules of thumb

Avoid local and inline styles
Colors
hexadecimal

#FFFF00
#FF0
demo
RGB
rgb(255,23,54)
rgb(90%,10%,30%)

demo
hsl
hsl(0-360,%,%)

demo
Tools
•

Adobe Kuler - http://kuler.adobe.com

•

ColorSchemer Studio (Mac/Windows)

•

ColorSnapper (Mac)

•

Alfred Colo...
Cross browser issues

•

Avoid Hacks as much as possible

•

Use conditional comments
Meet Modernizr

demo
CSS Frameworks

demo
CSS Reset

•

Eric Mayer’s reset

•

YUI Reset

•

Normalize

demo
“

I don’t want to take styles effects for granted[…] It
makes me think just that little bit harder about the
semantics of...
Please don’t do this!
* {
margin: 0;
padding: 0;
}
CSS GRIDS
DEMO

demo
Sass & Compass

demo
keep in touch
Twitter: @aslamnd
Facebook: /aslamnajeebdeen
Email: aslamnajeem@gmail.com
Blog: http://aslamnajeebdeen.com

...
Web Design Bootcamp - Day1
Upcoming SlideShare
Loading in...5
×

Web Design Bootcamp - Day1

197

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
197
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Design Bootcamp - Day1

  1. 1. Web Design Bootcamp day 01 with Aslam Najeebdeen
  2. 2. About me Aslam Najeebdeen @aslamnd
  3. 3. Why I’m here today? Help people Make friends Have Fun
  4. 4. Agenda • HTML 5 • CSS 3 • CSS Frameworks • SASS & Compass
  5. 5. HTML 5
  6. 6. What is hTML 5? Not revolution it’s an evolution
  7. 7. WHY HTML5? • Backword compatibility • Error parsing
  8. 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. 9. .” “ HTML5 is a brand – Michael Mahemoff, Software as She Developed
  10. 10. what isn’t HTML5? • Web Sockets • Geolocations • SVG • CSS3 transitions • CSS @font-face
  11. 11. “ If you think something is HTML5, it probably isn't. Don't worry though, even the W3C is confused. @whathtml5isnot
  12. 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
  13. 13. New Structural <tags>
  14. 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. 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. 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
  17. 17. Aside tag ! ! <article> <aside> <aside>
  18. 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
  19. 19. header tag <header> <header> ! ! <article> <aside> <header> ! ! <article>
  20. 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. 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
  22. 22. Footer tag <header> <header> <article> <footer> <aside> <header> <article> <footer> <footer>
  23. 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. 24. Other NEW <tags>
  25. 25. content tags <video> <audio> <figure> <embed> <canvas>
  26. 26. Application focus tags <meter> <time> <progress> <details> <command> <menu>
  27. 27. Deprecated <tags>
  28. 28. presentational tags <basefont> <big> <center> <font> <s> <strike> <tt> <u>
  29. 29. Accessibility concerns <frame> <frameset> <noframe>
  30. 30. Out of date tags <dir> <applet> <acronym> <isindex>
  31. 31. CSS
  32. 32. declaration selector property value h1 { font-size: 3.2em; } CSS Rule
  33. 33. • Selectors - http://goo.gl/ZdvQj • Properties and values: http://goo.gl/ wzNdc
  34. 34. Units
  35. 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. 36. ems 1em 100% default browser font size = 16px A relative unit of measurement
  37. 37. calculating ems target size / default size = # of ems 20px = 20 / 16 = 1.25em
  38. 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. 39. Better way to calculate ems? What if we can make the base font size to 10px? 10/16 = .625em
  40. 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
  41. 41. viewport measurements http://goo.gl/Vxm7J
  42. 42. Understanding the Box model
  43. 43. 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
  44. 44. Resolving Conflicts
  45. 45. “ If you have lot’s of !important in your stylesheet, you are doing it wrong! – Author Unknown
  46. 46. Things you should master Cascade Inheritance Specificity
  47. 47. Cascade • Last style applies wins demo
  48. 48. Inheritance • Child always wins • Organize the basic and default styles for top level elements demo
  49. 49. Specificity selector Inline ID class elements specificity body 0 0 0 1 1 div p 0 0 0 2 2 .author 0 0 1 0 10 #container 0 1 0 0 100 #featured div 0 1 0 1 101 <div style=“background: red;”> 1 0 0 0 1000 demo
  50. 50. Specificity • Keep specificity as low as possible demo
  51. 51. General rules of thumb Avoid local and inline styles
  52. 52. Colors
  53. 53. hexadecimal #FFFF00 #FF0 demo
  54. 54. RGB rgb(255,23,54) rgb(90%,10%,30%) demo
  55. 55. hsl hsl(0-360,%,%) demo
  56. 56. Tools • Adobe Kuler - http://kuler.adobe.com • ColorSchemer Studio (Mac/Windows) • ColorSnapper (Mac) • Alfred Color plugin
  57. 57. Cross browser issues • Avoid Hacks as much as possible • Use conditional comments
  58. 58. Meet Modernizr demo
  59. 59. CSS Frameworks demo
  60. 60. CSS Reset • Eric Mayer’s reset • YUI Reset • Normalize demo
  61. 61. “ 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
  62. 62. Please don’t do this! * { margin: 0; padding: 0; }
  63. 63. CSS GRIDS
  64. 64. DEMO demo
  65. 65. Sass & Compass demo
  66. 66. keep in touch Twitter: @aslamnd Facebook: /aslamnajeebdeen Email: aslamnajeem@gmail.com Blog: http://aslamnajeebdeen.com
 

  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×