8 best free online resources for the beginner web designer

On July 10, 2013 by Ross Gordon

All of these resources are undeniably very useful and/or fun.

However, replace ‘best’ with ‘favourite and most-attached-to-because-I-used-some of-them-when-I-started-out’ and you have a more accurate title for this blog, but it’s not as catchy or as google friendly. With that in mind, I welcome any suggestions in the comments section as to ‘better’ resources. But I like these ones.

1. W3 Schools

This site is perfect for the absolute beginner useful for those beyond. It walks you through HTML and CSS (and lots of other languages) nice’n’slowly, with examples for each new piece of code. It can be a little too slow in parts, but for the absolute beginner this is definitely a great place to start.

Now, you can edit bits of code on the site with live examples, but I recommend getting yourself a text editor (Coda is a good investment if you’re working on a mac) and making your own examples with each new piece of code, for fun’s sake. I ended up with pages and pages of html loosely based around Adventure Time and Slenderman, as were my obsessions at the time. Unfortunately I lost all the crap I made while learning to code, but I can assure you it was completely hilarious. It was comedy gold I tells ya.


2. Know Your Mac: Beginner Web Design video series

There are a whole bunch of video series out there giving you the basics of coding and web design, but this one stands out for me because the narrator’s explanation is very clear and concise. He doesn’t just teach you the code, but the right way to think about how you use it. He also uses a teaching method of first creating a photoshop design then translating it into code, which I think is a brilliant way to learn.

Having a real person explain to you the basics of web design can also be a welcome break from staring at code and regurgitating it – that can get a bit dry sometimes. Eurgh. Unless of course you manage to persistently include Slenderman in your coding examples.

Anyway, watch this in conjunction with learning the code over at w3 schools and you’ll be creating basic sites in no time.


3. Code/Racer

Once you’ve learnt a bit of HTML and CSS, this online game is really fun way to cement your knowledge. In this simple game created by treehouse, you simply race against other players to complete bits of code. Learning code can be fun, without you having bring Slenderman into the equation. Not this time.


Spoiler alert: Look closely and you will see Slenderman hiding in the far right of the image.

4. Stack Overflow

On your journey to becoming a web design master, you will inevitably have a lot of questions. Enter the web design forum. This one, Stack Overflow, has an Alexa website rank of 103, meaning a huge amount of people visit this website (for comparison, eBay has rank 107!). So, any question you might have has most likely already been answered. If you would like to ask a question that you can’t find the answer for, you will swiftly receive an answer from one of the many helpful people in the web design community. We’re very very nice.


I see what you did there Slenderman, you absolute div (or is he relative? har har har.).

5. Learn jQuery in 30 days (nettuts+)

Once you know some HTML, some CSS, and maybe a little bit of javascript, I highly recommend you learn how to use jQuery. It’s basically a library of javascript functions that allow you to make your sites more interactive – it’s very powerful and it’s fairly easy to learn. You’ll be able to use things like this on your sites. Cool.

This video series by the awesome Jeffrey Way is clearly explained and has a nice pace to it. You sign up for free and get a 10-15 minute video sent to you every day for thirty days. Also cool.


Subtle Slenderman. Badly photoshopped Slenderman. Which brings me neatly onto….

6. 30 Cool Photoshop Tutorials for Beginners

This one isn’t absolutely necessary, but it is likely that at some point you will need to manipulate images to some degree – you may even just want to create mock-ups for your sites before you code them. These tutorials are all cool as the title suggests and by working your way through any one of them you will quickly become acquainted with Photoshop.


Slenderman, you so artsy.

7. Diving into PHP

More and more of the internet now uses PHP. WordPress and most CMSs use it, even Facebook runs on PHP. It’s a little more challenging than HTML as it is a programming language rather than a markup language, but it is well worth learning. After all, you will probably eventually learn to use a CMS such as WordPress and if you want to be able to manipulate WordPress themes then you’d better know at least a bit of PHP.

This is another video series by Jeffrey Way (two links Jeff, TWO). Again he successfully communicates his enthusiasm for the subject and he doesn’t patronise nor move too fast.


Hey Jeffrey. Whatcha playin?

Days 1-11 of this series are all linked on the same page, but the subsequent lessons are not. Sooo here they are: Day 12, Day 13, Day 14, Day 15, Day 16, Day 17Day 18.

8. WordPress Codex

WordPress, you will likely soon find, is an immensely powerful tool. Though it was built for blogging purposes, it powers a whole load of the internet. The latest stat is that 22% of all new websites in the US are running on WordPress. It takes the focus off the coding element of web design and focuses on the graphic design. Although if you want to produce sites commercially using WordPress you’d better know how to manipulate the code/even build your own theme (that’s a long way off for a beginner, mind).

Where better to go for guidance on WordPress than the WordPress codex – you can pretty much find a guide there for anything you’d like to do, from installation to building your own theme.


That’s all for today. Again, please feel free to add your favourite resources in the comment section below.

Proofread by George Gould because I don’t write so good. Thank you good sir.

To the rest of you, good luck with your web design endeavours!

By Ross Gordon, Web Designer at Two Rox Design.

Comments are closed.