Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
front-end 101
Search
codebar
July 29, 2016
Education
0
290
front-end 101
introduction course for front-end development.
codebar
July 29, 2016
Tweet
Share
More Decks by codebar
See All by codebar
wordpress talk
codebar
0
29
AngularJS Fundamentals
codebar
0
180
Getting Started With Git
codebar
0
73
Codebar pitch in JumpstartPakistan
codebar
0
49
CodeBar Launch
codebar
0
270
Other Decks in Education
See All in Education
技術勉強会 〜 OAuth & OIDC 入門編 / 20250528 OAuth and OIDC
oidfj
5
1.8k
Transición del Management al Neuromanagement
jvpcubias
0
210
生成AI活用セミナー/GAI-workshop
gnutar
0
110
OpenSourceSummitJapanを運営してみた話
kujiraitakahiro
0
790
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
5
1.2k
情報科学類で学べる専門科目38選
momeemt
0
590
20250910_エンジニアの成長は自覚するところから_サポーターズ勉強会
ippei0923
0
230
社外コミュニティの歩き方
masakiokuda
2
190
マネジメント「される側」 こそ覚悟を決めろ
nao_randd
9
5.5k
2025年度春学期 統計学 第11回 分布の「型」を考える ー 確率分布モデルと正規分布 (2025. 6. 19)
akiraasano
PRO
0
170
核燃料政策を問う─英国の決断と日本
hide2kano
0
180
相互コミュニケーションの難しさ
masakiokuda
0
220
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.8k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Documentation Writing (for coders)
carmenintech
74
5k
Practical Orchestrator
shlominoach
190
11k
Writing Fast Ruby
sferik
628
62k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Designing for humans not robots
tammielis
253
25k
KATA
mclloyd
32
14k
Fireside Chat
paigeccino
39
3.6k
Embracing the Ebb and Flow
colly
87
4.8k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Code Reviewing Like a Champion
maltzj
525
40k
Transcript
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
None
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
None
None
None
Assignment Create your cv in Html One column
layout Doc type strict IE 6 to all modern browsers Choose tags carefully
None
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; }
None
Browser Styles Browser default style sheets User Style
sheets – firefox plugin CSS Reset Box Model
None
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
Fixed
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/
None