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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Sebastiaan Deckers
April 15, 2013
Programming
4
560
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
160
Frontend 100
sebdeckers
1
510
Frontend 102
sebdeckers
3
510
Frontend 103
sebdeckers
2
510
Frontend Testing
sebdeckers
3
350
Grunt: The JavaScript Task Runner
sebdeckers
8
420
Other Decks in Programming
See All in Programming
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
2k
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
6k
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
heimusu
7
2.8k
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
Grafana:建立系統全知視角的捷徑
blueswen
0
330
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
2.4k
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
wisemuji
0
190
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
120
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
130
Package Management Learnings from Homebrew
mikemcquaid
0
210
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
kekekenta
0
200
Featured
See All Featured
Marketing to machines
jonoalderson
1
4.6k
Ruling the World: When Life Gets Gamed
codingconduct
0
140
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
430
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.3k
Side Projects
sachag
455
43k
So, you think you're a good person
axbom
PRO
2
1.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.4k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
0
250
Imperfection Machines: The Place of Print at Facebook
scottboms
269
14k
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>