Torne-se um Ninja em CSS
Uma lista pública e cooperativa com uma trilha de estudos de CSS em 10 tópicos.
Guia de uso (sugestão)
- Dê um fork nessa branch.
- Coloque em negrito todos os itens que você vai estudar (não é necessário estudar tudo de uma vez, marque só os tópicos mais relevantes para você agora).
- Quando concluir um item, marque como completo adicionando um x a caixinha (
[x]).
Pré requisitos
- WWW - World Wide Web
- Browsers 🇧🇷
Como os browsers funcionam?
Diferença entre os browsers (Chrome, Firefox, Edge, Safari, etc) - Protocolos HTTP e HTTPS
- Básico de HTML
Básico de HTML e HTML semântico 🇧🇷
1. Básico de CSS
- CSS inline, interno ou externo
- Sintaxe
.classe#id- Seletores
- Herança
- Combinadores
- Prioridade (especificidade)
- Propriedades de fonte e texto
Propriedade
font,text-decoration,letter-spacinge todas de tipografia
Adicionando fontes do Google Fontes 🇧🇷
O que são Web Safe Fonts? - Unidades de texto e tamanho
Unidades como
px,rem,%,vw,pt,cm🇧🇷
Qual unidade funciona melhor para cada situação 🇧🇷 - Cores
Cores em hexadecimal, cores nomeadas, cores em RGB e RGBA, cores em HSL e HSLA 🇧🇷
- Comentários
!important@import
2. CSS Box Model
- Box-model
- margin 🇧🇷
- padding 🇧🇷
widtheheight- Elementos
blockeinline - box-sizing 🇧🇷
backgroundegradientbox-shadowoutlinePropriedade
outlinee sua importância para a acessibilidade- Filtros
- Atalhos
3. Posicionamento e layout
- Display 🇺🇸
- Flexbox 🇧🇷
- Grid 🇧🇷
visibilityQual a diferença entre
visibility: 0edisplay: nonepositionz-indexfloateclearoverflow
4. Pseudo-classes e pseudo-seletores
- Pseudo-classes 🇧🇷
- Pseudo-seletores
5. Animações e transições
- Animações
- Transições
transform@keyframe
6. Responsividade
@media-query- Design responsivo
- Textos responsivos
- Grids flexíveis e tecnologias de layout modernos
- Meta tag viewport
- Relação entre pixels e resolução das telas
7. Avançado
- Como é interpretado o CSS?
- CSSOM - A árvore do CSS
- Reset
- Como debuggar CSS?
- Diretrizes de código (guidelines)
- Função
calc() - Critical Rendering Path
- Performance
Curso gratuito de Website Performance Optimization 🇺🇸
8. SASS
- O que é SASS
Documentação 🇺🇸
Novo Método de Escrever CSS 🇧🇷
Introdução ao SASS 🇧🇷 - Mixins
- Funções
- CSS aninhado
9. Arquitetura
- BEM
- OOCSS
- SMACSS
- Atomic Design
10. Extras
- Pré-processadores
- Frameworks
Pontos positivos e negativos de usar frameworks
Conheça alguns frameworks CSS (Bootstrap 🇺🇸, Bulma 🇺🇸, Tailwind 🇺🇸, Materiaul UI 🇺🇸, Materialize CSS 🇺🇸) - Fontes de ícones
Phospor icons 🇺🇸 (Muito bom pro React), Flaticon 🇺🇸, FontAwesome 🇺🇸
- Vender-prefix
- CSS no Javascript
- Can I Use
Analise a compatibilidade das propriedades no Can I Use 🇺🇸
- Jogos para praticar CSS
Pratique seus conhecimentos de Flexbox no Flexbox Defense 🇺🇸
Coloque em prática seus conhecimentos de Flexbox no Flexbox Froggy 🇺🇸
Pratique Grid Layout no CSS Grid Garden 🇺🇸
Neste game você poderá treinar os Seletores CSS no CSS Diner 🇺🇸
Você já é mais avançado? Então treine a propriedade 3D Transforms no Unfold 🇺🇸
Pratique em como manipular animações no Carnival 🇺🇸
Use suas habilidades de CSS para replicar alvos com o código menor possível no CSS Battle 🇺🇸
Pratique seus conhecimentos de Flexbox no Flexbox Zombies 🇺🇸
Contribua na lista
Para contribuir na lista, confira primeiro o arquivo CONTRIBUTING.md.
Aproveite e deixe uma estrelinha ⭐ nesse repo!