Uma lista pública e cooperativa com uma trilha de estudos de CSS em 10 tópicos.
- WWW - World Wide Web
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 🇧🇷
- CSS inline, interno ou externo
- Sintaxe
-
.class
e#id
- Seletores
- Herança
- Combinadores
- Prioridade (especificidade)
- Propriedades de fonte e texto
Propriedade
font
,text-decoration
,letter-spacing
e 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
Aprender o que faz e porque devemos evitar usar
-
@import
- Box-model
-
margin
(https://developer.mozilla.org/pt-BR/docs/Web/CSS/margin) -
padding
(https://developer.mozilla.org/pt-BR/docs/Web/CSS/padding) -
width
eheight
- Elementos
block
einline
- box-sizing
-
background
egradient
-
box-shadow
-
outline
Propriedade
outline
e sua importância para a acessibilidade
- Filtros
- Atalhos
Qual a diferença entre
visibility: 0
edisplay: none
-
position
-
z-index
-
float
eclear
-
overflow
- Pseudo-classes
- Pseudo-seletores
- Animações
- Transições
-
transform
-
@keyframe
-
@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
- 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 🇺🇸
- O que é SASS
- Mixins
- Funções
- CSS aninhado
- BEM
- OOCSS
- SMACSS
- Pré-processadores
- Frameworks
Pontos positivos e negativos de usar frameworks
Conheça alguns frameworks CSS (Bootstrap 🇺🇸, Bulma 🇺🇸, Tailwind 🇺🇸)
- Fontes de ícones
- 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
Para contribuir na lista, confira primeiro o arquivo CONTRIBUTING.md.
Aproveite e deixe uma estrelinha ⭐ nesse repo!