web design bootcamp - day1
TRANSCRIPT
Web Design Bootcamp
with Aslam Najeebdeen
day 01
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
• Detailed algorithms for parsing errors
• Built in APIs to help web application
“– Michael Mahemoff, Software as She Developed
HTML5 is a brand .”
what isn’t HTML5?
• Web Sockets
• Geolocations
• SVG
• CSS3 transitions
• CSS @font-face
“@whathtml5isnot
If you think something is HTML5, it probably isn't. Don't worry though, even the W3C is
confused.
Demo
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title></head><body>
</body> </html>
index.html
<h1>Hello World</h1>
index.html.erblayout.erb
<%= yield %>
New Structural <tags>
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
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
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
Aside tag
<aside>
!!
<article>
<aside>
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
header tag
<aside>
!!
<article>
<header>
<header>
!!
<article>
<header>
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.
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
Footer tag
<aside>
<article>
<header>
<header>
<article>
<header>
<footer>
<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 navigation
links.”
Note: only to be used in major navigation block.
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
h1 { font-size: 3.2em; }
selector property value
declaration
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 viewport maximum
gd grids ch character
ems
100% default browser font size = 16px
1em
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
demo
1em = 2 x font size (32px) = 32px
Better way to calculate ems?
What if we can make the base font size to 10px?
10/16 = .625em
why rem (root ems)?
demo
<div class=“featured”> <h1>Hello World</h1> </div>
.featured { font-size: 2em; } !.featured h1 { font-size: 2em; } !.featured h1 { font-size: 2rem; }
2em = 2 x base font size (16px) = 32px
2em = 2 x font size (32px) = 64px
2em = 2 x base font size (16px) = 32px
http://goo.gl/85fhM
Understanding the Box model
margin
padding
Box model
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.
demo
600px
700px
Resolving Conflicts
“– Author Unknown
If you have lot’s of !important in your stylesheet, you are doing
it wrong!
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 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
Specificity
• Keep specificity as low as possible
demo
General rules of thumb
Avoid local and inline styles
Colors
#FFFF00
hexadecimal
#FF0
demo
rgb(255,23,54)
RGB
rgb(90%,10%,30%)
demo
hsl(0-360,%,%)
hsl
demo
Tools
• Adobe Kuler - http://kuler.adobe.com
• ColorSchemer Studio (Mac/Windows)
• ColorSnapper (Mac)
• Alfred Color plugin
Cross browser issues
• Avoid Hacks as much as possible
• Use conditional comments
Meet Modernizr
demo
CSS Frameworks
demo
CSS Reset
demo
• Eric Mayer’s reset
• YUI Reset
• Normalize
“– Eric Meyer, Reset Reasoning
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
Please don’t do this!
* { margin: 0; padding: 0; }
CSS GRIDS
DEMO
demo
Sass & Compass
demo
keep in touch
Twitter: @aslamnd
Facebook: /aslamnajeebdeen
Email: [email protected]
Blog: http://aslamnajeebdeen.com