3 ways to improve your web design skills

headshot of George smiling
George Phillips
17 November 2014 | 3 mins

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


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!



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.

Code School

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.


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.



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

W3 Schools


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. solitaire

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

Even CloudCannon started off as a bedroom project. CloudCannon

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.

Mike Neumegen

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

You might also be interested in

Image of website divided in half comparing a static and dynamic website's loading time.

What is a static website?


18 October 2021 | 1 min

Read more
Six ecommerce icons

Top 10 Headless Commerce Tools to Build an eCommerce Storefront

Diego Salinas Gardón

15 October 2021 | 12 mins

Read more
Graphic showing components managed by Bookshop being used in multiple websites

Introducing Bookshop: component-driven workflow for static websites


6 October 2021 | 1 min

Read more
Don’t miss the latest
A monthly newsletter to keep you up-to-date with the latest CloudCannon news
Illustration of woman holding an envilope