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 103
Search
Sebastiaan Deckers
April 15, 2013
Programming
2
490
Frontend 103
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 101
sebdeckers
4
550
Frontend 102
sebdeckers
3
500
Frontend Testing
sebdeckers
3
350
Grunt: The JavaScript Task Runner
sebdeckers
8
410
Other Decks in Programming
See All in Programming
OSS開発者という働き方
andpad
5
1.6k
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
機能追加とリーダー業務の類似性
rinchoku
0
180
Kiroで始めるAI-DLC
kaonash
2
500
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
130
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
ProxyによるWindow間RPC機構の構築
syumai
1
260
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
180
私の後悔をAWS DMSで解決した話
hiramax
4
180
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
800
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Rails Girls Zürich Keynote
gr2m
95
14k
Become a Pro
speakerdeck
PRO
29
5.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Transcript
103 Frontend Workflow 1. tool chain 2. content outline 3.
HTML structure 4. CSS selectors 5. hide everything 6. CSS styling
folder structure text editor web browser tool chain
folder structure separate concerns content: HTML, images design: CSS behaviour:
JavaScript
folder structure mysite /index.html /about.html /scripts /app.js /jquery.js /jquery-plugin.js /styles
/app.css /bootstrap.css /assets /logo.png /profile.jpg
write down the content into a text file create a
logical content structure independent of design Demo https://gist.github.com/cbas/5381537 outline
structure boilerplate HTML head vs body semantic markup
Demo https://gist.github.com/cbas/5381645 boilerplate HTML don't reinvent the wheel learn from
peers apply best practices
head vs body meta information goes in the head content
goes in the body
Demo https://gist.github.com/cbas/5381586 semantic markup navigation, sections headers, footers, titles text,
links, images tables, lists, forms div, span
navigation <nav />
sections <section /> <article /> <aside /> <figure />
headers <header />
footers <footer />
titles <h1 /> <h2 /> <h3 /> <h4 /> <h5
/> <h6 />
<p /> <b /> <strong /> <i /> <em />
<cite /> <blockquote /> <q /> <abbr /> <code /> text
links <a href="talk.pdf">Slides</a>
images <img src="photo.jpg" />
<table /> <thead /> <tbody /> <tr /> <td />
<tfoot /> tables
lists <ul /> <ol /> <li /> <dl /> <dt
/> <dd />
forms <form /> <input type="text" /> <input type="password" /> <input
type="date" /> <textarea /> <button />
non-semantic containers <div /> <span />
inlining, embedding, linking, importing CSS target all content empty blocks
selectors
inline CSS <p style="color: blue;">Cordon</p> Violates separation of concerns by
mixing design with content. Don't do this.
embedded CSS CSS is duplicated on each page. Avoid. <style>
p { color: gray; } a.button { background: url(pattern.jpg); } </style>
linked CSS HTML file references CSS file. This is usually
the best method. <link rel="stylesheet" src="app.css" />
imported CSS CSS file references another CSS file. Acceptable but
has performance issues. @import url("typography.css");
Demo https://gist.github.com/cbas/5382374 target all content Write a selector for each
element empty blocks
hide everything Avoid interference from unstyled content
Pro: old, reliable method Con: not semantic <!-- HTML comments
-->
[hidden] attribute Pro: semantically clear Con: still relatively unsupported Fix:
[hidden] { display: none; }
CSS styling normalize.css Make an element visible Implement the CSS
block for its selector