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
480
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
130
SVG Reality
sebdeckers
5
140
About Sebastiaan
sebdeckers
0
150
Frontend 100
sebdeckers
1
490
Frontend 101
sebdeckers
4
540
Frontend 102
sebdeckers
3
490
Frontend Testing
sebdeckers
3
340
Grunt: The JavaScript Task Runner
sebdeckers
8
400
Other Decks in Programming
See All in Programming
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Writing documentation can be fun with plugin system
okuramasafumi
0
120
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
CI改善もDatadogとともに
taumu
0
110
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
SwiftUI Viewの責務分離
elmetal
PRO
0
150
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Bash Introduction
62gerente
610
210k
4 Signs Your Business is Dying
shpigford
182
22k
The Language of Interfaces
destraynor
156
24k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Facilitating Awesome Meetings
lara
51
6.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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