Construindo sua primeira página web: Sua porta de entrada para uma carreira de front-end

Construindo Sua Primeira Página Web Sua porta de entrada para
uma carreira de front-end

Amanda Vilela ➔ +11 de experiência como frontend ➔ Gerente
de engenharia na ConsumerAffairs ➔ Fatec Sorocaba '17

O que é front-end? Criando sua primeira página Próximos passos
e carreira Perguntas e respostas Conteúdo 01 02 03 04

O que é front-end? 01

Como funciona a internet? Back-end Servidor + banco de dados
HTTP Protocolo de transferência de dados Front-end Tudo que acontece no navegador

Como são construídos os sites? hypertext markup language (conteúdo) HTML
CSS cascade style sheets (estilos) < >

HTML Define o significado e a estrutura do conteúdo da
web, independente da sua apresentação visual. Principais tags: • Texto: <h1>, <h2>, <h3>, <p> • Imagem: <img> • Estrutura: <header>, <footer>, <section> • Listas: <ul>, <ol>, <li>

CSS É uma linguagem de estilo usada para descrever a
apresentação de um documento escrito em HTML Principais propriedades: • Texto: color, font-size, font-family, • Espaçamentos: margin, padding • Dimensões: width, height • Outras: background

+/- 80% da web é feita assim :)

atenção 👁👁

Criando uma página web 02 Hora da mão na massa!

Estrutura <html> <head> <title>Título da página</title> </head> <body> conteúdo da
página </body> </html>

Conteúdo: cabeçalho <body> <header> <h1>Seu Nome</h1> <img src="url_de_uma_imagem_sua"> <p>Uma descrição
bem legal e profissional de você</p> </header>

Conteúdo: projetos <section> <h2>Projetos Recentes</h2> <ul> <li> <h3>Título</h3> <p>Descrição</p> <a
href="url">Link</a> </li> <li> <h3>Título</h3> <p>Descrição</p> <a href="url">Link</a> </li> </ul> </section>

Conteúdo: rodapé <footer> <h2>Contato</h2> <ul> <li> <a href="url">Linkedin</a> </li> <li>
<a href="url">GitHub</a> </li> <li> <a href="url">Codepen</a> </li> </ul> </footer> </body>

Vamos estilizar

CSS Fontes font-size, font-family Formas Espaçamento padding, margin Cores background,
color display, width, height, border-radius

Margin e Padding conteúdo padding margin

Background e color A cor é branca O background é
azul color: white background: #d9cfdeff

Fontes A cor é branca O background é azul font-family:
Arial font-size: 20px font-weight: bold

Display block inline inline-block none texto texto texto texto texto
texto texto

Projeto Final https://github.com/amandavilela/palestra-fatec

Próximos passos 03 E agora?

continue praticando

Roadmap técnico HTML: • Semântica CSS: • Convenções de nomenclatura
CSS • Grid systems, css grid e flexbox • Responsividade

Onde aprender? • Guia de CSS http://pt-br.learnlayout.com • Post completo
sobre responsividade https://web.dev/responsive-web-design-basics • Cursos Grátis HTML e CSS https://youtube.com/playlist?list=PLInBAd9OZCzydDFvm06EgbPXYylGVcyIL&feature=shared https://www.codecademy.com/learn/learn-html https://www.codecademy.com/learn/learn-css • Joguinho para aprender Flexbox https://flexboxfroggy.com • Curso grátis de Flexbox https://flexbox.io • Curso grátis de CSS grid https://cssgrid.io

Roadmap técnico JavaScript: • DOM • Testes • Design Patterns
• Algum framework JS • Automatizar tarefas (Webpack)

Onde aprender? • Cursos Grátis JavaScript https://youtube.com/playlist?list=PLInBAd9OZCzxl38aAYdyoMHVg0xCgxrRx&feature=shared https://www.codecademy.com/learn/introduction-to-javascript https://www.codecademy.com/learn/learn-intermediate-javascript •
Desafio 30 dias de JavaScript https://javascript30.com • Desafios de JavaScript https://www.jschallenger.com

Mostre seu código para o mundo https://try.github.io https://codepen.io

atualize-se

Sites legais • CSS Tricks https://css-tricks.com • Smashing Magazine https://www.smashingmagazine.com
• Newsletter de Web Design https://web-design-weekly.com • Site do Google com vários artigos sobre web https://web.dev • Newsletter Brasileira sobre JavaScript https://www.braziljs.org • Participe/organize eventos de tecnologia!!

Perguntas e respostas 04

CREDITS: This presentation template was created by Slidesgo, and includes
icons by Flaticon and infographics & images by Freepik Obrigada Entre em contato comigo :) [email protected] https://amandavilela.github.io

Construindo sua primeira página web: Sua porta de entrada para uma carreira de front-end

Construindo sua primeira página web: Sua porta de entrada para uma carreira de front-end

Amanda Vilela

More Decks by Amanda Vilela

Other Decks in Programming

Featured

Transcript