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
310
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
75
introduction to scrum
najam
1
55
mix11: knockout js
najam
1
110
frm08.pdf
najam
0
74
Other Decks in Education
See All in Education
Microsoft Office 365
matleenalaakso
0
1.5k
Information Architectures - Lecture 2 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.1k
子どもたち創造的活動機会の必要性に関する提言/creativehub
codeforeveryone
0
150
2023年度桜井政成ゼミ資料_論文の探し方・読み方
masanari
6
2.2k
Switches
irocho
0
180
Human Perception and Colour Theory - Lecture 2 - Information Visualisation (4019538FNR)
signer
PRO
0
1.7k
わたしのメタ学習 / My Own Meta Learning #shinjukurb
expajp
0
110
高可用性システム構築 - Oracle Data Guard基本編
oracle4engineer
PRO
2
930
パフォーマンス・チューニング入門
oracle4engineer
PRO
2
540
week2@tcue2024
nonxxxizm
0
750
スクフェスの学びにチームを惹き込め! 社内同時視聴会のすゝめ!
pokotyamu
0
680
Родина моя Беларусь в лицах
programmer_sch2np
0
150
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
49
9.2k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Fireside Chat
paigeccino
19
2.6k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Agile that works and the tools we love
rasmusluckow
323
20k
Ruby is Unlike a Banana
tanoku
95
10k
Web development in the modern age
philhawksworth
201
10k
The Cult of Friendly URLs
andyhume
73
5.7k
A designer walks into a library…
pauljervisheath
199
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
320
20k
Designing for humans not robots
tammielis
247
25k
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/