Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

O que é front-end? 01

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

HTML Define o significado e a estrutura do conteúdo da web, independente da sua apresentação visual. Principais tags: ● Texto:

,

,

,

● Imagem: ● Estrutura: , , ● Listas:

    ,
      ,

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

atenção 👁👁

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Estrutura Título da página conteúdo da página

Slide 14

Slide 14 text

Conteúdo: cabeçalho

Seu Nome

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

Slide 15

Slide 15 text

Conteúdo: projetos

Projetos Recentes

  • Título

    Descrição

    Link
  • Título

    Descrição

    Link

Slide 16

Slide 16 text

Conteúdo: rodapé

Contato

Slide 17

Slide 17 text

Vamos estilizar

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Margin e Padding conteúdo padding margin

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Próximos passos 03 E agora?

Slide 25

Slide 25 text

continue praticando

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

atualize-se

Slide 32

Slide 32 text

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!!

Slide 33

Slide 33 text

Perguntas e respostas 04

Slide 34

Slide 34 text

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