front end ++: seo e flexbox
TRANSCRIPT
Frontend ++SEO e Flexbox
Fernanda Bernardo
HTML Semântico
?????
Tags HTML5<section>
<nav>
<article>
<aside>
<header>
<footer>
<main>
<hgroup>
<figure>
<figcaption>
<video><canvas><svg>
<header> </header>
<nav> </nav>
<aside>
</aside>
<footer> </footer>
<section>
</section>
<article></article>
<figure><img src=”octocat.png” alt=”octocat”><figcaption> Octocat programadora
</figcaption></figure>
Octocat programadora
<hgroup> <h1>Main title</h1> <h2>Secondary title</h2></hgroup>
Main titleSecondary title
<canvas id="myCanvas" width="200" height="100" style="border:4px solid #000000;"></canvas>
<svg width="100" height="100"> <circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
</svg>
Flexbox
● Organizar elementos na tela
● Sem float
● Sem @media
http://caniuse.com/#search=flexbox
Compatibilidade
Flex Container
Flex Item Flex Item Flex Item
.container {display: flex;
}
column column-reverse
row row-reverse
Flex Direction
nowrapuma linha
esquerda -> direita
Flex Wrap
wrapvárias linhas
esquerda -> direita
wrap-reversevárias linhas
direita -> esquerda
2 3
Order1
.item {order: <integer>;
}
12 99-1
