![Page 1: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/1.jpg)
Matheus S. Thomaz
Front-end Developer
![Page 2: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/2.jpg)
Matheus S. Thomaz
Front-end Developer
CRONOGRAMA
![Page 3: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/3.jpg)
Matheus S. Thomaz
Front-end Developer
/Cronograma
HTML
CSS
![Page 4: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/4.jpg)
Matheus S. Thomaz
Front-end Developer
HTML
![Page 5: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/5.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML
Hypertext Markup Language
Linguagem base da web
![Page 6: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/6.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML
1. <!DOCTYPE html>2.3. <html lang="pt-br">4. <head>5. <meta charset="utf-8">6. <title>Título da página</title>7. </head>8. <body>9. // conteudo10.</body>11.</html>
![Page 7: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/7.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML
1. <!DOCTYPE html>
Determina o tipo de documento.
![Page 8: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/8.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML
1. <html lang="pt-br">
2. </html>
Delimita o html.
![Page 9: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/9.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML
1. <head>2. <meta charset="utf-8">3. <title>Título da página</title>4. </head>
Valores que o navegador usa pararenderizar a página.
![Page 10: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/10.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML
1. <body>2. // conteudo3. </body>
Onde todo conteúdo da tela deveestar.
![Page 11: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/11.jpg)
Matheus S. Thomaz
Front-end Developer
HTMLprincipais tags
![Page 12: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/12.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<style></style>
<link rel="stylesheet" href="">
![Page 13: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/13.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<script></script>
<script src=””></script>
![Page 14: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/14.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<div>
![Page 15: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/15.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<section>
![Page 16: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/16.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<aside>
![Page 17: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/17.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<article>
![Page 18: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/18.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<header>
![Page 19: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/19.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<footer>
![Page 20: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/20.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<nav>
![Page 21: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/21.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<p>
![Page 22: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/22.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<a>
![Page 23: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/23.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<ol>
![Page 24: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/24.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<ul>
![Page 25: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/25.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<img>
![Page 26: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/26.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<video>
![Page 27: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/27.jpg)
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<audio>
![Page 28: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/28.jpg)
Matheus S. Thomaz
Front-end Developer
CSS
![Page 29: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/29.jpg)
Matheus S. Thomaz
Front-end Developer
/CSS
Cascading Style Sheets
Especifica como os documentos são
apresentados ao usuário.
![Page 30: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/30.jpg)
Matheus S. Thomaz
Front-end Developer
/CSS
É uma linguagem simples e fácil.
15 atributos diariamente.
Aprenda algo novo todos os dias.
![Page 31: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/31.jpg)
Matheus S. Thomaz
Front-end Developer
CSSprincipais atributos
![Page 32: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/32.jpg)
Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ background: cor || url || repeat || posição }
Especifica a cor || imagem || posição da imagem || repetição da imagem do plano de fundo do documento.
cor: #111, rgb(255,255,255), rgba(255,255,255,0.5)url: url(../img/image.png)repeat: repeat-x, repeat-y, no-repeatposição: 10px -50px
![Page 33: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/33.jpg)
Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ border: largura || estilo || color }
Define a largura || estilo || cor das bordas de um objeto.
largura: 2pxestilo: dotted, solid, dashed…color: #111, rgb(255,255,255), rgba(255,255,255,0.5)
![Page 34: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/34.jpg)
Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ color: color }
Define a cor do texto do elemento.
color: #111, rgb(255,255,255), rgba(255,255,255,0.5)
![Page 35: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/35.jpg)
Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ display: none }
Determina se um elemento estará visível e reserva um espaço para o mesmo.
display: none, block, inline, inline-block...
![Page 36: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/36.jpg)
Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ position: absolute}
Determina como o elemento está posicionado na página.
position: absolute, relative, static, fixed, inherit
![Page 37: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/37.jpg)
Matheus S. Thomaz
Front-end Developer
CSSPre-processadores
![Page 38: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/38.jpg)
“With great power comes great responsability”voltaire
![Page 39: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/39.jpg)
Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
É um programa que recebe um texto e
efetua conversões léxicas nele.
![Page 40: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/40.jpg)
WTF?Conversões léxicas
![Page 41: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/41.jpg)
Conversões léxicas é praticamente o
mesmo que pegar um texto em
português, escrito de forma informal,
(por exemplo, com gírias e sem uma
pontuação correta) e transforma-lo em
um texto escrito de forma formal.
![Page 42: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/42.jpg)
Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
Resumindo
Pego isso:
div { background: (@corLorem + #222) * 1.5; }
E transformo nisso:
div { background: #4d4d4d; }
![Page 43: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/43.jpg)
Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
Definindo:
Uma linguagem que, após compilada, gera CSS.
![Page 44: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/44.jpg)
Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
CSS
Desorganizado.
Não tem padrão.
Folhas se estilo muito extensas.
Repetitivo.
Uso de prefixos.
Pré-processador
Organização
Imports
Aninhamento (nested)
Variáveis
Funções
Mixins
![Page 45: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/45.jpg)
Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
LESS
SASS
Stylus
![Page 46: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/46.jpg)
Matheus S. Thomaz
Front-end Developer
SEMÂNTICA
![Page 47: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/47.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica
Semântica é o estudo das relações entre
os signos e símbolos e o que eles
representam.
![Page 48: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/48.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica
Um dos fundamentos do front-end.
![Page 49: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/49.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica
A maioria está relacionada a aspectos da
natureza do conteúdo existente ou
esperado.
![Page 50: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/50.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica
<h1>Titulo</h1>
<a>link</a>
![Page 51: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/51.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica
<p>Titulo</p>
<button>link</button>
![Page 52: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/52.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica
<p>Titulo</p><p>Parágrafo</p>
<button>link</button><button>Botão</button>
![Page 53: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/53.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
Classes semânticas são menos
importantes que HTML semânticoo.
![Page 54: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/54.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
Classes e ids devem ser usadas como
âncoras para css e javascript.
![Page 55: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/55.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
Diferencie classes de estilo com classes
de interação.
![Page 56: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/56.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
CSS.loremIpsum | .lorem-ipsum#loremIpsum | #lorem-ipsum
JS.js-loremIpsum
![Page 57: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/57.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
Utilize nomes de classes e ids que
comuniquem informações úteis a outros
desenvolvedores.
![Page 58: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/58.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
.menuOpcoes
.container
![Page 59: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/59.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
O estilo vai se repetir em vários
elementos?
Utilize classes para cada bloco de
repetição.
![Page 60: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/60.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
.btn-cancelar {width: 10px;heigth: 15px;padding: 10px 5px;
background: red;}.btn-aceitar {
width: 10px;heigth: 15px;padding: 10px 5px;
background: green;}
![Page 61: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/61.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
.btn-cancelar {width: 10px;heigth: 15px;padding: 10px 5px;
background: red;}.btn-aceitar {
width: 10px;heigth: 15px;padding: 10px 5px;
background: green;}
![Page 62: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/62.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
.btn {width: 10px;heigth: 15px;padding: 10px 5px;
} .btn-cancelar {
background: red;}.btn-aceitar {
background: green;}
1. <!DOCTYPE html>2.3. <a class=”btn btn-aceitar”>4. Aceitar
5. </a>
6. <a class=”btn btn-cancelar”>7. Cancelar8. </a>
![Page 63: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/63.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
É útil estruturar a nomenclatura das
classes.
![Page 64: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/64.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
component-namecomponent-name--modifier-namecomponent-name__sub-objectcomponent-name__sub-object--modifier-name
![Page 65: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/65.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
.btn { (componente)width: 10px;heigth: 15px;padding: 10px 5px;
} .btn-cancelar { (modificador)
background: red;}.btn-aceitar { (modificador)
background: green;}.texto { (sub-objeto)
color: red;}
![Page 66: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/66.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
.btn (componente)
.btn--cancelar (modificador)
.btn__texto (subcomponente)
.btn__texto--cancelar (modificador do subcomponente)
![Page 67: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/67.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
Novas tags resulta em nova estrutura.
![Page 68: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/68.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
<div id=”header”>// header
</div>
<div id=”footer”>// footer
</div>
![Page 69: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/69.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
<header id=”header”>// header
</header>
<footer id=”footer”>// footer
</footer>
![Page 70: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/70.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
<div id=”content”><div class=”noticia”>
<h2>Titulo</h2><p>Lorem ipsum</p><span>10/03/2014</span>
</div></div>
![Page 71: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/71.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
<section id=”content”><article class=”noticia”>
<header><h2>Titulo</h2>
</header><p>Lorem ipsum</p><footer>
<span>10/03/2014</span></footer>
</articlediv></section>
![Page 72: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/72.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
<div id=”menu-lateral”><ul>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
</ul></div>
![Page 73: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/73.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
<aside id=”menu-lateral”><nav>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
</nav></aside>
![Page 74: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/74.jpg)
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
![Page 75: Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}](https://reader033.vdocuments.us/reader033/viewer/2022052908/5595e2a21a28abb7598b474b/html5/thumbnails/75.jpg)
Matheus S. Thomaz
Front-end Developer