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 Development 101: Html & CSS
Search
najam
October 11, 2013
Education
320
1
Share
Front-End Development 101: Html & CSS
introductory session for html & css given to moftak solutions team.
najam
October 11, 2013
More Decks by najam
See All by najam
twitter 101
najam
1
95
introduction to scrum
najam
1
70
mix11: knockout js
najam
1
130
frm08.pdf
najam
0
92
Other Decks in Education
See All in Education
Introduction - Lecture 1 - Advanced Topics in Big Data (4023256FNR)
signer
PRO
2
2.3k
PE array testbench data order (config)
songchch
0
590
Modelamiento Matematico (Ingresantes UNI 2026)
robintux
0
260
小学校5,6年生向けキャリア教育 大人になるまでの道
sat
PRO
8
3.5k
Fulbright DAI 2025 學人經驗分享
joannie
0
740
Science Tokyo国際卓越研究大学計画_202604
sciencetokyo
PRO
0
600
地区危機管理委員会 出前セミナー「ロータリーにおける危機管理」:膳所 和彦 氏(国際ロータリー第2720地区 パストガバナー・日田ロータリークラブ・医療法人恒心会ぜぜ医院 理事長):2720 Japan O.K. ロータリーEクラブ2026年2月16日卓話
2720japanoke
1
620
良い塩梅を実現する、AWSネットワーク3分クッキング
masakiokuda
1
220
Data Presentation - Lecture 5 - Information Visualisation (4019538FNR)
signer
PRO
1
3k
【ベテランCTOからのメッセージ】AIとか組織とかキャリアとか気になることはあるけどさ、個人の技術力から目を背けないでやっていきましょうよ
netmarkjp
2
4.2k
Introduction - Lecture 1 - Next Generation User Interfaces (4018166FNR)
signer
PRO
2
4.6k
Flinga
matleenalaakso
4
15k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
128
17k
Speed Design
sergeychernyshev
33
1.6k
GitHub's CSS Performance
jonrohan
1032
470k
Unsuck your backbone
ammeep
672
58k
For a Future-Friendly Web
brad_frost
183
10k
How GitHub (no longer) Works
holman
316
150k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
199
73k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Faster Mobile Websites
deanohume
310
31k
Odyssey Design
rkendrick25
PRO
2
560
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
310
Transcript
Front-End Development 101 HTML & CSS Najam Sikander Awan
@najamsikander
Examples and Discussion Examples on github http://bit.ly/GGolFl
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
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
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
In-Line Elements
Block Level Elements
Inline-Block Elements
Assignment Create your cv in Html One column
layout Doc type strict IE 6 to all modern browsers Choose tags carefully
Styles
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 https://media.geeksforgeeks.org/wp-content/uploads/ 20211029142813/20211029142357.gif
Relative
Absolute
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/