What next for web design?

November 29, 2012 8:12 AM

How best can I get on a good track to grow and learn as a web designer? I've been using Codecademy, but I'd like to branch out.

Over the past few years I've tried my hand at web design a few times, only ever using HTML, CSS, and the most basic jQuery. Each time I've really enjoyed it. I love looking at raw code in Notepad++ and trying to figure out why it works. But inevitably I'll finish a project or hit a wall and drop out of it for a while.

I started powering through the lessons on Codecademy last week and it's been great to get back into it. But I'll run out of material pretty soon, and I'd love to hear how others have learned.

What other languages should I try and study? I think my long-term goal is to learn how to design a beautiful, functional front-end, and then build a bare-bones CMS to easily maintain and update a personal blog. I know I could do this with a blogging tool, but I'd much rather learn how to build it myself, even if it is a huge time commitment.

Any tips for other resources, personal stories about learning web development, and ideas for simple projects to practice would be awesome. Thanks for reading!

posted by mean cheez to computers & internet (10 answers total)

The best and most useful thing to learn would be themeing in WordPress and/or Drupal. For drupal, maybe like Emma Jane's for Drupal.
posted by Blake at 8:15 AM on November 29, 2012 [2 favorites]

If you want to stay on the web page front end side, D3.js is an amazing Javascript library for interactive visualizations. Lots of fun examples and a pretty quick path to building fun things. The initial learning curve is a bit steep and there's not a lot of formal instructional material, but plenty of reference docs and examples. Also a nice community on the Google Group.

If you want to go more on the server side, Blake's suggestions are good. I'd also recommend Python as the language, maybe with Django as a framework for web servers. Django is big but has great documentation and is very capable.
posted by Nelson at 8:32 AM on November 29, 2012 [2 favorites]

