BiancaPereira / ninja-em-css

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 que é 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 🇧🇷
• 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 🇧🇷

• ATOMIC DESIGNER

[Front-End] Arquitetura CSS - Criando Design Atômico 🇧🇷

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 🇺🇸, Materiaul UI us, Materialize CSS us)

• Fontes de ícones

Phospor icons 🇺🇸 (Muito bom pro react), Flaticon 🇺🇸, FontAwesome 🇺🇸

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