front-end 101

Front-End Development 101 HTML & CSS Najam Sikander Awan @najamsikander
Khurram Raftaz @Khurramraftaz codebarpk.com

Examples and Discussion  Examples on github  http://bit.ly/GGolFl 
ChatRoom  https://gitter.im/codebarpak/frontend

Agenda  History  For Whom  Students  Back-end
Devs  Front-end Devs without basics  Why  Html will stay and expand  Easy to start  HTML /CSS  Future  Desktop Development  Mobile Development

1989 1990 1991 Berners-Lee

Evolution Of Web  http://www.evolutionoftheweb.com/?hl=en- gb#/evolution/day

 Content/Data: html  Presentation: CSS  Behavior: Javascript

Anatomy Of A Web Page

Bad Tags  B big center font i small strike
u

Doc Types  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">  http://www.w3.org/QA/2002/04/valid-dtd-list.html demo

Minimum Tools for Development  Text Editor  Browser 
Web developer toolbar  Firebug / chrome dev tools / IE dev tools  JsFiddle  Cross Browser Testing  IE Tester [IE6+]  Chrome  Firefox  Opera  Safari

Semantics  Elements  Inline Elements  Block Level Elements
 Inline-Block Elements  Attributes

Validation  Valid Html  Valid CSS

Assignment  Create your cv in Html  One column
layout  Doc type strict  IE 6 to all modern browsers  Choose tags carefully

Adding Style  In-line  External  <link rel="stylesheet" type="text/css"
href="/css/styles.css" />  @import url('/css/styles.css');  In-Page  Browser styles  User styles

Selectors  Group  Class  Id  Pseudo-Classes 
A:visited, A:hover  Pseudo-Elements  Content on fly  Clearing float  p:first-line  CSS3 Selectors

Universal selector * { }

Element type selector body { }

Class selector .copy { }

Id selector #copy { }

Attribute selector Input [type=“submit”]{ }

Group Selector h1, .h1{ Font-size:60px; }

Combinations Li a img{ margin: 0 10px 0 10px; }
Li > a{ margin: 0 10px 0 10px; } ul + p{ background: yellow; }

Pseudo - Classes tr:first-child { color:black; } li:first-child { margin:
0; }

Pseudo - Elements p:first-letter { font-size: 40px; } p:first-line {
color: green; }

Browser Styles  Browser default style sheets  User Style
sheets – firefox plugin  CSS Reset  Box Model

Box-sizing:  Content box  Padding box  Margin box
 Border box demo

CSS: Typography  Color of page elements  Color for
links  Font styling  Family  Color  Size  Line height  Letter spacing  Word spacing demo

CSS: Background Images  Specify background  Background positions 
Background repeat  Fixed or Scroll demo

Floats

 http://www.yuiblog.com/blog/2010/09/27/clearfix -reloaded-overflowhidden-demystified demo

Display  Inline  Block  Inline-block

Positioning  Fixed  Relative  Absolute  Static 
Z-index demo

Relative

Absolute

@stubbornella @jeresig @shanselman @addyosmani @elijahmanor @paul_irish @rmurphey @robconery @SlexAxton

Resources  http://net.tutsplus.com/  http://alistapart.com/  http://www.smashingmagazine.com/  http://css-tricks.com/ 
http://css-weekly.com/  http://html5weekly.com/  http://diveintohtml5.info/  http://www.html5rocks.com/en/

front-end 101

front-end 101

More Decks by codebar

Other Decks in Education

Featured

Transcript