To build a bit on what I've already said, and what Nelson said... I'd suggest go what with is BIG or growing, and learn a special part of it. Like Nelson said you won't go wrong with javascript, or a language like Python or the Django thing, though I'd personally focus on things that are really popular, and things that have many niches, like WordPress and Drupal (I'm sure there are other things just like those two). That way you'd have a special skill in an area of design that already has a big need for such a skill.
posted by Blake at 8:41 AM on November 29, 2012 [1 favorite]

WP/Drupal theming would be neither the best nor most useful thing to achieve those stated goals. Stay away from PHP and PHP projects generally. PHP is a bad language, and it is not the future.

Hit Javascript hard. Not just jQuery, but plain old Javascript. This will allow you to do interesting both magic on the front end side, as well as fast, powerful server-side code with Node.JS. Javascript is not the best language, to be honest, but you're going to have to get it down anyway to meet your front-end goals, so you might as well make the most of it.

Marijn Haverbeke's Eloquent Javascript is a good place to start. Javascript: The Definitive Guide is a good resource for advanced topics and general reference. Javascript: The Good Parts will help you learn to identify and avoid the parts of Javascript that are problematic.

When you've got a pretty solid handle on Javascript, start learning Node. To help get that blog engine up and running, there's Express, a common go-to web development framework for Node.

By this point you'll also have a good understanding of why jQuery does what it does, and why it is awesome.

To keep up to date on design, HTML, and CSS issues, read A List Apart religiously. They put out a free best-of ebook (link at the bottom) that is a beautiful thing.

Books by Dan Cederholm and Ethan Marcotte have helped me improve my HTML/CSS. Read a lot of source code on cool websites.

If you really can't stand programming Javascript on the server, Python/Django is an excellent choice, as is Ruby/Rails. But both involve learning new languages, which, while totally worthwhile and recommended, is more distance between you and your goal.
posted by zjacreman at 8:58 AM on November 29, 2012 [7 favorites]

I've been looking through the HTML5rocks website recently. I'm currently here, a tutorial on building a new website using a mobile-first strategy.

I'd also recommend looking at some beginner courses on Javascript. One place to certainly start is the CS course at Khan Academy. This has been put together by a team headed by John Resig (the designer of JQuery). You can read more about what he has to say about it on his blog.

There are also some free books available: Javascript and Python. Both languages are fun and relatively easy to learn.
posted by urbanwhaleshark at 9:03 AM on November 29, 2012 [1 favorite]

At some point, you're also going to need to learn something about databases. I haven't read it yet, but Seven Databases in Seven Weeks looks awesome.

SQLite is also worth looking into for small, quick-and-dirty projects. It's easy to use and ubiquitous. But I wouldn't say it should be the first database system you learn about, as there are compromises involved in its use that you need to understand.
posted by zjacreman at 9:08 AM on November 29, 2012 [2 favorites]

One more thing, and then I'm out: the single best thing you can do to improve your front-end design is to learn about typography.
posted by zjacreman at 10:23 AM on November 29, 2012 [1 favorite]

First, a linkdump.

Bootstrap
Django
Google Code University
How To Be A Programmer (philosophy)
Here's a list of books
TopCoder tutorials (useful not for the actual use for them, which is only occasional, but for passing job interviews)
Jakob Nielsen's Useit, which is one of the most ironic things ever
Invent with Python, which is an introduction to the language
Getting Started with Rails
Software Carpentry, which is for scientists but does do python
Eloquent Javascript, which teaches Javascript as an actual language
Learn Python the Hard Way
Coursera is a good option. Introduction to Human-Computer Interaction is not shabby at all.
Udacity, which is alright.

Programming languages are not like people languages: they are all formal systems which don't take an awfully long time to learn for someone versed in the way of thinking that they represent.

A note on PHP: PHP is awful and a terribad language and an abomination (although less of an abomination than it used to be). Because worse is better, however, it does the user-facing code of Facebook and Wikipedia, as well as being the language for Drupal and Wordpress. It's the language the intro to human-computer interaction class at Stanford is taught in...

A note on Javascript: there's two ways to learn Javascript. You can learn it as the behavior-defining accessory to HTML and CSS, or you can learn it as an actual, fully-fledged programming language. It is better to actually learn it as a programming language. That means learning its functional aspects: to simplify, it's actually an entirely different paradigm of looking at the act of programming, elevating the function to a first-class citizen in a way that will not be familiar if you only looked at normal Javascript tutorials. It's a different way of thinking that you will not be versed in, in other words. The book to read is Javascript: The Good Parts and the things to learn are Node.js, Bootstrap.js, Underscore.js and one of the UI libraries (e.g., jQuery) to a decent level.

Perhaps an intermediate step is to get some better tools than Notepad++. I may be a curmudgeon in saying that means choosing between Vim or Emacs. But it does definitely mean being more familiar with UNIX than you probably are right now. It's an entirely different value system and a different way to look at your computation. If you think that I sound like a granola-chewer, you would be correct, but that doesn't mean that my point doesn't stand -- one of the funner things is to care about these things. A good craftsman doesn't complain about his tools, but a good craftsman has good tools.

I keep a reading list on the subject which is way too long and has a lot of academic crap and promiscuously mixes in random nontechnical books but may be of interest anyways.

One thing that went on my other reading list that really does matter is Tufte's The Visual Display of Quantitative Information. Somebody called it a visual Strunk and White: this is not too much of an overstatement. Just as writers should probably read Strunk and White, designers should probably read Tufte.

Code school is nice if you really liked the codecademy online REPL a lot. (a REPL is a read-eval-print loop, or the little box that you type crap in and get evaluations of code in, which is convenient)

How to be a hacker (learn the MIT meaning of hacker). Lots of what Eric Raymond has written is worth reading. It's pretty old. It is also pretty good.

Teach Yourself Programming in 10 Years. Peter Norvig is head honcho of research at Google and a remarkable writer. Also pretty old. Let me spread out his comments on the process of learning to program. Specifically, it's kind of important to get interested in the act of programming.
posted by curuinor at 11:59 PM on November 29, 2012 [9 favorites]

The above information is good, but it all boils down to this: Just Build Websites
posted by backwards guitar at 3:57 AM on November 30, 2012

Everyone, I can't tell you how much I appreciate the advice, and I think the resources you've listed will keep me busy for the foreseeable future.

I've been learning Javascript, so I think I'll keep working on that while practicing my HTML/CSS to keep it fresh in my mind. From there I'll dig into databases, start piecing together a full site, and see where I run into questions with the functionality I want. I'm excited to move forward, and after your responses I think I have more clarity re: what to focus on.

Thanks again!
posted by mean cheez at 6:43 AM on November 30, 2012