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