[TRILHA] CSS3

[LuizFernando-TC]

A issue é um local de discussão, chame novas pessoas para ajudar a criar essa Trilha de Ensino. Utilize os campos abaixo como uma forma de se questionar e ajudar a iniciar uma discussão.

Discussed in https://github.com/codaqui/institucional/discussions/71

Conteúdos Abordados na Nova Trilha de CSS3

1. Apresentação
2. Ambiente de desenvolvimento
3. Animações e Transições
4. Fontes
5. Layout
6. Imagens
7. Listas
8. Seletores

Documentos (Guias):

• https://cssguidelin.es/
• https://www.w3schools.com/css/
• https://www.w3.org/
• https://developer.mozilla.org/en-US/docs/Web/CSS

Referências

Profissionais

• Gustavo Guanabara (https://github.com/gustavoguanabara https://www.cursoemvideo.com/)

Bibliográficas

• https://devdocs.io/

[LuizFernando-TC]

Discussed in: https://github.com/codaqui/institucional/discussions/71

[endersonmenezes]

@LuizFernando-TC to chamando um pessoal que entende de CSS para jogar aqui pra gente alguns conceitos que possam ser interessantes, influenciadores e etc. Vai ser interessante a gente pegar tudo que jogarem aqui e fazer uma curadoria e organização do conteúdo. Vamos aguardar um tempinho até o pessoal contribuir.

[ricardomaleixo]

Opa, eu Recomendo a documentação oficial do HTML, ela é bem complexa, mas vale pelo menos conhecer. https://html.spec.whatwg.org/multipage/

o RoadMap é um bom guia visual. https://roadmap.sh/frontend

Além da W3C. https://www.w3.org/ https://www.w3schools.com/html/ https://www.w3schools.com/css/

Também aqui. https://developer.mozilla.org/en-US/

CSS: https://cssguidelin.es/

[endersonmenezes]

@LuizFernando-TC filtra desses materiais os tópicos que você sugeriu por enquanto e pode editar no primeiro comentário. Vamos ver como fica a trilha =]

[rioribeirods]

Acho importante ter um tópico só para seletores, notei recentemente que quem é fera no CSS sabe usar muito bem seletores. Inclusive é uma boa deixa para falar sobre do novo (e potente) :has() no CSS. Tem só 7 dias que a MDN colocou na documentação.

[endersonmenezes]

@LuizFernando-TC acho que já tem um material pra começar, bora abrir um PR? Quer que eu te ajude no modelo?

[gustavoquinalha]

oi, fiz uma lista aqui rapidão de algumas coisas pra estudar sobre css. @endersonmenezes se puder criar algum documento eu posso ir adicionando mais coisas com o tempo

Links

• https://www.w3schools.com/css/ (O MELHOR)
• https://css-tricks.com/ e https://twitter.com/css
• https://cssguidelin.es/
• https://www.bram.us/ e https://twitter.com/bramusblog
• https://twitter.com/CSSInRealLife
• https://www.notion.so/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2 (CSS TRICKS)
• https://100dayscss.com/
• https://github.com/gustavoquinalha/ui-awesome-list
• https://github.com/streamich/awesome-styleguides
• https://github.com/sturobson/Awesome-Design-Tokens
• https://github.com/willianjusten/awesome-svg

Inicio

• Atomic Design
• Metodologias (OOCSS, BEM, RSCSS e ITCSS)
• Pré-processadores
• Semântica
• Nomenclatura
• Herança
• Organização de código
• Padronização de código
• Seletores
• Acessibilidade

Cores

• Background
• Color
• Gradient
• Shadow

Tipografia

• Estilização de fonts (font, sizes, letter spacing, line height…)
• Listas (ul, ol)
• Icones

Box model

• Box sizing
• Margin
• Padding
• Displays
• Overflows
• Positions
• ::after e ::before

Responsividade

• Media Query
• Float
• Flexbox
• CSS Grid
• Self align

Animações

• Transitions
• Keyframes
• Animation
• SVG

Complementos

• Devtools
• Storybook
• Styleguide
• Design system
• Design tokens

Challenges

• https://css-challenges.com/
• https://cssbattle.dev/
• https://codier.io/

"We’re not designing pages, we’re designing systems of components." - Stephen Hay

[LuizFernando-TC]

@LuizFernando-TC acho que já tem um material pra começar, bora abrir um PR? Quer que eu te ajude no modelo?

Sim, Enderson. Essa trilha ficará parecida com a de Javascript ou Python?

[endersonmenezes]

Eu acho que vai acabar sendo uma união, não precisa se limitar. Tem coisas boas que fizemos na de Python e tem coisas boas na de Javascript.

[endersonmenezes]

A base da trilha já está em nosso ambiende de desenvolvimento, qualquer colaboração é bem vinda.

[LuizFernando-TC]

1. Apresentação

Links:

[LuizFernando-TC]

2. Ambiente de desenvolvimento

Links

[LuizFernando-TC]

3. Animações

Links:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

[LuizFernando-TC]

4. Fontes

Links:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide