Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Um guia para começar no mundo Front End
Juliana Negreiros
January 22, 2022
Technology
0
230
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
11
Como otimizar seu site com lighthouse e core web vitals
juunegreiros
0
330
Introdução ao Git
juunegreiros
0
18
Webpacker e a Jornada do Heroi
juunegreiros
0
9
Como modularizar seu front-end sem depender de um framework
juunegreiros
0
30
Sopa de Letrinhas CSS | Alphabet soup CSS
juunegreiros
1
57
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
38
Carreiras em TI
juunegreiros
0
34
Javascript, um menino serelepe | Javascript, a serelepe guy
juunegreiros
0
91
Other Decks in Technology
See All in Technology
Dagu | オンプレ向けワークフローエンジン(WebUI 同梱)
yohamta
0
210
A Conditional Point Diffusion-Refinement Paradigm for 3D Point Cloud Completion
takmin
0
220
プルリク作ったらデプロイされる仕組み on ECS / SRE NEXT 2022
carta_engineering
1
550
CTOのためのQAのつくりかた #scrumniigata / SigSQA How to create QA for CTOs and VPoEs
caori_t
0
340
スクラムマスターの「観察」スキルを掘り下げる / Scrum Fest Niigata 2022
ama_ch
0
820
Data Warehouse or Data Lake, which one do I choose?
ahana
0
150
OSINT/GEOINT ワークショップ 20220514 古橋資料
furuhashilab
2
320
Poolにおける足を止めないシステム基盤構築
winebarrel
3
1.1k
LIFF Deep Dive 2022
line_developers
PRO
1
750
How We Foster Reliability in Diversity
nari_ex
PRO
10
3.1k
Whats new in Android Media?
myolwin00
2
120
Graph API について
miyakemito
0
290
Featured
See All Featured
Design by the Numbers
sachag
271
17k
Robots, Beer and Maslow
schacon
152
7.1k
Become a Pro
speakerdeck
PRO
3
780
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
A Philosophy of Restraint
colly
192
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Debugging Ruby Performance
tmm1
65
10k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
450
Making the Leap to Tech Lead
cromwellryan
113
6.9k
Code Reviewing Like a Champion
maltzj
506
37k
Art, The Web, and Tiny UX
lynnandtonic
280
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