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
Frontend 101
Search
Sebastiaan Deckers
April 15, 2013
Programming
4
550
Frontend 101
Sebastiaan Deckers
April 15, 2013
Tweet
Share
More Decks by Sebastiaan Deckers
See All by Sebastiaan Deckers
Commons Host: Building a CDN for the rest of the world
sebdeckers
1
140
SVG Reality
sebdeckers
5
150
About Sebastiaan
sebdeckers
0
150
Frontend 100
sebdeckers
1
500
Frontend 102
sebdeckers
3
500
Frontend 103
sebdeckers
2
490
Frontend Testing
sebdeckers
3
340
Grunt: The JavaScript Task Runner
sebdeckers
8
410
Other Decks in Programming
See All in Programming
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Hack Claude Code with Claude Code
choplin
4
2.1k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How GitHub (no longer) Works
holman
314
140k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Scaling GitHub
holman
460
140k
Why Our Code Smells
bkeepers
PRO
336
57k
Transcript
101 Web Standards URL, HTTP, HTML, CSS, JavaScript
URL uniform resource locator Purpose: Make data addressable
http://www.google.com /search?q=flowers#foot
http:// protocol scheme http, https, file, mailto, ...
http:// root double slash
bob:s3cr3t@www. example.com:8080
bob:s3cr3t@www. example.com:8080 domain required
bob:s3cr3t@www. example.com:8080 port optional default is 80 range: 1-65,535
bob:s3cr3t@www. example.com:8080 authentication credentials optional rarely used, legacy not how
modern web apps handle logins
reddit.com/r/IAmA/top path convention to omit “index.html” slashes “/” denote hierarchy
leading slash is the root directory reference current level with single dot “.” can be relative by using double dot “..”
Current page: reddit.com/r/IAmA/top Link: ./new Result: reddit.com/r/IAmA/new
Current page: reddit.com/r/IAmA/top Link: new Result: reddit.com/r/IAmA/new
Current page: reddit.com/r/IAmA/top Link: ../pics/new Result: reddit.com/r/pics/new
Current page: reddit.com/r/IAmA/top Link: / Result: reddit.com/
http://www.google.com /search?q=flowers#foot query string after the question mark “?” key=value
pairs used to pass information to the web server
http://www.google.com /search?q=flowers#foot fragment identifier after the hash sign points to
specific content in the page
HTTP hyper-text transfer protocol Purpose: Transfer content from a web
server to a web browser
Demo https://gist.github.com/cbas/5378704 Syntax request/response method, URI, version headers body
hyper-text markup language Purpose: Structures content of the document semantically
User agent: Browsers, crawlers, screen scrapers, file converters HTML
Demo https://gist.github.com/cbas/5379047 Syntax doctype elements attributes text comments
doctype describes HTML version the document uses HTML5 simplified it
to “<!DOCTYPE html>”
elements opening and closing tags: <p>some text</p> self closing tags:
<img /> equals <img>
must wrap values in double or single quotes if they
contains spaces, so just always do it <img src='house.jpg' alt="Seb's House"> attributes
attributes white space separated <img src="logo.png" alt="My Logo">
attributes names case insensitive, but lowercase looks better <img SRC="logo.png">
equals <img src="logo.png">
text escape special characters < “<” or > “>” &
or “&” white space collapses into single space “Hi there!” becomes “Hi there!”
comments begin with “<!--” and end with “-->” useful to
hide a section, or describe it to other developers (ie. future self) contains any HTML except comments
CSS cascading style sheets Purpose: Presentation of the data, typically
through visual layout and design Targets: Screen, print, or assistive technology (eg. screen readers)
Demo https://gist.github.com/cbas/5379150 Syntax selectors blocks properties values
selectors universal selector asterisk “*”
selectors type element name
selectors class space separated list re-usable on any elements
selectors id single value unique in the page
selectors attributes element has attribute “img[title]” attribute value equals “input[type=’password’]”
selectors pseudo classes :first-child, :last-child, :nth-child() :hover, :active, :focus :visited
:not()
selectors pseudo elements ::first-line, ::first-letter ::before, ::after
selectors combinators child of “>” preceded by “~“ immediately preceded
by “+”
blocks wrapped in curly braces “{ }”
blocks required: one block per selector h1 { } optional:
multiple selectors per block h1, h2, h3, h4, h5, h6 { }
properties examples: font-family, color, background, padding, ... vendor prefixes -webkit-*,
-moz-*, -ms-*, -o-*
values amount + unit
amount integer 5, number 4.5
units percentage 5%, length 5px, time 5ms, colour #5030bf, string
"Arial", url url(me.jpg), angle 90deg, ...
JavaScript Purpose: Interactive behaviour on a web page Examples: Popup
dialogs, visual effects, in- place data loading, ...
JavaScript is a programming language outside the scope of this
course. We can however use code snippets to achieve many useful behaviours.
Demo https://gist.github.com/cbas/5379212 Syntax Embedded: <script>... source code ...</script> Linked: <script
src=”... link to code file...”></script>