Uma lista pública e cooperativa com uma trilha de estudos de CSS em 10 tópicos.
- WWW - World Wide Web
O que é a internet?
- 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 🇧🇷
- CSS inline, interno ou externo
- Sintaxe
-
.class
e#id
- Seletores
- Herança
Estilos herdados
- 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
Forma correta de escrever comentários no CSS
-
!important
Aprender o que faz e porque devemos evitar usar
-
@import
- Box-model
O que é CSS box-model?
-
margin
-
padding
-
width
eheight
- Elementos
block
einline
-
box-sizing
-
background
egradient
-
box-shadow
-
outline
Propriedade
outline
e sua importância para a acessibilidade
- Filtros
- Atalhos
-
display
- Flexbox
- Grid
-
visibility
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 🇺🇸
- 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
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
Para contribuir na lista, confira primeiro o arquivo CONTRIBUTING.md.
Aproveite e deixe uma estrelinha ⭐ nesse repo!