front-end 101

B8e2d1d94c037353bb66c18ffaf9ef96?s=47 codebar
July 29, 2016
Education
0
250

front-end 101

introduction course for front-end development.

B8e2d1d94c037353bb66c18ffaf9ef96?s=128

codebar

July 29, 2016
Tweet

More Decks by codebar

See All by codebar
B8e2d1d94c037353bb66c18ffaf9ef96?s=48 codebar
0
16
B8e2d1d94c037353bb66c18ffaf9ef96?s=48 codebar
0
170
B8e2d1d94c037353bb66c18ffaf9ef96?s=48 codebar
0
63
B8e2d1d94c037353bb66c18ffaf9ef96?s=48 codebar
0
25
B8e2d1d94c037353bb66c18ffaf9ef96?s=48 codebar
0
250

Other Decks in Education

See All in Education
08d84a320a8128f6e0b00b27c201530f?s=48 yasslab
2
250k
08c43eecaeb20bad17d63e0e6964d9c2?s=48 ichimichi
1
320
87fc3bdce2d159ffd880d37e4e631b9f?s=48 ayanaru512
0
210
3d1d32a0804d1f5a5adfa62c0fc89c6a?s=48 ttak0422
0
320
21c2e17b9d4b34aafa4b2722d23dd4d3?s=48 todayuya
0
150
1135dc242dcff3b90ae46fc586ff4da8?s=48 signer
1
290
1135dc242dcff3b90ae46fc586ff4da8?s=48 signer
0
280
18cdb6f294c8cb10a46167e462c2a51f?s=48 matleenalaakso
1
8.7k
1135dc242dcff3b90ae46fc586ff4da8?s=48 signer
0
200
B9ade6772136154da028ffd0a006eb8f?s=48 antoinephi
0
190
1fc515e62713ddd330d767eda5c09e91?s=48 fukudakz
0
110
1e708b2afb8622d5c5f070a94a3425a9?s=48 tibbelit
0
110

Featured

See All Featured
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
116
4.8k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
7
480
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
337
16k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
12k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
52
4k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
683
180k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
146
19k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
317
18k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
436
28k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
327
35k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
346
20k

Transcript

  1. Front-End Development 101 HTML & CSS Najam Sikander Awan @najamsikander

    Khurram Raftaz @Khurramraftaz codebarpk.com

  2. Examples and Discussion  Examples on github  http://bit.ly/GGolFl 

    ChatRoom  https://gitter.im/codebarpak/frontend

  3. 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

  4. 1989 1990 1991 Berners-Lee

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

  6. None

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

  8. Anatomy Of A Web Page

  9. Bad Tags  B big center font i small strike

    u

  10. 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

  11. 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

  12. Semantics  Elements  Inline Elements  Block Level Elements

     Inline-Block Elements  Attributes

  13. Validation  Valid Html  Valid CSS

  14. None
  15. None
  16. None

  17. Assignment  Create your cv in Html  One column

    layout  Doc type strict  IE 6 to all modern browsers  Choose tags carefully
  18. None

  19. 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

  20. Selectors  Group  Class  Id  Pseudo-Classes 

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

  21. Universal selector * { }

  22. Element type selector body { }

  23. Class selector .copy { }

  24. Id selector #copy { }

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

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

  27. Combinations Li a img{ margin: 0 10px 0 10px; }

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

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

    0; }

  29. Pseudo - Elements p:first-letter { font-size: 40px; } p:first-line {

    color: green; }
  30. None

  31. Browser Styles  Browser default style sheets  User Style

    sheets – firefox plugin  CSS Reset  Box Model
  32. None

  33. Box-sizing:  Content box  Padding box  Margin box

     Border box demo

  34. CSS: Typography  Color of page elements  Color for

    links  Font styling  Family  Color  Size  Line height  Letter spacing  Word spacing demo

  35. CSS: Background Images  Specify background  Background positions 

    Background repeat  Fixed or Scroll demo

  36. Floats

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

  38. Display  Inline  Block  Inline-block

  39. Positioning  Fixed  Relative  Absolute  Static 

    Z-index demo

  40. Fixed

  41. Relative

  42. Absolute

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

  44. 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/
  45. None