Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Um guia para começar no mundo Front End
Search
Juliana Negreiros
January 22, 2022
Technology
0
340
Um guia para começar no mundo Front End
Hack the FEG 2022
https://www.youtube.com/watch?v=75TSb99ZuKw
Juliana Negreiros
January 22, 2022
Tweet
Share
More Decks by Juliana Negreiros
See All by Juliana Negreiros
Desmistificando a área de TI
juunegreiros
0
69
Como otimizar seu site com lighthouse e core web vitals
juunegreiros
0
430
Introdução ao Git
juunegreiros
0
53
Webpacker e a Jornada do Heroi
juunegreiros
0
22
Como modularizar seu front-end sem depender de um framework
juunegreiros
0
87
Sopa de Letrinhas CSS | Alphabet soup CSS
juunegreiros
1
75
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
60
Carreiras em TI
juunegreiros
0
53
Javascript, um menino serelepe | Javascript, a serelepe guy
juunegreiros
0
230
Other Decks in Technology
See All in Technology
ビギナーであり続ける/beginning
ikuodanaka
2
270
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.3k
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
140
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
370
AI専用のリンターを作る #yumemi_patch
bengo4com
4
2.1k
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
4
1.6k
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
100
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
390
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
510
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
940
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
800
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
730
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Bash Introduction
62gerente
614
210k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Code Review Best Practice
trishagee
69
18k
Designing Experiences People Love
moore
142
24k
Adopting Sorbet at Scale
ufuk
77
9.4k
Automating Front-end Workflow
addyosmani
1370
200k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cult of Friendly URLs
andyhume
79
6.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
Um guia para começar no mundo do Front End Slidesgo
Engenheira Front End na Consumer Affairs e instrutora na Alura.
Co-organizadora do Rails Girls Sorocaba e do SorocabaJS. Quem sou eu? Juliana Negreiros
Propósito
CONTEÚDO Sobre você 01 Técnicas - gerais 02 Técnicas -
HTML 03 Técnicas - CSS 04 Técnicas - JS 05 Cronograma 06
Sobre você 01 Aquelas que estarão com você independente da
área que seguir.
Como você aprende?
Como você pesquisa?
Como você pergunta?
Como você lê?
Como você se comunica?
Como fazer perguntas e lidar com as respostas - Felippe
Regazio
Técnicas - Gerais 02 Aquelas que não são exatamente Front
End, mas você vai precisar em algum momento.
Como a web funciona
Front X Back
Editor de texto + terminal VS Code Atom Sublime Vim
Git
NPM
Técnicas - HTML 03 O esqueleto do seu site.
<p class="text">Esse é um parágrafo!</p> Abertura da tag Fechamento da
tag Atributo Conteúdo
<ul> <li>Item 1</li> <li>Item 2</li> </ul> Pai Filhos Hierarquia
Semântica <div></div> <span></span>
Acessibilidade
Formulários <form> <label for="nome">Nome</label> <input type="text" id="nome" /> </form>
Técnicas - CSS 04 O estilo do seu site.
UI User Interface
Propriedade Seletor Valor da propriedade .text { color: red; }
Especificidade Calculadora <p class="text emph">Esse é um parágrafo!</p> .text {
color: red; } .text.emph { color: blue; }
Box model box-sizing: border-box;
Posicionamento Position Flex Grid Display: grid; CSS Grid Garden Display:
flex; Flexbox Froggy Altera o posicionamento relativo do elemento na página
Responsividade @media (min-width: 600px) { .text { color: red; }
}
• Px • Porcentagem % • VW e VH •
Rem e em Unidades de Medida
Técnicas - JavaScript 05 O comportamento do seu site.
• Variáveis e tipos de dados • Objetos e arrays
• Operadores • Estruturas de condicão • Estruturas de repetição Lógica de Programação
Manipulação do DOM const text = document.querySelector('p') text.classList.remove('text') text.addEventListener('click', function(){
text.classList.add('clicked') })
Fetch + HTTP
JS Assíncrono
Cronograma 06 Breves ideias de como fizemos no Trampolim.
• Projetos • Tarefas trello • Jogos de lógica •
Pair programming • Inglês Cronograma
Obrigada! <3 • Starting Front End Dev Guide • Utilities
• bit.ly/guia-front