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
98
introduction to scrum
najam
1
74
mix11: knockout js
najam
1
130
frm08.pdf
najam
0
94
Other Decks in Education
See All in Education
「機械学習と因果推論」入門① 因果効果とは
masakat0
0
1.9k
[2026前期火5] 論理学(京都大学文学部 前期 第1回)「ハルシネーションを外部世界との対応を考えずに見分ける方法」
yatabe
0
1.1k
0506
cbtlibrary
0
190
Lectura 2 (PIT : Python Basico)
robintux
0
360
!コスパよくインターンに受かる方法!
ruribou
1
270
生成AI時代のエンジニア育成について考えてみた
akasan
0
150
Alumnote inc. Company Deck
yukinumata
1
20k
Laura Wilson - The Quarterly PR Pivot
laurawilsonbseo1
1
350
2026年度春学期 統計学 講義の進め方と成績評価について (2026. 4. 9)
akiraasano
PRO
0
190
[2026前期火5] 論理学(京都大学文学部 前期 第8回)「正規化定理の証明」
yatabe
0
160
View Manipulation and Reduction - Lecture 9 - Information Visualisation (4019538FNR)
signer
PRO
1
2.7k
We部コミュニティスライド2026-04-24
junhat6
0
180
Featured
See All Featured
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
730
Designing for humans not robots
tammielis
254
26k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.9k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.6k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
290
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.1k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
200
[SF Ruby Conf 2025] Rails X
palkan
2
1.1k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
1.7k
Building Applications with DynamoDB
mza
96
7.1k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
490
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
180
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/