HTML and CSS

Transcript

2. joaojusto jpjustonunes
4. https://github.com/groupbuddies/theshelf
5. https://github.com/groupbuddies/tripl.it
10. HTML good practices
11. Never use inline styles
12. <p style="color: red;">I'm going to make this text red!</p>
13. <p this text red! .red { color: red; }
14. Javascript files at the bottom
15. <p>All right, the use can see the whole page!</p> <script type="text/javascript" src="file.js"></script> <script type="text/javascript" src=“another_file.js"></script> </body> </html>
16. Write semantic HTML
17. <div> <span class="big">Hello World</span> <a href="/home">Home</a> <a href="/link">Link</a> </div> <div class="main"> <div class="title">Some article</div> </div>
18. <nav> <h1>Hello World</h1> <a href="/home">Home</a> <a href="/link">Link</a> </nav> <section> <h2>Some article</h2> </section>
19. Minify Resources Optimize Images
20. Make your site accessible
21. Headings for structure not for style
23. <body> <h1>Page Title</h1> <section> <h1>First Section</h1> <article> <h1>Article title</h1> </article> </section> </body>
24. <body> <h1>Page Title</h1> <section> <h2>First Section</h2> <article> <h3>Article title</h3> </article> </section> </body>
25. ARIA Landmark Roles
27. blog.groupbuddies.com/posts/50-accessibility-matters
28. Tricks
29. How to add style to a checkbox?
30. http://codepen.io/joaojusto/ pen/emMLar
31. CSS architecture
32. Suit CSS SMACSS Atomic
33. But why?
34. The ugly
35. https://github.com/cesium/SEI15
36. #speakers { text-align: center; background-attachment: scroll; background-image: url(../img/background_events.png); background-position: center center; background-repeat: none; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; height: 100%; padding-bottom: 30px; }
37. #organization { padding-bottom: 75px; background-attachment: scroll; background-image: url(../img/stuff-dark.png); background-position: center center; background-repeat: none; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }
38. stuff-dark.png background_events.png
39. The bad
40. .container { text-align: center; background-attachment: scroll; background-image: url(../img/background_events.png); background-position: center center; background-repeat: none; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; height: 100%; }
41. .container-speakers { padding-bottom: 30px; } <section class=“container container-speakers“> .container-organization { padding-bottom: 75px; } <section class=“container container-organization“>
43. joaojusto jpjustonunes Thanks