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
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
140
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.4k
モバイル界のMCPを考える
naoto33
0
310
解析の定理証明実践@Lean 4
dec9ue
1
190
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
0
250
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
920
asken AI勉強会(Android)
tadashi_sato
0
140
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
200
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
500
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
320
How Community Opened Global Doors
hiroramos4
PRO
1
130
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
320
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A Tale of Four Properties
chriscoyier
160
23k
RailsConf 2023
tenderlove
30
1.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
Practical Orchestrator
shlominoach
188
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
The Language of Interfaces
destraynor
158
25k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
BBQ
matthewcrist
89
9.7k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
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