Frontend 103

Transcript

1. 103 Frontend Workflow 1. tool chain 2. content outline 3. HTML structure 4. CSS selectors 5. hide everything 6. CSS styling
2. folder structure text editor web browser tool chain
3. folder structure separate concerns content: HTML, images design: CSS behaviour: JavaScript
4. 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
5. write down the content into a text file create a logical content structure independent of design Demo https://gist.github.com/cbas/5381537 outline
6. structure boilerplate HTML head vs body semantic markup
7. Demo https://gist.github.com/cbas/5381645 boilerplate HTML don't reinvent the wheel learn from peers apply best practices
8. head vs body meta information goes in the head content goes in the body
9. Demo https://gist.github.com/cbas/5381586 semantic markup navigation, sections headers, footers, titles text, links, images tables, lists, forms div, span
10. navigation <nav />
11. sections <section /> <article /> <aside /> <figure />
12. headers <header />
13. footers <footer />
14. titles <h1 /> <h2 /> <h3 /> <h4 /> <h5 /> <h6 />
15. <p /> <b /> <strong /> <i /> <em /> <cite /> <blockquote /> <q /> <abbr /> <code /> text
16. links <a href="talk.pdf">Slides</a>
17. images <img src="photo.jpg" />
18. <table /> <thead /> <tbody /> <tr /> <td /> <tfoot /> tables
19. lists <ul /> <ol /> <li /> <dl /> <dt /> <dd />
20. forms <form /> <input type="text" /> <input type="password" /> <input type="date" /> <textarea /> <button />
21. non-semantic containers <div /> <span />
22. inlining, embedding, linking, importing CSS target all content empty blocks selectors
23. inline CSS <p style="color: blue;">Cordon</p> Violates separation of concerns by mixing design with content. Don't do this.
24. embedded CSS CSS is duplicated on each page. Avoid. <style> p { color: gray; } a.button { background: url(pattern.jpg); } </style>
25. linked CSS HTML file references CSS file. This is usually the best method. <link rel="stylesheet" src="app.css" />
26. imported CSS CSS file references another CSS file. Acceptable but has performance issues. @import url("typography.css");
27. Demo https://gist.github.com/cbas/5382374 target all content Write a selector for each element empty blocks
28. hide everything Avoid interference from unstyled content
29. Pro: old, reliable method Con: not semantic <!-- HTML comments -->
30. [hidden] attribute Pro: semantically clear Con: still relatively unsupported Fix: [hidden] { display: none; }
31. CSS styling normalize.css Make an element visible Implement the CSS block for its selector