HTML and CSS

joaojusto jpjustonunes

https://github.com/groupbuddies/theshelf

https://github.com/groupbuddies/tripl.it

HTML good practices

Never use inline styles

<p style="color: red;">I'm going to make this text red!</p>

<p this text red! .red { color: red; }

Javascript ﬁles at the bottom

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

Write semantic HTML

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

<nav> <h1>Hello World</h1> <a href="/home">Home</a> <a href="/link">Link</a> </nav> <section> <h2>Some
article</h2> </section>

Minify Resources Optimize Images

Make your site accessible

Headings for structure not for style

<body> <h1>Page Title</h1> <section> <h1>First Section</h1> <article> <h1>Article title</h1> </article>
</section> </body>

<body> <h1>Page Title</h1> <section> <h2>First Section</h2> <article> <h3>Article title</h3> </article>
</section> </body>

ARIA Landmark Roles

blog.groupbuddies.com/posts/50-accessibility-matters

Tricks

How to add style to a checkbox?

http://codepen.io/joaojusto/ pen/emMLar

CSS architecture

Suit CSS SMACSS Atomic

But why?

The ugly

https://github.com/cesium/SEI15

#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; }

#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; }

stuff-dark.png background_events.png

The bad

.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%; }

.container-speakers { padding-bottom: 30px; } <section class=“container container-speakers“> .container-organization {
padding-bottom: 75px; } <section class=“container container-organization“>

joaojusto jpjustonunes Thanks

HTML and CSS

HTML and CSS

More Decks by João Justo

Other Decks in Programming

Featured

Transcript