Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-End Development 101: Html & CSS

Avatar for najam najam
October 11, 2013
Education
1
320

Front-End Development 101: Html & CSS

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

Avatar for najam

najam

October 11, 2013
Tweet

More Decks by najam

See All by najam
twitter 101
Avatar for najam najam
1
89
introduction to scrum
Avatar for najam najam
1
67
mix11: knockout js
Avatar for najam najam
1
120
frm08.pdf
Avatar for najam najam
0
87

Other Decks in Education

See All in Education
Avoin jakaminen ja Creative Commons -lisenssit
Avatar for Matleena Laakso matleenalaakso
0
2k
2025年度春学期　統計学　第14回　分布についての仮説を検証する ー 仮説検定（１） (2025. 7. 10)
Avatar for Akira Asano akiraasano
PRO
0
160
2024-2025 CBT top items
Avatar for cbtlibrary cbtlibrary
0
130
Online Privacy
Avatar for Takahito Sakamoto takahitosakamoto
1
120
生成AIとの付き合い方 / Generative AI and us
Avatar for kaityo256 kaityo256
PRO
10
1.7k
生態系ウォーズ　- ルールブック
Avatar for yui itoshima yui_itoshima
1
290
ÉTICA, INCLUSIÓN, EDUCACIÓN INTEGRAL Y NEURODERECHOS EN EL CONTEXTO DEL NEUROMANAGEMENT
Avatar for José Vicente Pérez Cubias jvpcubias
0
120
とある長岡高専卒のおっさんがIT企業のマネージャーになるまで / journey-from-nagaoka-kosen-grad-to-it-manager
Avatar for TAKANO Sho / @masaru_b_cl masaru_b_cl
0
120
RSJ2025 ランチョンセミナー 一歩ずつ世界へ：学生・若手研究者のための等身大の国際化の始め方
Avatar for Tetsunari Inamura t_inamura
0
310
みんなのコード 2024年度活動報告書/ 2025年度活動計画書
Avatar for みんなのコード codeforeveryone
0
350
探査機自作ゼミ2025スライド
Avatar for sksat sksat
3
820
今までのやり方でやってみよう！？~今までのやり方でやってみよう！？~
Avatar for kanami- kanamitsu
0
190

Featured

See All Featured
Visualization
Avatar for Eitan Lees eitanlees
149
16k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
35
6.1k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.7k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
980

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
  4. None

  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; }
  28. None

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

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

  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/