$30 off During Our Annual Pro Sale. View Details »

Construindo sua primeira página web: Sua porta ...

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

Amanda Vilela

October 04, 2023
Tweet

More Decks by Amanda Vilela

Other Decks in Programming

Transcript

  1. Amanda Vilela ➔ +11 de experiência como frontend ➔ Gerente

    de engenharia na ConsumerAffairs ➔ Fatec Sorocaba '17
  2. O que é front-end? Criando sua primeira página Próximos passos

    e carreira Perguntas e respostas Conteúdo 01 02 03 04
  3. Como funciona a internet? Back-end Servidor + banco de dados

    HTTP Protocolo de transferência de dados Front-end Tudo que acontece no navegador
  4. 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>
  5. 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
  6. 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>
  7. 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>
  8. Background e color A cor é branca O background é

    azul color: white background: #d9cfdeff
  9. Fontes A cor é branca O background é azul font-family:

    Arial font-size: 20px font-weight: bold
  10. Roadmap técnico HTML: • Semântica CSS: • Convenções de nomenclatura

    CSS • Grid systems, css grid e flexbox • Responsividade
  11. 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
  12. Roadmap técnico JavaScript: • DOM • Testes • Design Patterns

    • Algum framework JS • Automatizar tarefas (Webpack)
  13. 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!!
  14. 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