Um guia para começar no mundo Front End

Hack the FEG 2022 https://www.youtube.com/watch?v=75TSb99ZuKw

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