CSS Immersion

Contents

• Knoledge
  • Basics
  • Flexbox
  • Grid
  • Transition
  • Transform
  • Animation
  • Masking
  • Colors
  • Accessibility
• Tools and useful websites
  • Color
  • Icons
  • Images
• Other stuffs
• Beyond the basics
  • MDN Web Docs - HTML, CSS and JavaScript
    • Portuguese documentation, tutorials, and references
    • English documentation, tutorials, and references (recommended)
  • Frontend Developer Roadmap
• Considerations

Knoledge

Basics

Introdução a HTML e CSS - Caelum (portuguese)

Especificidade de seletores CSS - Caelum (portuguese)

Guia de Unidades CSS - Alura (portuguese)

CSS selectors (game)

Propriedade CSS background - Maujor (portuguese)

Aplicando filtros CSS - Maujor (portuguese)

box-model e box-shadow - YouTube (portuguese)

box-shadow - FreeCodeCamp

box-sizing - YouTube (portuguese)

Flexbox

Guia Flexbox - Alura (portuguese)

Guia Flexbox - Origamid (portuguese)

Flexbox guide - CSS-Tricks

Flexbox Froggy (game)

Grid

About Grid - MDN

Grid guide - CSS-Tricks

Grid Garden (game)

Transition

Transition - MDN

CSS transitions guide - MDN

Transition - CSS-Tricks

Transform

Transform - MDN

CSS transforms guide - MDN

Transform - CSS-Tricks

CSS cubic-bezier Builder

Animation

Animatins - w3schools

Animation - MDN

@keyframes - MDN

Using CSS animations - MDN

CSS Animations tips and tricks - MDN

Masking

CSS Masking - MDN

Clipping and Masking in CSS - CSS-Tricks

Colors

Color Theory - w3schools

Harmonia das cores (portuguese)

Cores com harmonia (portuguese)

Accessibility

Novos elementos semânticos no HTML5 (portuguese)

O impacto das cores - Medium (portuguese)

Cores e Acessibilidade - Chief of Design (portuguese)

Tools and useful websites

Can I use

Color

HTML Color Codes - Color names

MDN - Color picker

Adobe Color

Coolors - Color palettes

Itmeo - Gradient colors collection

Contrast Checker

Icons

IcoMoon

Font Awesome

Materialize - Material Design icons

Material Design's icon design principles

Images

Burst - Imagens grátis (portuguese)

Life of Pix - Free high-resolution photos

Magdeleine - Hand-picked free photos

Pexels - Free stock photos and Videos

Picjumbo - Free stock photos

Pixabay - Free images

StockSnap - Free stock photos

Unsplash - Free high-resolution photos

CSS clip-path maker

Other stuffs

Turing completude (portuguese)

Generative art by Tainá Simões

Rainbow gradient background animation

Metatags - Google (portuguese)

Beyond the Basics

MDN Web Docs - HTML, CSS and JavaScript documentation, tutorials, and references

Portuguese

HTML: Linguagem de Marcação de Hipertexto

CSS: Folhas de Estilo em Cascata

JavaScript

Gráficos na Web (canvas, SVG, WebGL, WebRTC)

HTTP: Protocolo de Transferência de Hipertexto

English (recommended)

HTML: Hypertext Markup Language

CSS: Cascading Style Sheets

JavaScript

Graphics on the Web (canvas, SVG, WebGL, WebRTC)

HTTP: Hypertext Transfer Protocol

Frontend Developer Roadmap

Step by step guide to becoming a modern frontend developer, suggested by Kamran Ahmed

This roadmap cover everything that is there to learn. Don't feel overwhelmed, you don't need to learn it all in the beginning if you are just getting started.

roadmap.sh/frontend

Considerations

This link compilation first was created to self use and then restructured to help beginner developers. I hope this be useful to you. Feel free to contribute and please star my repository if you liked it.