Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Front-End Development 101: Html & CSS
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
80
mix11: knockout js
najam
1
130
frm08.pdf
najam
0
99
Other Decks in Education
See All in Education
1人 × AI、1か月でここまで作れる ー 数年前の外注換算3.8〜7.4億円・241〜379人月分の作業を、AI費用 約10万円・31日で
frievea
0
480
2026年度春学期 統計学 第13回 不確かな測定の不確かさを測る ― 不偏分散とt分布 (2026. 6. 25)
akiraasano
PRO
1
180
Geografía y Fútbol: Chattanooga Geografía del Búnker de La Roja.
juanmartin2026
1
12k
ちいかわを読め
uchi8977
1
340
25-26 CBT Library top items
cbtlibrary
0
240
Fundamentos, Caracteristicas y Aplicaciones de los Modulos NumPy , Matplotlib y Pandas
robintux
0
250
Tableau Public入門ハンズオン|Titanicデータで学ぶViz作成とMakeover
hayashi_ds017
0
130
セキュリティ担当がいない中小医療機関を院外のRISSはどう支えるべきか / How External RISS Can Help Small Medical Institutions
eller86
0
200
良書紹介08_ 頭のいい子がやっているすごいグラフの読み方
bunnchinn3
0
160
Adobe Express
matleenalaakso
2
8.4k
遊ぶかね欲しさの犯行(ルビ:労働)です
shirayanagiryuji
0
260
AIがコードを書く時代に、何を教えるのか / What Should We Teach in the Age of AI-Generated Code?
ichiroc
1
560
Featured
See All Featured
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
240
Java REST API Framework Comparison - PWX 2021
mraible
34
9.7k
Docker and Python
trallard
47
4.2k
How to build a perfect <img>
jonoalderson
1
6k
RailsConf 2023
tenderlove
30
1.5k
We Have a Design System, Now What?
morganepeng
55
8.3k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
A Soul's Torment
seathinner
7
3.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
3k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2.6k
Designing Powerful Visuals for Engaging Learning
tmiket
1
540
Skip the Path - Find Your Career Trail
mkilby
1
230
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/