Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Um guia para começar no mundo Front End

Um guia para começar no mundo Front End

3e4b321cfe49136ead7cbfcb5d45a8f0?s=128

Juliana Negreiros

January 22, 2022
Tweet

More Decks by Juliana Negreiros

Other Decks in Technology

Transcript

  1. Um guia para começar no mundo do Front End Slidesgo

  2. Engenheira Front End na Consumer Affairs e instrutora na Alura.

    Co-organizadora do Rails Girls Sorocaba e do SorocabaJS. Quem sou eu? Juliana Negreiros
  3. Propósito

  4. CONTEÚDO Sobre você 01 Técnicas - gerais 02 Técnicas -

    HTML 03 Técnicas - CSS 04 Técnicas - JS 05 Cronograma 06
  5. Sobre você 01 Aquelas que estarão com você independente da

    área que seguir.
  6. Como você aprende?

  7. Como você pesquisa?

  8. Como você pergunta?

  9. Como você lê?

  10. Como você se comunica?

  11. Como fazer perguntas e lidar com as respostas - Felippe

    Regazio
  12. Técnicas - Gerais 02 Aquelas que não são exatamente Front

    End, mas você vai precisar em algum momento.
  13. Como a web funciona

  14. Front X Back

  15. Editor de texto + terminal VS Code Atom Sublime Vim

  16. Git

  17. NPM

  18. Técnicas - HTML 03 O esqueleto do seu site.

  19. <p class="text">Esse é um parágrafo!</p> Abertura da tag Fechamento da

    tag Atributo Conteúdo
  20. <ul> <li>Item 1</li> <li>Item 2</li> </ul> Pai Filhos Hierarquia

  21. Semântica <div></div> <span></span>

  22. Acessibilidade

  23. Formulários <form> <label for="nome">Nome</label> <input type="text" id="nome" /> </form>

  24. Técnicas - CSS 04 O estilo do seu site.

  25. UI User Interface

  26. Propriedade Seletor Valor da propriedade .text { color: red; }

  27. Especificidade Calculadora <p class="text emph">Esse é um parágrafo!</p> .text {

    color: red; } .text.emph { color: blue; }
  28. Box model box-sizing: border-box;

  29. Posicionamento Position Flex Grid Display: grid; CSS Grid Garden Display:

    flex; Flexbox Froggy Altera o posicionamento relativo do elemento na página
  30. Responsividade @media (min-width: 600px) { .text { color: red; }

    }
  31. • Px • Porcentagem % • VW e VH •

    Rem e em Unidades de Medida
  32. Técnicas - JavaScript 05 O comportamento do seu site.

  33. • Variáveis e tipos de dados • Objetos e arrays

    • Operadores • Estruturas de condicão • Estruturas de repetição Lógica de Programação
  34. Manipulação do DOM const text = document.querySelector('p') text.classList.remove('text') text.addEventListener('click', function(){

    text.classList.add('clicked') })
  35. Fetch + HTTP

  36. JS Assíncrono

  37. Cronograma 06 Breves ideias de como fizemos no Trampolim.

  38. • Projetos • Tarefas trello • Jogos de lógica •

    Pair programming • Inglês Cronograma
  39. Obrigada! <3 • Starting Front End Dev Guide • Utilities

    • bit.ly/guia-front