One of the most common tech education questions I get from clients and designer colleagues is recommendations for learning how to code. Gone are the days where coding skills are limited to those who want to become professional programmers; instead, we live in a digital platform world where beginning to intermediate skills can go a long way toward letting you have increased control and a better understanding behind how and why online design works the way it does.
Since most of queries are from colleagues interested in design elements over functionality, I usually point them toward these some free CSS (Cascading Style Sheets) resources (spoiler: fellow ArtsHacker, Aaron Overton, is writing a follow-up article that will explore other programming languages).
CSS is a style sheet language that describes how elements inside a website look. A very basic example the way CSS is used to define a font color:
.entry, .entry p {
color: #444545;
}
Compared to other programming language, CSS is comparatively easy to learn and apply but there is more than enough deep end level learning to go around if you’re so inclined. Regardless if you just want to get your feet wet or go deep sea diving, here are a trio of resources, each using very different approaches, to get you started:
W3Schools
Although they were launched in 1998, they’ve done a terrific job at staying current on new skills and keeping the site’s design up to date. According to their About page…
W3Schools is a web developers site, with tutorials and references on web development languages such as HTML, CSS, JavaScript, PHP, SQL, W3.CSS, and Bootstrap, covering most aspects of web programming.
In addition to a well-organized and intuitive self-study configuration, they offer a number of sandbox environments where you can test skills firsthand. If you’re feeling more adventurous, they offer a self-study CSS certification course for a modest fee (it’s well worth the tiny cost). This is a great resource for finding a basic CSS skills or resources quickly and easily.
[button link=”https://www.w3schools.com/css/default.asp” bg_color=”#eb4c41″ border=”#eb4c41″]CSS at w3school[/button]
[button link=”https://www.w3schools.com/css/css_exam.asp” bg_color=”#eb4c41″ border=”#eb4c41″]W3schools CSS certification [/button]
CSS-Tricks
CSS-Tricks takes things to the next level and applies a design focused outlook on specific CSS skills. You’ll find more cutting edge CSS resources here, such as this excellent guide for Flexbox Layout. If you work in primarily one publishing platform, they even offer CSS tricks geared toward that respective environment, such as this long series of tricks for customizing WordPress.
If you’re more of a visual based learner, they even offer a number of video based tuts.
[button link=”https://css-tricks.com” bg_color=”#eb4c41″ border=”#eb4c41″]Visit CSS-Tricks[/button]
Codecademy
This resource feels a bit more formal and if you thrive in tightly organized lesson structure, you are going to love what they have to offer. It’s not as visually friendly as the other two resources, but don’t let that fool you; their Introduction to CSS course offers some of the best step by step hand holding around.
In addition to the free content, they offer a range of paid upgrades.
As a disclaimer, you should know that there are all sorts of online resources and there isn’t one “best” option. By and large, once you begin looking at what’s around, you’ll have no trouble gravitating toward options that jive with how you learn.
[button link=”https://www.codecademy.com” bg_color=”#eb4c41″ border=”#eb4c41″]Visit Codecademy[/button]
Are there any other CSS education resources you’ve used and recommend? If so, take a moment to share them in the comments.
