Slide 1
Slide 1 text
103
Frontend Workflow
1. tool chain
2. content outline
3. HTML structure
4. CSS selectors
5. hide everything
6. CSS styling
Slide 2
Slide 2 text
folder structure
text editor
web browser
tool chain
Slide 3
Slide 3 text
folder structure
separate concerns
content: HTML, images
design: CSS
behaviour: JavaScript
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
write down the content into a text file
create a logical content structure
independent of design
Demo
https://gist.github.com/cbas/5381537
outline
Slide 6
Slide 6 text
structure
boilerplate HTML
head vs body
semantic markup
Slide 7
Slide 7 text
Demo
https://gist.github.com/cbas/5381645
boilerplate HTML
don't reinvent the wheel
learn from peers
apply best practices
Slide 8
Slide 8 text
head vs body
meta information goes in the head
content goes in the body
Slide 9
Slide 9 text
Demo
https://gist.github.com/cbas/5381586
semantic markup
navigation, sections
headers, footers, titles
text, links, images
tables, lists, forms
div, span
Slide 10
Slide 10 text
navigation
Slide 11
Slide 11 text
sections
Slide 12
Slide 12 text
headers
Slide 13
Slide 13 text
footers
Slide 14
Slide 14 text
titles
Slide 15
Slide 15 text
text
Slide 17
Slide 17 text
images
Slide 18
Slide 18 text
tables
Slide 19
Slide 19 text
lists
Slide 20
Slide 20 text
forms
<button />
Slide 21
Slide 21 text
non-semantic containers
Slide 22
Slide 22 text
inlining, embedding, linking, importing CSS
target all content
empty blocks
selectors
Slide 23
Slide 23 text
inline CSS
Cordon
Violates separation of concerns by mixing design with content. Don't do this.Slide 24
Slide 24 text
embedded CSS
CSS is duplicated on each page. Avoid.
p { color: gray; }
a.button { background: url(pattern.jpg); }
Slide 25
Slide 25 text
linked CSS
HTML file references CSS file.
This is usually the best method.
Slide 26
Slide 26 text
imported CSS
CSS file references another CSS file.
Acceptable but has performance issues.
@import url("typography.css");
Slide 27
Slide 27 text
Demo
https://gist.github.com/cbas/5382374
target all content
Write a selector for each element
empty blocks
Slide 28
Slide 28 text
hide
everything
Avoid interference from unstyled content
Slide 29
Slide 29 text
Pro: old, reliable method
Con: not semantic
Slide 30
Slide 30 text
[hidden] attribute
Pro: semantically clear
Con: still relatively unsupported
Fix: [hidden] { display: none; }
Slide 31
Slide 31 text
CSS styling
normalize.css
Make an element visible
Implement the CSS block for its selector