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
130
SVG Reality
sebdeckers
5
140
About Sebastiaan
sebdeckers
0
150
Frontend 100
sebdeckers
1
490
Frontend 102
sebdeckers
3
490
Frontend 103
sebdeckers
2
490
Frontend Testing
sebdeckers
3
340
Grunt: The JavaScript Task Runner
sebdeckers
8
400
Other Decks in Programming
See All in Programming
GitHub Copilot for Azureを使い倒したい
ymd65536
1
190
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
1
170
個人開発の学生アプリが企業譲渡されるまで
akidon0000
0
950
Being an ethical software engineer
xgouchet
PRO
0
210
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
420
Unlock the Potential of Swift Code Generation
rockname
0
270
七輪ライブラリー: Claude AI で作る Next.js アプリ
suneo3476
1
120
REALITY コマンド作成チュートリアル
nishiuriraku
0
110
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
1.7k
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
170
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
bitkey
1
100
On-the-fly Suggestions of Rewriting Method Deprecations
ohbarye
1
3.4k
Featured
See All Featured
Navigating Team Friction
lara
184
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
A better future with KSS
kneath
239
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Statistics for Hackers
jakevdp
798
220k
Docker and Python
trallard
44
3.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
RailsConf 2023
tenderlove
30
1.1k
Unsuck your backbone
ammeep
670
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>