Cascading Style Sheets. for preprocessors, see CSS - preprocessors
Read:
- Start Here! at the bottom of this page
- badcss
- CSS zen garden
- htmldog - use next at bottom of page to navigate
- tutorialspoint - CSS Tutorial section on the sidebar
Watch:
- youtube.com - CSS in 5 minutes - no notes, just watch
- youtube.com - CSS in 20 minutes
- youtube.com - how to not suck at colors
Do:
- CSS Diner
game - freecodecamp - Basic CSS
- codecademy - learn basic CSS
Read:
- MDN CSS basics - Mozilla Developer Network
- shayhowe basics - don't worry about the html too much
- tutorialspoint - CSS Advanced section on the sidebar
- htmldog - use next at bottom of page to navigate
Watch:
- youtube.com CSS crash course
- youtube.com - CSS in 5 minutes - pause and take notes from what you've learned so far
- youtube.com - tips on responsive layouts
- youtube.com - tips on designing websites
Do:
- flexbox froggy
game - flexbox defense
game - freecodecamp Applied Visual Design
- freecodecamp Applied Accessibility
- freecodecamp - CSS flexbox
- codecademy - learn intermediate CSS
Read:
- shayhowe - advanced - don't worry about html or jquery
- /learn - preprocessors - start working on this one
- tutorialspoint - CSS_3_ Tutorial section on the sidebar
Watch:
- unfold - CSS transforms presentation, use arrow keys to navigate
- youtube.com traversy crash course in CSS grid
- youtube.com CSS positioning
- youtube.com CSS grid complete guide - play in background and listen
- youtube.com - design a website using Figma
Do:
- CSS Surgeon
game - grid garden
game - flexbox zombies
game - freecodecamp - CSS grid
Read:
- htmldog - use next at bottom of page to navigate
Watch:
- youtube.com - CSS in 5 minutes - if you don't recognize something, go search for it
- youtube.com what is UX/UI
- youtube.com intro to UX/UI
Do:
- CSS speedrun
game - guess CSS
game - freecodecamp responsive design principles
- freecodecamp responsive design projects
Welcome to CSS! Above are plenty of links to help you get started. Everything in this repository is free, and you should not have to pay for anything.
Go ahead and read through these links: ※ - my personal preference
- online playgrounds: try code online in the browser
- editors: do code locally on your machine
- resources when lost:
- do not trust w3schools.com, as I have found their information to be wrong on a few occasions
- stackOverflow is a trusted source, but pay attention to answer dates
- MDN - Mozilla Developer Network
- css-irl
- massive CSS cheatsheet
- CSS-tricks
- linter for checking your styles for errors
- caniuse - not all browsers support everything
- resources to make things with:
- 30 selectors to know - great cheatsheet
- icons
- lineawesome ※
- fontawesome - hard to get started without an account
- fonts
- matcherator - upload an image of a font, it will find matches
- google fonts my favorite is Montserrat :)
- figma - visually design layouts without worrying about code
Is there an error or something cool missing? Send an issue!