zatzk / ninja-em-css

Uma lista pública e cooperativa com uma trilha de estudos de CSS em 10 tópicos.

Torne-se um Ninja em CSS

Uma lista pública e cooperativa com uma trilha de estudos de CSS em 10 tópicos.

---

Pré requisitos

• WWW - World Wide Web

O qe é a internet?

• Browsers 🇧🇷

Como os browsers funcionam?
Diferença entre os browsers (Chrome, Firefox, Edge, Safari, etc)

• Protocolos HTTP e HTTPS

How HTTPS works? 🇧🇷

• Básico de HTML

Básico de HTML e HTML semântico 🇧🇷

---

1. Básico de CSS

• CSS inline, interno ou externo

Incluindo CSS na página 🇧🇷

• Sintaxe

Sintaxe do CSS 🇧🇷

• .class e #id

Qual a diferença entre CLASS e ID? 🇧🇷

• Seletores

Seletores básicos 🇧🇷

• Herança

Estilos herdados 🇧🇷

• Combinadores

Tipos de combinadores 🇧🇷

• Prioridade (especificidade)

Entendendo especificidade em CSS 🇧🇷

• 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

Qual é a diferença do @import do CSS e do link do HTML? 🇧🇷

---

2. CSS Box Model

• Box-model

O que é CSS 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 e height
• Elementos block e inline
• box-sizing
• background e gradient
• box-shadow
• outline

Propriedade outline e sua importância para a acessibilidade

• Filtros
• Atalhos

Propriedades Atalho 🇧🇷

---

3. Posicionamento e layout

• display
• Flexbox
• Grid🇧🇷
• visibility

Qual a diferença entre visibility: 0 e display: none

• position
• z-index
• float e clear

Estruturando e flutuando elementos 🇧🇷

• overflow

Cuidando dos limites de conteúdo em caixas 🇧🇷

---

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

Mixins usados frequentemente
Exemplos práticos

• Funções

Introdução as Funções Nativas do SASS

• CSS aninhado

Aninhamento no SASS

---

9. Arquitetura

• BEM

Metodologia BEM para criar código legível 🇧🇷

• OOCSS

Organizando Seu Codigo Css Parte 01 🇧🇷

• SMACSS

Organizando Seu Codigo Css Parte 02 🇧🇷

---

10. Extras

• Pré-processadores

O que são pré-processadores CSS e por quê usar? 🇧🇷

• Frameworks

Pontos positivos e negativos de usar frameworks
Conheça alguns frameworks CSS (Bootstrap 🇺🇸, Bulma 🇺🇸, Tailwind 🇺🇸)

• Fontes de ícones
• Vender-prefix
• CSS no Javascript

Styled Components 🇺🇸

• 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!