3 ways to improve your web design skills

By George Phillips 17 Nov 2014
Resources
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鈥檚 three easy ways you can work on your front end web design skills:

1. Online courses

Codecademy

I can鈥檛 recommend Codecademy enough. No matter your skill level there鈥檚 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鈥檚 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!

Codecademy

Treehouse

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

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

Treehouse

Code School

Code School has a similar format to Treehouse. There鈥檚 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.

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.

MDN

W3Schools

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

W3 Schools

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鈥檙e using bleeding edge web technology.

W3C

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鈥檙e constantly creating small, seemingly pointless little projects as a way of trying new things out.

There鈥檚 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鈥檚 your turn! Get out there, work on your web design skills and build something cool. What can you create this weekend?

Launch your website today

Give your content team full autonomy on your developer-approved tech stack with CloudCannon.

Get started free!

You might also like:

Top 10 Free SvelteKit Themes for Building Lighting-Fast Static Sites in 2023

Top 10 Free SvelteKit Themes for Building Lighting-Fast Static Sites in 2023

Jaimie McMahon 路 3 Mar 2023

Upcoming CloudCannon Interface improvements (Open Beta)

Upcoming CloudCannon Interface improvements (Open Beta)

George Phillips 路 8 Feb 2023

Creating sites, the Jamstack way

Creating sites, the Jamstack way

CloudCannon 路 7 Feb 2023