A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Resources

[ad_1]

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.
  • Bootstrap – A front-end, open source framework designed to create websites with a basis of HTML, CSS and Javascript. Every site created using Bootstrap is responsive across mobile devices.
  • 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.

CSS Resources

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:

  • CSS Basics (W3C Wiki)
  • CSS Tutorial (W3Schools)
  • Hugo Giraudel’s Articles on CSS, SCSS and SASS (SitePoint)
  • Getting started with CSS (MDN, Mozilla)
  • Headers Footers Columns and Templates (W3C Wiki)
  • CSS Tutorial, 16 Lessons (HTML.net)
  • Beginner’s Guide to CSS (Friendly Bit)
  • Complete CSS Guide (Westciv)
  • Effective Use of Style Sheets (Nielsen Norman Group)
  • Learn All About CSS (CSS Tutorial.net)
  • CSS Beginner Tutorial (HTML Dog)

For those who are fans of learning by doing, these are for you:

  • CSS3 Demos (MDN, Mozilla)
  • Experiments with Cascading Style Sheets (CSS Play)
  • Adding Social Media Icons to WordPress with CSS Sprites (WPMU DEV)
  • Printing a Book with CSS (A List Apart)
  • Using CSS3 Media Queries for a Responsive WordPress Design (WPMU DEV)
  • Starting with HTML and CSS (W3C)
  • Pushing CSS to the Limits (CSS/Exp)
  • The Beauty of CSS Design, Examples (CSS Zen Garden)
  • Score Quick Style Wins with These CSS Animation Tools for WordPress (WPMU DEV)
  • Making Headlines With CSS (Webreference)
  • The CSS Anarchist’s Cookbook (O’Reilly Web Dev Center)
  • List of CSS Tutorials (Lynda.com)
  • CSS Beginner, Intermediate and Advanced Tutorials (HTML Dog)
  • Adding Custom Fonts to WordPress with @font-face and CSS3 (WPMU DEV)
  • CSS Tutorial (Tutorials Point)
  • Learn to Code HTML and CSS (Shay Howe)
  • Advanced HTML and CSS (Shay Howe)
  • How to Add Custom CSS to Your WordPress Site: 3 Methods Explored (WPMU DEV)
  • Getting started with Sassy CSS (SCSS) (Mikkel Rickys)
  • Make Your Images Pop with Super Easy and Sexy CSS Styling (WPMU DEV)
  • How to Customize the WordPress Text Editor to Look and Function Like Your Front-End (WPMU DEV)
  • Get Started With the Compass CSS Framework (Mashable)
  • Improving the Look and Feel of Your Author Comments (WPMU DEV)
  • How to Add Icons to Custom WordPress Menus – Without Plugins (WPMU DEV)
  • How to Completely Customize the WordPress Login Page (WPMU DEV)
  • Learn CSS Layout (Learn Layout)
  • How to Style External Links in WordPress Like Wikipedia (WPMU DEV)
  • Add a Dynamic “Back to Top” Button to Your WordPress Site (WPMU DEV)

