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
350
Grunt: The JavaScript Task Runner
sebdeckers
8
410
Other Decks in Programming
See All in Programming
rage against annotate_predecessor
junk0612
0
160
Design Foundational Data Engineering Observability
sucitw
2
130
tool ディレクティブを導入してみた感想
sgash708
1
160
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
690
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
110
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
2
990
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
160
Improving my own Ruby thereafter
sisshiki1969
1
150
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.8k
RDoc meets YARD
okuramasafumi
4
160
機能追加とリーダー業務の類似性
rinchoku
0
410
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Rails Girls Zürich Keynote
gr2m
95
14k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Pragmatic Product Professional
lauravandoore
36
6.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Making Projects Easy
brettharned
117
6.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Side Projects
sachag
455
43k
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>