Roadmap Frontend

By Fernanda Kipper

inspecionar (F12)
O que é domínio? Protocolo HTTP

Roadmap Frontend body e html

Internet Como carregam os CORS
O que é DNS? Navegadores dados dos sites
Esse roadmap tem o objetivo de fornecer um
passo a passo para auxiliar no seu aprendizado div, section e article
do básico ao avançado em Frontend. Nele, reuni
os principais conceitos e tecnologias que utilizo
no meu dia-a-dia como desenvolvedora Frontend. H1, H2, H3, H4
SEO
DOM HTML Semântico
Legenda
p, img, a, link
Acessibilidade
HTML
outras Tags
Indispensável

Minhas sugestões
displays RGB - RGBA - HEX
monospace
Aprofundamento Cores
Posicionar elementos
positions Diferentes font family serif
Pré-requisito!!
Espaçamentos Formatar texto
Considero super importante! Propriedades prefixo sans-serif
font
margin

Saiba mais padding Unidades de medida Responsividade media queries

CSS
3 Dicas para Devs melhorarem a impleme... border Seletores Tamanho elementos mobile first
Em algum momento na sua trajetória de desenvol...
nanda-kipper.medium.com

Como o React JS funciona? Pixel, viewport, rem demais propriedades width, height
Uma dúvida muito comum entre nós desenvolved...
nanda-kipper.medium.com

Escrevendo seu primeiro teste para sua ap... class, id

Quantas vezes você não criou sua aplicação...
nanda-kipper.medium.com
lógica de programação

first/last-child
Testes unitários Frontend - Como Mockar...
Olá Pessoal! Nesse post eu vou explicar algumas...
dev.to
Hierarquia de seletores

Me siga no instagram para não perder mais

conteúdos!

https://www.instagram.com/kipper.dev/ JS CORS em JS

Selecionar elementos async & await

var x let x const sintaxe básica

window & document fetch API

Atualizar atributos object

JSON
Atualizar valores dentro Manipulando a DOM
de elementos
INTL - Formatação de
localStorage, dados
sessionStorage
Eventos da DOM

Sass
CSS Preprocesssors Quais as vantagens?
Postcss

Less

merge branches

commit repositórios
git
push Padrões de commit husky

pull

Angular

Escolha um baseado em preferência ou

O que resolve? SPAs Vue tendências do mercado, no futuro você
irá aprender outros, não se apegue
muito a escolha.
React

Svelte
Escolheu um?

Data fetching Web components

frameworks
Roteamento (Rotas) Compartihar estados
Aprenda os conceitos gerais e como aplicar no framework escolhido

Gerenciar estados
Efeitos colaterais

Jest
Testes
react-testing-library

Cypress

Chakra UI Styled Componets

CSS in JS
Material UI

Tailwind

Declarative UI

SSR SSG

Soluções e problemas

Gatsby Next

Continue aprendendo!