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
チームリードになって変わったこと
isaka1022
0
190
sappoRo.R #12 初心者セッション
kosugitti
0
230
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
技術を根付かせる / How to make technology take root
kubode
1
240
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Cult of Friendly URLs
andyhume
78
6.2k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Typedesign – Prime Four
hannesfritz
40
2.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Statistics for Hackers
jakevdp
797
220k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
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