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
1
320
Front-End Development 101: Html & CSS
introductory session for html & css given to moftak solutions team.
najam
October 11, 2013
Tweet
Share
More Decks by najam
See All by najam
twitter 101
najam
1
88
introduction to scrum
najam
1
66
mix11: knockout js
najam
1
120
frm08.pdf
najam
0
86
Other Decks in Education
See All in Education
第1回大学院理工学系説明会|東京科学大学(Science Tokyo)
sciencetokyo
PRO
0
3.9k
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
4
1k
小さなチャレンジが生んだチームの大きな変化 -私のふりかえり探求の原点
callas1900
0
550
Tangible, Embedded and Embodied Interaction - Lecture 7 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
推しのコミュニティはなんぼあってもいい / Let's join a lot of communities.
kaga
2
1.8k
Tutorial: Foundations of Blind Source Separation and Its Advances in Spatial Self-Supervised Learning
yoshipon
1
120
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
730
JPCERTから始まる草の根活動~セキュリティ文化醸成のためのアクション~
masakiokuda
0
190
Course Review - Lecture 12 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
3
550
技術文章を書くための執筆技術と実践法(パラグラフライティング)
hisashiishihara
18
6.5k
Data Physicalisation - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
450
Featured
See All Featured
Navigating Team Friction
lara
187
15k
Designing Experiences People Love
moore
142
24k
Building an army of robots
kneath
306
45k
Visualization
eitanlees
146
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Rails Girls Zürich Keynote
gr2m
95
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Gamification - CAS2011
davidbonilla
81
5.4k
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/