What are some good resources for learning CSS?
March 9, 2014 3:26 PM Subscribe
I have been out of the HTML game since CSS came on the scene, (yeah, that long.) and I need to develop it as a skill set. I could use some suggestions for reading material that'll get me there quickly.
I have a functional knowledge of the basics of HTML, but I'm horribly out of date; and there are so many resources out there, that I feel like I'm drowning in information, so what I'd really like is some suggestions as to guides that will bring me up to speed.
Books are fine, web pages are great, whatever works, I'm just looking for the ones that developers have found the most useful for learning the different aspects. One thing that is worth noting is that my wife was very much an expert, so if I get stuck anywhere in particular, I can always rely on her to point me in the right direction, but I don't want to overwhelm her with basic questions, and I don't want to spend hours searching for signal in the noise when it comes to finding good tutorials.
She's learned it over the last 15 years, so she can't really provide me with anything specific in the way of learning materials (or, perhaps a better description would be that all her books are so far over my head that I'd be wasting time trying to start there and work backwards), so I'm turning to the green.
I have a functional knowledge of the basics of HTML, but I'm horribly out of date; and there are so many resources out there, that I feel like I'm drowning in information, so what I'd really like is some suggestions as to guides that will bring me up to speed.
Books are fine, web pages are great, whatever works, I'm just looking for the ones that developers have found the most useful for learning the different aspects. One thing that is worth noting is that my wife was very much an expert, so if I get stuck anywhere in particular, I can always rely on her to point me in the right direction, but I don't want to overwhelm her with basic questions, and I don't want to spend hours searching for signal in the noise when it comes to finding good tutorials.
She's learned it over the last 15 years, so she can't really provide me with anything specific in the way of learning materials (or, perhaps a better description would be that all her books are so far over my head that I'd be wasting time trying to start there and work backwards), so I'm turning to the green.
Sorry, book link was for an old edition. Here's the latest edition.
posted by iamscott at 3:38 PM on March 9, 2014
posted by iamscott at 3:38 PM on March 9, 2014
The Codecademy CSS courses for a very gentle introduction (online bite-sized exercises)? I'm currently liking their jQuery track quite a bit.
posted by teditrix at 3:43 PM on March 9, 2014 [2 favorites]
posted by teditrix at 3:43 PM on March 9, 2014 [2 favorites]
Mozilla Developer Network, Getting started with CSS
HTML Dog, CSS Beginner Tutorial
Shay Howe, A Beginner’s Guide to HTML & CSS
Seconding Codecademy.
posted by kirkaracha at 3:48 PM on March 9, 2014
HTML Dog, CSS Beginner Tutorial
Shay Howe, A Beginner’s Guide to HTML & CSS
Seconding Codecademy.
posted by kirkaracha at 3:48 PM on March 9, 2014
CSS-Tricks is my goto recommendation. He's got a lot of advanced stuff on the site, now, but there's definitely older stuff worth reading and viewing (his videos are great).
Also, you might have luck using a tool like CodePen as well, so you can view the results of your CSS in real time.
Once you've got a bit of a handle on things, take a look at a CSS pre-processor. I prefer SASS. The beauty of it is that SASS's SCSS syntax can be used as just plain CSS, and you can start adding SASS functionality as you see fit (variables, etc.).
posted by backwards guitar at 3:56 PM on March 9, 2014
Also, you might have luck using a tool like CodePen as well, so you can view the results of your CSS in real time.
Once you've got a bit of a handle on things, take a look at a CSS pre-processor. I prefer SASS. The beauty of it is that SASS's SCSS syntax can be used as just plain CSS, and you can start adding SASS functionality as you see fit (variables, etc.).
posted by backwards guitar at 3:56 PM on March 9, 2014
This was what I used and I liked it: Integrated HTML and CSS. I seem to not be very good at picking up technical languages but this helped me a great deal. Before this, I really found CSS baffling. I can deal with CSS now, in a rudimentary way. I moved all my sites from hand-coded pages to WordPress and now to BlogSpot to get away from hand coding as much as possible but I can and do use the "add CSS" option for some of my BlogSpot sites. It's nice to know a little something.
posted by Michele in California at 4:08 PM on March 9, 2014 [1 favorite]
posted by Michele in California at 4:08 PM on March 9, 2014 [1 favorite]
They are not all free, but people over at r/webdev recommend these sites for beginners:
Nettuts
Codecademy
Treehouse
Lynda
I have used Treehouse and Codecademy in past. I found while Codecademy was a good introduction, it's too basic. Once, I'm outside of Codecademy's comfort zone, I don't know what to do. Treehouse will dive deeper into both HTML and CSS with little bit less hand holding. I also picked up HTML and CSS: Design and Build Websites book to supplement video lectures. Once you have mastered CSS and HTML, you can spend months on Treehouse(or Nettuts or Lydna) to continue learning other technology to make your website even more interactive.
A lot of "free" resources online just plain suck. They were either horribly outdated, or going into very small narrow focus that's bad for seeing big picture. Some people will recommend W3school for reference, but I like Mozilla Developer Network better.
I also recommend Web Design Repo for links to better resources.
posted by Carius at 7:02 PM on March 9, 2014 [2 favorites]
Nettuts
Codecademy
Treehouse
Lynda
I have used Treehouse and Codecademy in past. I found while Codecademy was a good introduction, it's too basic. Once, I'm outside of Codecademy's comfort zone, I don't know what to do. Treehouse will dive deeper into both HTML and CSS with little bit less hand holding. I also picked up HTML and CSS: Design and Build Websites book to supplement video lectures. Once you have mastered CSS and HTML, you can spend months on Treehouse(or Nettuts or Lydna) to continue learning other technology to make your website even more interactive.
A lot of "free" resources online just plain suck. They were either horribly outdated, or going into very small narrow focus that's bad for seeing big picture. Some people will recommend W3school for reference, but I like Mozilla Developer Network better.
I also recommend Web Design Repo for links to better resources.
posted by Carius at 7:02 PM on March 9, 2014 [2 favorites]
Once you've started going from reference learning to applying what you know, I highly recommend getting familiar with browser developer tools. One thing that helps me learn new CSS techniques is finding a page that is using that technique and then using the developer tools to explore which rules are being applied to those elements. They also really help speed up figuring out why something isn't doing what you want it to do.
posted by foxfirefey at 8:13 PM on March 9, 2014
posted by foxfirefey at 8:13 PM on March 9, 2014
Don't use W3Schools, use sitepoint or MDN or something else reputable as a reference. Sitepoint also offers articles.
posted by axiom at 8:40 PM on March 9, 2014 [3 favorites]
posted by axiom at 8:40 PM on March 9, 2014 [3 favorites]
As a Treehouse member, I've found it more useful than say, Codecademy and some of the other free resources. You can try it for free for 30 days, to get a feel for things. There are a number of different learning tracks, from web development (HTML/CSS/Javascript), to Ruby and PHP. Each track brings you along in a step by step way. The HTML/CSS track is more effective than the ones I've seen elsewhere. The typical format is a video about some particular aspect of things, one or more code challenges (tests that require you input your answer via in-broswer html/css editor) and one or more multiple choice question tests. There's a pretty active forum for help, and they're constantly adding new content. The HTML/CSS course uses the latest specifications for each (HTML5 and CSS3) so you can be confident of not learning old/deprecated information.
posted by Bourbonesque at 8:17 AM on March 10, 2014 [1 favorite]
posted by Bourbonesque at 8:17 AM on March 10, 2014 [1 favorite]
I'm also a 1990's HTML guy with no CSS experience. I used this thread as impetus to catch up. I figured I'd start out with lessons about advanced HTML to jog my memory.
I signed up for a free trial at TreeHouse. By minute twelve of watching some dude talk real slow to me, with no option to advance through material I already know or simply get on with it, my blood pressure peaked and I was on the verge of throwing my chair at my monitor. I shocked myself with my anger. I guess it reminded me of the torture of school....lowest common denominator....droning....etc.
I'd chosen "Tracks", their vertical courses. They said the other option is "Library" which is more self-directed. So I headed to Library, and imagine my delight when I found that Library is just a loose collection of those same videos. It's ALL VIDEOS! Like a horror movie!
So I hit Code Academy. I found it absolutely crackerjack for introducing me to the concepts (I got through advanced HTML plus much of the easier CSS within 90 mins). I've lost my fear and built up some basic familiarity. Very very happy (note: I use BBedit, which allows you to hand-code while reducing drudge work. I did a bunch of the examples in BBedit and pasted it into the exercise window).
The problem with Code Academy is that when learning is done via a series of quizzes/games, you find yourself working narrow-mindedly to the immediate task rather than fully absorbing broader concepts (it's the same problem educators have re: "teaching to the test"). I've come out of this with fairly superficial and shaky knowledge that could be forgotten in a couple days flat (same as when I use language drill games e.g. Duolingo). But that's ok; it got me over the hump!
So CodeAcademy, at least for me, is a dynamite first walk-through and introduction to concepts, with light drilling. Now that I grasp the general concept and structure, I'd want to switch over to books and other references, plus just free-form screwing around (e.g. at a WYSIWYG proofing site such as codepen). I think you need both.
Hope that helps. Obviously, your mileage could drastically vary. But since we're so strangely close in experience with this stuff, feel free to PM me if you ever want to compare notes. I'm going to continue working on this stuff.....
posted by Quisp Lover at 11:15 AM on March 11, 2014 [2 favorites]
I signed up for a free trial at TreeHouse. By minute twelve of watching some dude talk real slow to me, with no option to advance through material I already know or simply get on with it, my blood pressure peaked and I was on the verge of throwing my chair at my monitor. I shocked myself with my anger. I guess it reminded me of the torture of school....lowest common denominator....droning....etc.
I'd chosen "Tracks", their vertical courses. They said the other option is "Library" which is more self-directed. So I headed to Library, and imagine my delight when I found that Library is just a loose collection of those same videos. It's ALL VIDEOS! Like a horror movie!
So I hit Code Academy. I found it absolutely crackerjack for introducing me to the concepts (I got through advanced HTML plus much of the easier CSS within 90 mins). I've lost my fear and built up some basic familiarity. Very very happy (note: I use BBedit, which allows you to hand-code while reducing drudge work. I did a bunch of the examples in BBedit and pasted it into the exercise window).
The problem with Code Academy is that when learning is done via a series of quizzes/games, you find yourself working narrow-mindedly to the immediate task rather than fully absorbing broader concepts (it's the same problem educators have re: "teaching to the test"). I've come out of this with fairly superficial and shaky knowledge that could be forgotten in a couple days flat (same as when I use language drill games e.g. Duolingo). But that's ok; it got me over the hump!
So CodeAcademy, at least for me, is a dynamite first walk-through and introduction to concepts, with light drilling. Now that I grasp the general concept and structure, I'd want to switch over to books and other references, plus just free-form screwing around (e.g. at a WYSIWYG proofing site such as codepen). I think you need both.
Hope that helps. Obviously, your mileage could drastically vary. But since we're so strangely close in experience with this stuff, feel free to PM me if you ever want to compare notes. I'm going to continue working on this stuff.....
posted by Quisp Lover at 11:15 AM on March 11, 2014 [2 favorites]
At this point I've finished most of the Code Academy CSS material, and still feel the same way.
One thing bears clarifying: my preferred method of learning is to dive in, plowing forward without a super-thorough understanding, immersing myself and fiddling around. Y'know, "getting a feel"...in fits and starts (depending on what sinks in easily and what doesn't). THEN (and only then) I'll backtrack and fill in gaps. I learn poorly in the more traditional method of learning a chunk at a time, each one mastered before moving on to the next. That's one reason Treehouse drives me nuts.
Code Academy is excellent for the quick/dirty/superficial portion. You can take it quite far before having an "uh-oh" feeling that you're fatally over your head. I'd imagine going through their stuff a second time would deepen my understanding a bit. But, really, at that point I'd need to move on to more real-world-ish applications, using good references to remind me of specifics (I'm going to forget a lot of the specific stuff I just learned quite quickly because I didn't put it to anywhere near enough repeated use; Code Academy does review and re-drill, but not very thoroughly at all).
Hope this helps the OP and others reading along.
posted by Quisp Lover at 1:30 PM on March 11, 2014 [1 favorite]
One thing bears clarifying: my preferred method of learning is to dive in, plowing forward without a super-thorough understanding, immersing myself and fiddling around. Y'know, "getting a feel"...in fits and starts (depending on what sinks in easily and what doesn't). THEN (and only then) I'll backtrack and fill in gaps. I learn poorly in the more traditional method of learning a chunk at a time, each one mastered before moving on to the next. That's one reason Treehouse drives me nuts.
Code Academy is excellent for the quick/dirty/superficial portion. You can take it quite far before having an "uh-oh" feeling that you're fatally over your head. I'd imagine going through their stuff a second time would deepen my understanding a bit. But, really, at that point I'd need to move on to more real-world-ish applications, using good references to remind me of specifics (I'm going to forget a lot of the specific stuff I just learned quite quickly because I didn't put it to anywhere near enough repeated use; Code Academy does review and re-drill, but not very thoroughly at all).
Hope this helps the OP and others reading along.
posted by Quisp Lover at 1:30 PM on March 11, 2014 [1 favorite]
« Older My friend accidentally fried my Macbook. What is... | Information about this unique chair design Newer »
This thread is closed to new comments.
There's also W3Schools if you want to avoid purchases.
posted by iamscott at 3:37 PM on March 9, 2014 [1 favorite]