Front-end: Criando sua primeira página web!

Front-end: Criando sua primeira página web! Amanda Vilela && Jullia
Saad

O que é front-end?

O que é back-end?

Mas como assim?

Vamos entender como funciona a internet

Back-end --- HTTP --- Front-end

Vamos nos aprofundar no front-end

Sobre HTML

Vamos criar nossa primeira página HTML!

<!DOCTYPE html> <html> <head> <title>Um título bem legal aqui :)</title>
</head> <body> </body> </html>

Parabéns! :)

Agora vamos criar uma página sobre você

Títulos <h1>Seu nome</h1> <h2>Subtítulo</h2> <h3>Subtítulo</h3> <h4>Subtítulo</h4> <h5>Subtítulo</h5> <h6>Subtítulo</h6>

Conteúdo <p>Parágrafo</p> <strong>negrito</strong> <em>itálico</em>

Listas não ordenadas <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li>
<li>Item 4</li> <li>Item 5</li> </ul>

Listas ordenadas <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item
4</li> <li>Item 5</li> </ol>

Adicionando imagens <img src=”caminho da imagem” alt=”Descrição da imagem” width="200"
/>

Caracteres especiais <meta charset="utf-8">

Criando links <a href=”caminho do link”>Texto do link</a>

Estrutura <header> <h1>Título</h1> </header>

Estrutura <section> <h2>Subtítulo</h2> </section>

Estrutura <footer> <p>Aqui é o rodapé :)</p> </footer>

h1 { color: green; } seletor regra atributo valor

CSS h1 { color: #222; font-size: 22px; font-family: text-align: center;
}

Cores google.com color picker

Google Fonts https://fonts.google.com/

Esse é só o começo :D

Front-end: Criando sua primeira página web!

Front-end: Criando sua primeira página web!

Amanda Vilela

More Decks by Amanda Vilela

Other Decks in Programming

Featured

Transcript