Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontend 103

Frontend 103

Sebastiaan Deckers

April 15, 2013
Tweet

More Decks by Sebastiaan Deckers

Other Decks in Programming

Transcript

  1. 103 Frontend Workflow 1. tool chain 2. content outline 3.

    HTML structure 4. CSS selectors 5. hide everything 6. CSS styling
  2. write down the content into a text file create a

    logical content structure independent of design Demo https://gist.github.com/cbas/5381537 outline
  3. <p /> <b /> <strong /> <i /> <em />

    <cite /> <blockquote /> <q /> <abbr /> <code /> text
  4. embedded CSS CSS is duplicated on each page. Avoid. <style>

    p { color: gray; } a.button { background: url(pattern.jpg); } </style>
  5. linked CSS HTML file references CSS file. This is usually

    the best method. <link rel="stylesheet" src="app.css" />
  6. imported CSS CSS file references another CSS file. Acceptable but

    has performance issues. @import url("typography.css");