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 <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