If you learn best in a structured environment, here are some free and premium courses:

  • Self-Paced Web Design Courses, HTML and CSS (Westciv)
  • CSS Courses and Workshops (Team Treehouse)
  • 30 Days to Learn HTML and CSS (Tuts+)
  • CSS and CSS3 Beginners Crash Course (Robin Nixon)
  • Intro to HTML and CSS: Not Your Typical Intro to Web Dev (Udacity)

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.

  • CSS Secrets: Better Solutions to Everyday Web Design Problems (Lea Verou)
  • Learn to Code HTML and CSS: Develop and Style Websites (Shay Howe)
  • HTML and CSS: Design and Build Websites (Jon Duckett)
  • CSS3: The Missing Manual (David Sawyer McFarland)
  • Learn CSS in One Day and Learn It Well, Includes HTML5 (Jamie Chan)
  • CSS Master (Tiffany B Brown)
  • CSS3 Foundations (Ian Lunn)
  • CSS: The Definitive Guide (Eric A. Meyer)
  • CSS: The Smart and Efficient Way to learning CSS in Two Hours (Simon Bedford)
  • The Book of CSS3: A Developer’s Guide to the Future of Web Design (Peter Gasston)
  • Responsive Web Design with HTML5 and CSS3 (Ben Frain)
  • HTML5 and CSS3 For Dummies (David Karlins)
  • CSS Mastery: Advanced Web Standards Solutions (Simon Collison)
  • The Zen of CSS Design: Visual Enlightenment for the Web (Dave Shea and Molly E. Holzschlag)

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:

  • How to convert HTML/CSS page to WordPress Theme (Chris Lam)
  • CSS Tutorial: Build A Homepage (Elias Sarantopoulos)
  • CSS Tutorial for Beginners – part 1 of 4 – Applying Styles, Part Two – Selectors, Part Three – Box Model and Part Four – Positioning (tutor4u)
  • How to Master CSS (CodeGeek)
  • HTML and CSS Tutorial Create Your Own Complete Website (Antu Tunga)
  • [FULL] HTML5 CSS3 fundamentals 7 hours (I && Developer)
  • Learn CSS in 12 Minutes (Jake Wright)
  • HTML & CSS Tutorial: Divisions, IDs and Classes (DevHQLessons)
  • Create a Responsive Website Using HTML5 and CSS3 (1stWebDesigner)
  • Basic HTML and CSS Website for Beginners (Drew Ryan)
  • How To Make A Website Start To Finish – Responsive HTML5/CSS3, Image Slider & Drop Down Menu (Drew Ryan)
  • Learn HTML and CSS Course (Coder’s Guide)
  • Learn CSS (DevTips)
  • CSS Positioning, Floats, Clears and More (DevTips)
  • CSS3 Tutorials (LevelUpTuts)
  • How to Make Your CSS Awesome with Bourbon, Neat, Bitters and Refills! (Codecourse)
  • CSS3 Secrets: 10 things you might not know about CSS3 (Lea Verou)

If you’re looking for sites you can quickly reference when you’re stuck, here are some favorites:

  • Selectors and Properties List (CSS-Tricks)
  • CSS Reference (MDN, Mozilla)
  • CSS Validation Service (W3C)
  • CSS Reference (SitePoint)
  • Properties List (W3C Wiki)
  • Selectors List (W3C Wiki)
  • Properties Index (Meiert)
  • Using CSS as a Diagnostic Tool (O’Reilly Web Dev Center)

SASS Resources

Simplyfying your CSS with SASS means you can style your site faster. Here’s several guides to help you get there:

  • SASS Language Guide: Basics (SASS official site)
  • Mastering SASS (Tuts+)
  • SASS Snippets (CSS-Tricks)
  • SASS Style Guide (CSS-Tricks)
  • What’s the Difference Between SASS and SCSS? (SitePoint)
  • Learning SASS: A Beginner’s Guide to SASS (1st Web Designer)
  • The Absolute Beginner’s Guide to SASS (Andrew Chalkley)
  • Using Compass and SASS for CSS in your Next Project (Tuts+)
  • A Developer’s Guide to Learning SASS in 20 Minutes or Less (Josh Pollock)
  • SASS: Mixin or Placeholder? (Hugo Giraudel)
  • Useful SASS Mixin Snippets (Web Creator Box)

Here are some tutorials to practice what you learn:

  • Beginner Guides and Tutorials (The SASS Way)
  • Intermediate Guides and Tutorials (The SASS Way)
  • Advanced Guides and Tutorials (The SASS Way)
  • SASS Tutorials (Level Up Tuts)
  • The SASS and Compass Tutorial for Absolute Beginners (Zing Design)

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:

  • SASS Tutorials (LevelUpTuts)
  • Responsive CSS with SASS and Compass (Free Courses HTML CSS)
  • SASS and SCSS Tutorial for Beginners (thenewboston)
  • Compass Tutorials (LevelUpTuts)
  • Rush through SASS for CSS in Seven Minutes (JREAM)
  • Converting CSS to SASS (Treehouse)
  • What is SASS and Why You Should Use It? (Justin Meyers)

Guides and tutorials are fantastic, but if you need more information and guidance, a course may be more your speed:

  • Assembling SASS (Code School)
  • Responsive CSS with SASS and Compass (Ray Villalobos)
  • Step by Step SASS (Lisa Catalano)
  • CSS with LESS and SASS (Joe Marini)

