Front-End Development 101: Html & CSS

introductory session for html & css given to moftak solutions team.

Transcript

1. Front-End Development 101 
 HTML & CSS Najam Sikander Awan 
 @najamsikander
2. Examples and Discussion  Examples on github  http://bit.ly/GGolFl
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
5.  Content/Data: html  Presentation: CSS  Behavior: Javascript
6. Anatomy Of A Web Page
7. Bad Tags  B big center font i small strike u
8. 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
9. Minimum Tools for Development  Text Editor  Browser  Cross Browser Testing  IE Tester [IE6+]  Chrome  Firefox  Opera  Safari
10. Semantics  Elements  Inline Elements  Block Level Elements  Inline-Block Elements  Attributes
11. Validation  Valid Html  Valid CSS
12. In-Line Elements
13. Block Level Elements
14. Inline-Block Elements
15. Assignment  Create your cv in Html  One column layout  Doc type strict  IE 6 to all modern browsers  Choose tags carefully
16. Styles
17. 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
18. Selectors  Group  Class  Id  Pseudo-Classes  A:visited, A:hover  Pseudo-Elements  Content on fly  Clearing float  p:first-line  CSS3 Selectors
19. Universal selector * { }
20. Element type selector body { }
21. Class selector .copy { }
22. Id selector #copy { }
23. Attribute selector Input [type=“submit”]{ }
24. Group Selector h1, .h1{ Font-size:60px; }
25. Combinations Li a img{ margin: 0 10px 0 10px; } Li > a{ margin: 0 10px 0 10px; } ul + p{ background: yellow; }
26. Pseudo - Classes tr:first-child { color:black; } li:first-child { margin: 0; }
27. Pseudo - Elements p:first-letter { font-size: 40px; } p:first-line { color: green; }
29. Browser Styles  Browser default style sheets  User Style sheets – firefox plugin  CSS Reset  Box Model
31. Box-sizing:  Content box  Padding box  Margin box  Border box demo
32. CSS: Typography  Color of page elements  Color for links  Font styling  Family  Color  Size  Line height  Letter spacing  Word spacing demo
33. CSS: Background Images  Specify background  Background positions  Background repeat  Fixed or Scroll demo
34. Floats
35.  http://www.yuiblog.com/blog/2010/09/27/clearfix- reloaded-overflowhidden-demystified demo
36. Display  Inline  Block  Inline-block
37. Positioning  Fixed  Relative  Absolute  Static  Z-index demo
38. Fixed https://media.geeksforgeeks.org/wp-content/uploads/ 20211029142813/20211029142357.gif
39. Relative
40. Absolute
41. 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/