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!

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.

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.

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.

W3Schools

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

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.

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.

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

Even CloudCannon started off as a bedroom project.

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.

Now it’s your turn! Get out there, work on your web design skills and build something cool. What can you create this weekend?