LESS Resources

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.

  • CSS with LESS and SASS Course (FEDevelopment Tutorials)
  • SASS or LESS? What Should You Use? (DevTips)
  • How To Speed Up Your Web Development Process Using LESS (SitePoint)
  • LESS – The Basics (Peter Witham)
  • Get Into LESS: The Programmable Stylesheet Language (Daniel Pataki)
  • Don’t Read this LESS CSS Tutorial (Highly Addictive) (@verekia’s blog)
  • Getting Started with LESS (Nicholas Cerminara)
  • LESS CSS – Beginner’s Guide (Hongkiat)
  • Learn LESS in 10 Minutes (or Less) (Tutorialzine)
  • A Comprehensive Introduction to LESS (SitePoint)
  • The Absolute Beginners Guide to LESS (OSTraining)
  • Using the LESS CSS Preprocessor for Smarter Style Sheets (Dmitry Fadeyev)
  • An Introduction To LESS and Comparison To SASS (Jeremy Hixon)
  • SASS vs LESS (Chris Coyier)
  • LESS CSS Tutorial – The Beginners Guide to a CSS Preprocessor (iOSStream)

Bootstrap Resources

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:

  • Bootstrap Tutorial: A Guide for Beginners (Udemy blog)
  • Using Bootstrap with LESS CSS – Tutorial (Atanas Ruzhin)
  • Bootstrap 3 LESS Workflow Tutorial (HelloErik)

If you need a detailed guide that’s close by at all times, these books are great choices:

  • Learning Bootstrap – Modern, Elegant and Responsive Web Design Made Easy (Aravind Shenoy)
  • Getting Started with Bootstrap 3.3 (Ryan Flores)
  • Step By Step Bootstrap 3: A Quick Guide to Responsive Web Development Using Bootstrap 3 (Riwanto Megosinarso)
  • Bootstrap Essentials (Snig Bhaumik)

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:

  • Bootstrap 3.0 Essentials (Tuts+)
  • Bootstrap to WordPress (Code College)

Here are some great video tutorials and courses on Bootstrap created by talented people on YouTube:

  • Bootstrap 3 tutorial -Create your first one-page responsive website using Bootstrap (Wiredwiki English)
  • Bootstrap 3 Tutorials – #1 Installing Bootstrap and Introducing the Grid System (Wiredwiki English)
  • Building Beautiful Websites with Bootstrap: A Case Study (Michael Kennedy)
  • [FULL] Building Responsive UI with Bootstrap 6 hours (I && Developer)
  • Building Responsive UI and Website Layout with Bootstrap 3 Course (Code Scope)
  • How to Make A Responsive Website from Scratch Using Bootstrap – from PSD to HTML5, Part Two and Part Three (Quentin Starr)
  • Bootstrap Complete Course – How to Build a Responsive Bootstrap Site Tutorial (The Website Boy)
  • Make a WordPress theme with Bootstrap 3 (Coder’s Guide)
  • Responsive Bootstrap 3 Tutorials (Coder’s Guide)
  • Responsive Web Design With Bootstrap (Coder’s Guide)
  • Bootstrap Grid – CSS Grids Series (DevTips)

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.
  • Hakim El Hattab – JavaScript coder and CSS tweaker as well as the co-founder of @Slides.
  • Mathias Bynens – Web standards fanatic specializing in JavaScript, HTML, CSS, HTTP, performance, security, Bash, Unicode and OS X.
  • Peter-Paul Koch – Mobile platform strategist, consultant, writer, conference organizer and speaker, blogger,  trainer and browser compatibility expert.

Must-Have Resources

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.

  • SASS Language Guide: Basics (SASS official site)
  • LESS CSS (Official Site for LESS)
  • Compass, a CSS Authoring Framework
  • Bourbon, a Mixin Library for SASS
  • World Wide Web Consortium
  • WordPress.tv
  • WordPress Codex
  • The WhiP

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.

Need Help?

“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:

  • WordPress Stack Exchange
  • WordPress.org Support Forum

And if you’re a WPMU DEV, don’t forget you can always ask our awesome support team for help with any CSS conundrums.

If your favorite links were missed and you think they should be included, feel free to post them in the comments below.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *