16 Best Resources for Learning CSS

Want the secret to learning CSS?
Like Nike, just do it.
Upon advancing into the CSS and HTML world it’s similar to being a stand-up comic or writer, the more you practice, the better you’re going to get. And the work isn’t going to end, because even if you’re hired as a developer or programmer at a company, working with CSS is going to be one of your main jobs.
Therefore, it’s best to get your hands dirty and play around with code as much as possible.
However, CSS requires tools, so it’s essential to cover what you’re going to need. In addition, if you’re a complete beginner then you need at least a little bit of training to wrap your head around the idea of CSS. The best part about learning CSS is that you should actually be able to build a simple site or app within a couple hours of training, so after that, you can start tinkering on your own.
We have a solid list of 16 resources for learning CSS, some of which are online courses, while others are things like blogs, practice modules, YouTube channels and tools.
Things You Will Need for Developing Locally
As we discussed a bit above, the basis of learning CSS all depends on how much you commit to practicing yourself. Whether you’re a student learning development at a college or a person working a full time job and trying to squeeze in some coding at night, the buck falls on you to put your knowledge to practice, because using your own brain is the most important resource of all.
Since working locally is so essential, we figure it’s a wise plan to cover the bare essentials you’ll need to test out your skills at home:
01. A Text Editor
CSS all starts with .html files. It’s what most would call the backend interface, and you complete your code adjustments through any text editor you want. Most of them are free, but some are far more powerful and intuitive than others.
That said, most computers come with a regular old notepad text editor. That said, you should remember that the primary functionality that comes with these editors is that of writing.
If you’re interested in a free, more impressive alternative, go with one of these:
- Sublime text
- Atom
- Notepad++
- (Adobe) Brackets (Here are some useful extensions)
02. A Web Browser
The next step you coders generally take with local files is to save those text files to a desktop. After that, you can use the files to output and display them in a browser.
Although, most operating systems have a default browser setup, I tend to recommend Google Chrome.
Why?
It’s not a bad place to complete your testing since Google controls most of the market share. Lots of developers work through Chrome, but you’ll also have to test on all browsers eventually.
You’ll also find that Chrome Dev Tools comes in handy for testing on different displays and screen sizes. We enjoy it for completing everything from bug tests to element inspecting.
Tutorials and Online Courses
The text editor and browser serve as your pen and paper, but once you get those it’s time to explore tutorials to get your feet wet.
03. Code Academy
What do you get out of this CSS resource?
- Learn how to code interactively.
- Don’t pay a dime for your training.
- Explore articles, lesson plans and use the standard computer science curriculum.
What are some of the lessons?
- HTML and CSS
- Making a website
- Making an interactive website
- Python
- Ruby
- PHP
- Learning Rails
- Deploying a website
- SQL: Table Transformation
- SQL: Analyzing Business Metrics
- Learning Java
- Learning Git
- Much more
04. DontFearTheInternet
What do you get out of this CSS resource?
- Basic lessons for learning CSS and HTML
- Courses catered to people who don’t consider themselves coders, like print designers, photographers and fine-artists
- About eight free videos quickly explaining what people actually need to learn to get a website up and running fast
What are some of the lessons?
- HTML
- CSS
- Developer Tools
- Targeting content with classes and IDs
- An introduction to typography
05. Saylor.org
What do you get out of this CSS resource?
- An introduction to the core technologies required when using HTML and CSS
- Five units with comprehensive curriculum throughout
- A wonderful evaluation at the end of the course to see how you’ve done
- Free videos, PDF downloads and outlines
What are some of the courses?
- Using HTML and CSS for Colors, Special Characters, Images, and Multimedia Content
- Foundational Concepts for Writing HTML and CSS
- Organizing Content and Information for More Complex Websites using HTML and CSS
- Coordinating HTML/CSS-Based Websites with Other Web Technologies and Going Live with a New Website
06. Code School
What do you get out of this CSS resource?
- One free level for getting a taste of what the course is all about
- Multiple other courses that start at $19 per month
- A full review of the all the web-styling tools needed for front-end efficiency
What are some of the courses covered?
- Grooming Your Code
- Image replacement and sprites
- Protecting your layout and specificity problems
- Adding style, selectors, the cascade, and floats
- Pseudo classes and pseudo elements
07. Tuts CSS Mastery
What do you get out of this CSS resource?
- Basic courses for learning the ins and outs for building modern and stylish applications with CSS3
- Comprehensive CSS tutorials, most of which come for free
- A solid library of video courses that start at $15 per month
What are some of the courses and tutorials?
- 10 CSS3 Properties you Need to be Familiar With
- How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
- Detect CSS3 Support in Browsers with JavaScript
- Subtle CSS3 Typography that you’d Swear was Made in Photoshop
- Testing Angular Components
08. CSS Videos
What do you get out of this CSS resource?
- Easy to understand instructional videos made particularly for beginners
- Videos with a focus on CSS
- It’s supposed to have everything you need to learn in just an hour
- A ratings and comments system for seeing which of the videos are best, and also for talking with other people who are learning with you
What are some of the videos about?
- What is Cascading Style Sheets?
- CSS Selectors
- CSS Font-Family
- CSS Font-Size
Interesting Tools for CSS Practice
The tutorials discussed above are more for learning. Many of them have exercises for putting that knowledge to work, but like much of schooling, it’s only going to become useful if you really go out of your comfort zone and practice. Therefore, the following websites have modules for testing out what you’ve learned.
09. Unfolding the Box Model
What do you get out of this CSS resource?
- A list of interactive slides that explain CSS 3D Transforms
- A full screen viewer for getting the best results with your practice
- The use of your left and right arrows to quickly scroll through and understand what the lesson is all about
- This is a beautiful resource for seeing a certain type of CSS in action (It’s not as complicated as some of the items we’re about to list, but it serves as a great warm-up)
10. CSS Diner
What do you get out of this CSS resource?
- A game for guiding you through the crazy world of CSS selectors
- Punch in the right selector to move onto the next level
- As you progress you get better and also move closer to completing the game
- This is a more fun way of going through the CSS motions
- A menu is provided for jumping ahead to a section that is more suitable for your skill level
11. Ben Howdle CSS Selectors
What do you get out of this CSS resource?
- A basic, visualized version of what you’d see with CSS selectors.
- When you choose a selector from the menu, the proper items will show up to the right
- We also like this one because a description is given for each of the selectors
- It’s a marvelous way to test yourself on the right selectors, while also giving yourself a chance to see somewhat of an answer key before moving onto something more complex
12. David Shariff – Frontend Web Development Quiz
What do you get out of this CSS resource?
- A rather popular quiz that covers all sorts of development and coding knowledge
- As the front page states, this is not an easy quiz at all
- You receive a score towards the end of the quiz, so it’s a nice method for testing your knowledge after going through some of the courses we covered before
- The quiz is mainly about CSS in the first section, so you can test yourself on that only, or you can move on to the rest of the test as well
13. EnjoyCSS
What do you get out of this CSS resource?
- An interface that’s similar to CodePen
- It’s basically a fun playground for learning and testing out your own CSS
- Although some other elements are packaged into the module, the majority of it runs through CSS lessons and exercises
- It’s mainly for learning little bits of information in CSS
- You can select a CSS feature and then edit that feature in a document
Some Great YouTube Channels for Learning CSS
The CSS resource we like to suggest is the simple YouTube video. All of these are free, you can find some wonderful minds, and the discussion can give you a multitude of benefits. I like to recommend that coders subscribe to one or two of their favorite CSS YouTube channels. This way, you can get emails and check out the ones that are of interest to you. It’s not entirely crucial to look at all of the videos, but YouTube certainly provides a means of continual learning, especially when you’re bored.
14. TheNewBoston
What are some examples of videos on this channel?
- Angular 2 for Beginners – Getting Started
- XHTML and CSS Tutorial – Styling Using Classes
- XHTML and CSS Tutorial – Padding
- XHTML and CSS Tutorial – Adding Images to the Webpage
- XHTML and CSS Tutorial – Styling Unordered Lists
- XHTML and CSS Tutorial – RGB Color and Line Spacing
15. Derek Banas
What are some examples of videos on this channel?
- CSS Tricks : CSS Problems Solved
- Learn to Program 8 : Reading / Writing Files
- CSS3 Tutorial
- HTML 5 Tutorial
- How to CSS Style HTML
- CSS Menu Drop Down
16. LearnCode.academy
What are some examples of videos on this channel?
- How to create CSS Layouts – Web Development Tutorial for Beginners – with HTML & CSS
- Bootstrap Tutorial For Beginners – Responsive Design with Bootstrap 3 – Responsive HTML, CSS
- CSS Tutorial – Web Development Tutorial for Beginners
- Web Development Tutorial for Beginners – How to build webpages with HTML, CSS, Javascript
- Chrome DevTools for CSS – Better CSS Coding & CSS Debugging with Developer Tools
Conclusion
Seems pretty simple, right?
Well, it’s not all that simple, but you’ll soon find that learning CSS is not only rewarding and fun, but not that intimidating at all. Once you find the right tools, resources and courses for learning and practicing CSS, you should have no problem at all getting hooked!
If you have any questions about the best resources for learning CSS, feel free to let us know in the comments section below.
Leave a Reply