When it comes to learning and remembering CSS, there’s no reason why you need to commit every property and class to memory when you can quickly look up anything you need to know in just a few seconds.
But while search engines (read: Google) offer a quick way to search for CSS answers, it can be difficult to know which ones are actually helpful and, more importantly, up-to-date.
In our recent member survey we asked you what your biggest hurdle is in learning WordPress and an overwhelming number of you said you wanted to level up your coding skills and become more proficient in HTML, CSS and PHP.
With that in mind, and to help you conquer CSS, we’ve curated this selection of some of our favorite resources for learning and referencing CSS and related languages and preprocessors, such as Bootstrap, SASS and LESS. So browse, bookmark and enjoy learning CSS!
CSS, SASS, LESS, Bootstrap
The resources are grouped into seven sections:
- CSS – It’s a styling language used to add color and style to your site. While it’s not technically a programming language, it’s widely used all over the internet and is included in other languages such as Bootstrap.
- SASS – This is a stylesheet language that’s an extension of CSS. It’s officially called a preprocessor and is designed to make CSS styles easy to write and organize.
- LESS – Similar to SASS, LESS is another stylesheet language and preprocessor that’s designed to extend the functionality of CSS by adding new features such as variables and mixins.
- People of Note – There are many great people to follow on Twitter who that share fantastic CSS tips and tricks. Here are some of the best to follow and tweet.
- Must-Have Resources – There are many sites that are well worth perusing at your leisure with tons of information to keep you up-to-date as CSS changes, as well as to give you a place to go to ask questions and get help. Also included are sites with a huge selection of tutorials as well as courses on CSS and all programming languages.
No matter what your learning style, you should be able to find resources that work for you with a combination of written lessons, tutorials and video courses.
Here’s the thing, there are truck loads of resources out there and this list is by no means exhaustive. Since this list can’t go on forever, there are likely some of your favorites that aren’t included. If you think of a link we would be remised if we left it out, feel free to post it in the comments below.
If you’re new to CSS, it may seem like an overwhelming language to learn, but once you get into it, it’s quite manageable and pretty easy.
For the seasoned pro, it can be handy to have a list of all the selectors and properties since there are so many to remember and especially since CSS is a large part of Bootstrap and web design in general.
If you want to start learning about CSS or you want to brush up on your existing skills, here are some great resources:
For those who are fans of learning by doing, these are for you:
If you learn best in a structured environment, here are some free and premium courses:
There are many great reads out there that are a great and affordable way to learn just about everything you need to know. If you grab one or more of the books on this list, they also double as a quick reference at arm’s length.
Video tutorials can be helpful since you’re guided by an expert step-by-step. Sometimes it’s just easier to have visuals. Here are some great video tutorials and courses on YouTube worth exploring:
If you’re looking for sites you can quickly reference when you’re stuck, here are some favorites:
Simplifying your CSS with SASS means you can style your site faster. Here’s several guides to help you get there:
Here are some tutorials to practice what you learn:
Seeing an expert show you the ropes through video is the next best thing to having them right in the room with you. Here’s some of the best SASS video tutorials and courses on YouTube:
Guides and tutorials are fantastic, but if you need more information and guidance, a course may be more your speed:
SASS is generally more popular, but there are lots of diehard LESS fans out there.
These helpful guides and tutorials should provide you with all the info you need to learn LESS from scratch or brush up on your skills. Either way, you should be able to decide which side of the fence you’re on.
There may not be many guides and tutorials in this list, but don’t let size fool you because these resources are worth their weight, er, file size in gold.
They include everything you need to know to start creating responsive sites with Bootstrap:
If you need a detailed guide that’s close by at all times, these books are great choices:
If you find learning through articles and books isn’t as helpful as having a teacher guide you through the material, here are some courses you may find helpful:
Here are some great video tutorials and courses on Bootstrap created by talented people on YouTube:
People of Note
There are so many wonderful web developers out there, it’s difficult to pick just a handful. That’s why I squeezed in a few more since following the right people on Twitter can bring you a constant stream of useful information.
- Sara Soueidan – Front-end developer, writer and speaker. Author of the Codrops CSS Reference.
- Ana Tudor – Developer and designer who also writes CSS posts for many sites such as CSS-Tricks.
- Snook – Designer, developer, writer and speaker who also wrote SMACSS.
- Codrops – Dedicated to providing useful tutorials, insightful articles, creative inspiration and free resources for web designers and developers.
- CSS-Tricks – A curated web design community surrounding CSS.
- Lea Verou – HCI researcher, author of CSS Secrets (listed here) and on staff at the W3C.
- Harry Roberts – Speaker, author and consultant front-end architect for Google, UN, Etsy, Kickstarter, BBC and more.
- Nicole Sullivan – Web developer, principal engineer and engineering manager.
- Peter-Paul Koch – Mobile platform strategist, consultant, writer, conference organizer and speaker, blogger, trainer and browser compatibility expert.
In the world of the Internet, things change so fast before you can blink twice. That’s why I’ve compiled a special list of sites for you to bookmark so you can stay up-to-date on the latest and greatest.
Where to Learn Even More
When you’re ready to learn more and take the next step, you have many choices. These sites are all fantastic places to enroll in affordable courses to advance your knowledge and maybe even your career.
- Treehouse – Quality courses on web design and development for individuals and businesses that are trusted by top companies.
- Lynda.com – The creator of LinkedIn founded this tech education site with courses ranging from photography and music to web development and business. Since top companies are already on board, it shouldn’t be difficult to find a job after completing courses here.
- SitePoint – There are tons of great guides for CSS and beyond here. It’s practically a one stop shop and a great reference for code.
- SitePoint Premium – Formerly called Learnable, this is the home of Sitepoint’s courses on web design and development. It’s a trusted source for learning everything you need to get started or advance in your career.
- Complete Web Developer Course (Rob Percival) – A down to earth course on Udemy for beginners on web design and development. A former teacher, Rob Percival does an excellent job making programming easy to understand.
- Codecademy HTML and CSS – This is a quality HTML and CSS course.. What sets Codecademy apart from other course sites is their courses are interactive and they consider themselves to be modern in approach in comparison to the traditional school system in the US.
- Coursera – There are free web development and design courses available as well as affordable course bundles created by real universities such as Brown, Harvard, Standford and many more. For a fee, you can enroll in a course bundle and receive a certificate upon completion. While it’s not an equivalent to a degree, it still looks great on a resume since your education would be from a highly trusted and recognized source.
- Udacity – Google created this education site that provides both free and premium courses. You can also enroll for their nanodegree programs in web development and programming that are almost as good as a degree since it’s enough to qualify for a high-paying job at top tech companies around the world including Google.
- CodePen – A community for front-end developers to showcase their work, get feedback and build a test case for bug testing. There are also so many really cool examples of what CSS can do, it’s downright inspirational.
“Pobody’s Nerfect.” Sometimes you may find you need an extra hand when some code doesn’t work out the way you had hoped.
Luckily, there are a couple excellent sites you can go to for peer advice and help for free:
And if you’re a WPMU DEV, don’t forget you can always ask our awesome support team for help with any CSS conundrums.
Why 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch)
Learn how to use Google PageSpeed Insights to set realistic goals, improve site speed, and why aiming for a perfect 100 is the WRONG goal.