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
54
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
76
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
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
110
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
440
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
1
380
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
130
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
390
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
790
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
240
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
170
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
340
KotlinConf 2025_イベントレポート
sony
1
130
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
KATA
mclloyd
32
14k
The Language of Interfaces
destraynor
161
25k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Code Review Best Practice
trishagee
70
19k
GraphQLとの向き合い方2022年版
quramy
49
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Gamification - CAS2011
davidbonilla
81
5.4k
How to Ace a Technical Interview
jacobian
279
23k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
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