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

No content

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:

,

,

,

● Imagem: ● Estrutura: , , ● Listas:

,
,

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 Título da página conteúdo da página

Conteúdo: cabeçalho

Seu Nome

Uma descrição bem legal e profissional de você

Conteúdo: projetos

Projetos Recentes

• Título

  Descrição

  Link

• Título

  Descrição

  Link

Conteúdo: rodapé

Contato

• Linkedin
• GitHub
• Codepen

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 :) amandavilelaalmeida@gmail.com https://amandavilela.github.io