3 ways to improve your web design skills

By George Phillips · 17 Nov 2014

3 ways to improve your web design skills

Constant self improvement is one of my main philosophies in life. Getting just a little bit better at something every day is not only a way I improve myself professionally but I find it gives me a more fulfilling life.

While working as a freelancer, I found having a deep understanding of HTML, CSS and JavaScript gave me a huge advantage because I could quickly go from a vision in my head to a live functioning website my client loved.

Here’s three easy ways you can work on your front end web design skills:

1. Online courses

Codecademy

I can’t recommend Codecademy enough. No matter your skill level there’s going to be something you can learn. Their tutorials range from an introduction to HTML/CSS to building your own interactive solar system using JavaScript. It’s so cool.

The tutorials have step-by-step instructions, a code editor and fake web browser so everything is in one place. There's no need to leave your browser. Even better, it's completely free!

[

](http://codecademy.com)

Treehouse

If you’re a visual learner you’ll love Treehouse. There are tutorials covering a huge range of web design topics to cater to any level. For each tutorial there’s a short professionally shot video, followed by a short quiz and an exercise that can be completed in the browser.

There’s a little more hand-holding here than on Codecademy so if you’re looking for something closer to a classroom environment, Treehouse is your best bet. Plans start at $25/month and there’s even a 14 day free trial available.

[

](http://teamtreehouse.com)

Code School

Code School has a similar format to Treehouse. There’s a short video followed by a coding exercise. Again, this workflow is fantastic because if you ever get stuck, you can always re watch the video to find the answer. There are free courses available and a monthly subscription of $29 to get full access.

[

](http://codeschool.com)

2. Documentation

When I need to quickly look up how to use css3 rounded corners or what attributes you can set on a form element, these documentation websites are my go to.

MDN

Mozilla has a beautiful set of documentation for anything web. If I ever need to know what attributes a <video> tag has or the browser support for border-radius, this is my go to.

[

](https://developer.mozilla.org)

W3Schools

Similar to MDN, an in depth reference of everything HTML and CSS.

[

](https://w3schools.com)

W3C

HTML and CSS specifications straight from the horses mouth. W3C sets the standards which guides the implementation in web browsers. The descriptions are usually technical and verbose so I typically prefer the other two websites but it can be a good reference if you’re using bleeding edge web technology.

[

](https://www.w3.org)

3. Work on projects

I find the best way of learning new web design skills is to have a project you can try new things out on. At CloudCannon we’re constantly creating small, seemingly pointless little projects as a way of trying new things out.

There’s our Solitaire app made completely in HTML, CSS and JavaScript. [

](http://solitaire.cloudvent.net/)

Smileys.js is our little way of making websites a happier place. [

](https://smiley.cloudcannon.com/)

Even CloudCannon started off as a bedroom project. [

](http://cloudcannon.com/)

My next project is to revamp my personal website. That moustache is long gone and I want to do something even cooler than eating an apple with html5 videos.

[