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
330
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
100
introduction to scrum
najam
1
76
mix11: knockout js
najam
1
130
frm08.pdf
najam
0
97
Other Decks in Education
See All in Education
[2026前期火5] 論理学(京都大学文学部 前期 第13回)「走って、止まって、積み上がる」
yatabe
0
180
エビデンスベースト英語教育入門:エビデンスは科学的知見(だけ)ではない,制度だ!
terasawat
0
160
遊ぶかね欲しさの犯行(ルビ:労働)です
shirayanagiryuji
0
230
[2026前期火5] 論理学(京都大学文学部 前期 第8回)「正規化定理の証明」
yatabe
0
290
輻射安全管理系統2.0暨輻防e++學園平台說明會
aecrp
0
1.9k
私たちはなんでテストするんだっけ? Ver.東北IT物産展2026 in 会津若松
camel_404
3
170
チームの鏡になるー自分の癖を知ると、チームのパターンが見えてくる@スクフェス仙台
saorimurooka
0
140
Gitがない時代 インターネットがない時代の 開発話
sapi_kawahara
0
370
「答えを出す」より「わかる」をつくる
kzkmaeda
1
270
批判的応用言語学ワークショップ(2026-08-12 お茶の⽔⼥⼦⼤学)
terasawat
0
160
0513
cbtlibrary
0
270
Throw Yourself In! - How I've learned English and What I'm Facing
georgeorge
1
230
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
Darren the Foodie - Storyboard
khoart
PRO
3
3.7k
Google's AI Overviews - The New Search
badams
0
1.1k
What's in a price? How to price your products and services
michaelherold
247
13k
KATA
mclloyd
PRO
35
15k
It's Worth the Effort
3n
188
29k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
220
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
350
エンジニアに許された特別な時間の終わり
watany
108
250k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
900
ラッコキーワード サービス紹介資料
rakko
1
4.5M
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.6k
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/