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
320
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
47
Como otimizar seu site com lighthouse e core web vitals
juunegreiros
0
420
Introdução ao Git
juunegreiros
0
34
Webpacker e a Jornada do Heroi
juunegreiros
0
18
Como modularizar seu front-end sem depender de um framework
juunegreiros
0
67
Sopa de Letrinhas CSS | Alphabet soup CSS
juunegreiros
1
69
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
48
Carreiras em TI
juunegreiros
0
47
Javascript, um menino serelepe | Javascript, a serelepe guy
juunegreiros
0
130
Other Decks in Technology
See All in Technology
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
160
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
転移学習とドメイン適応の基礎
kmatsui
2
570
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
120
Four keys改善の取り組み事例紹介
sansantech
PRO
3
230
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
4
280
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
640
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
630
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
1
380
[2024年3月版] Databricksのシステムアーキテクチャ
databricksjapan
8
1.9k
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
300
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
43
9.7k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Building an army of robots
kneath
300
41k
Optimizing for Happiness
mojombo
370
69k
The Invisible Side of Design
smashingmag
294
49k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Embracing the Ebb and Flow
colly
79
4.1k
Large-scale JavaScript Application Architecture
addyosmani
503
110k
Ruby is Unlike a Banana
tanoku
96
10k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Done Done
chrislema
178
15k
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
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