Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 16
Slide 16 text
links
Slides
Slide 17
Slide 17 text
images
Slide 18
Slide 18 text
tables
Slide 19
Slide 19 text
lists
Slide 20
Slide 20 text
forms
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