Curso HTML e CSS - Semana de Tecnologia Fatec 2018

criando uma página de tributo para sua banda preferida Curso
HTML + CSS

Quem sou eu? Contatos @julliasaad https://github.com/julliasaad Jullia Saad 22 anos
Desenvolvedora na Codeminer 42 Patinadora inline nas horas vagas

Quem sou eu? Contatos @fortunatooo @juliofortunato https://github.com/juliofortunato Julio Fortunato 23
anos Desenvolvedor na Codeminer 42 Tentando ser patinador nas horas vagas

Front-end (cliente) Back-end (servidor) solicita responde

front-end

HTML <HyperText Markup Language/> <head> <!DOCTYPE html> <body> <header> <p>
<a> <img> <div> <li> <span> <h1>

<definição> Linguagem de marcação utilizada na construção de páginas na
Web </definição>

CSS { Cascading Style Sheets } font-size background-color font-weight width
color position display height font-family margin padding

definição { } Linguagem de estilo utilizada para apresentação de
páginas web

<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is
heading 3</h3>

<a href="path">Texto do link</a>

<p> Assim mesmo, a percepção das dificuldades possibilita uma melhor
visão global das condições financeiras e administrativas exigidas. </p>

LET’S DO IT https://github.com/julliasaad/html-css-setec

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nome da sua banda
preferida</title> </head> <body>  </body> </html> index.html

index.html ... <body> <header></header> <main> <section></section> <section></section> </main> <footer></footer> </body>
...

editores de texto

CADÊ AS COREEES?!

h1 { color: red; } seletor regra atributo valor

Box model

• criar pasta css • novo arquivo style.css css/style.css

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./css/style.css">
<title>Nome da sua banda preferida</title> </head>

css/style.css

Responsividade @media (min-width: 768px) { }

Responsividade @media (min-width: 1024px) { }

DEV TOOLS BFF BFF BFF BFF BFF BFF BFF BFF

E agora?

Obrigada!

Curso HTML e CSS - Semana de Tecnologia Fatec 2018

Curso HTML e CSS - Semana de Tecnologia Fatec 2018

More Decks by Jullia Saad

Other Decks in Technology

Featured

Transcript