Frontend básico em

Frontend no detalhe
e na prática
Frontend
É a interface do usuário.
Em web development, uma página

pela qual ele navega.
Vamos construir uma página para o

nosso curso de Tech for Recruiters
O básico de uma página web
+
Conteúdo e Design
estrutura
Sintaxe básica HTML
Tags HTML
Conteúdo e
<element>Conteúdo</element> estrutura
<element attr="value">Conteúdo</element>
<a href="http://lewagon.com">Acesse Le Wagon</a>

Estrutura básica HTML
O esqueleto de uma página
<!DOCTYPE html>
<html> Conteúdo e
<head> estrutura
Informações gerais, links necessários e metadados
Não aparece no navegador
</head>
<body>
Conteúdo da página
Aparece no navegador
</body>
</html>
Exemplos de tags HTML
Headers
Conteúdo e
<h1>Título</h1> estrutura
<h2>Subtítulo</h2>
<h3>Título de uma seção</h3>
<h4>Subtítulo de uma seção</h4>
Paragraph
Conteúdo e
<p> estrutura
Lorem ipsum dolor sit amet, consectetur
adipisicing elit.
</p>
Strong
Conteúdo e
<p> estrutura
<strong>adipisicing</strong> elit.
</p>
Image
Conteúdo e
estrutura
<img src="logo.jpg" alt="logo-lewagon" width="100"

height="100">
Div
<div> Conteúdo e
<h3>Sou o título dessa seção</h3> estrutura
<p>
</p>
</div>
Identação do código
Muuuuito importante!!!
<div> Conteúdo e
<h3>Sou o título dessa seção</h3> estrutura
<p>
</p>
</div>
Hora de praticar!
Vamos começar nosso site
https://github.com/99hunters/tech-for-recruiters

Frontend básico em

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Frontend básico em

Enviado por

Direitos autorais:

Formatos disponíveis

Frontend no detalhe

Em web development, uma página

Vamos construir uma página para o

<a href="http://lewagon.com">Acesse Le Wagon</a>

<img src="logo.jpg" alt="logo-lewagon" width="100"

Você também pode gostar