Become A Designer Who Codes

Tue Dec 07 2021

Should designers code?

In my opinion YES!

Maybe not bulletproofed production-ready code, but the better they can code, the better. From my perspective, designers should be able to deliver at least the markup and the style in code for the platform they are designing for. I would love to see more designers who broke free from the constraints of the static graphic editors.

Please don’t get me wrong. I understand the benefits of a graphic editor when sketching something out and iterating over an idea. But it blocks us from understanding the nature of the medium we are designing for.

After having said this, let’s come back to the topic. How to start learning to code?

The best practice is learning by doing by using the resources the web provides to us. But it is easy to drown in that ocean of information, right?

So, for your comfort, I’ve put together this list of resources. May it help you on your way to becoming a designer who codes!

Codecademy

In my opinion, Codecademy is a great place to start. All linked sites listed here offer a few free courses or are entirely free.

JavaScript Courses & Tutorials | Codecademy

On this site, the most relevant courses, in my opinion, are Learn JavaScript, Learn React.js: Part I, and Learn React.js: Part II. The first will give you an overview of the language, and the other two will teach you about the now to go with framework.

Very handy is this cheat sheet about JavaScript basics and this video provides a quick introduction.

Learn HTML | Codecademy

This basic HTML course only takes 9 hours to master. And here you’ll find a glossary and cheat sheet supporting this.

Learn CSS | Codecademy

This basic CSS course only takes 15 hours to master. You’ll find a glossary and a cheat sheet supporting this. Do I have a deja-vù 🤔?

Use DevTools | Codecademy

A good part of a web developer’s life is tooling. Let it be versioning, linting, building, etc. There is a lot and too much to cover it all here, but most important for the start are your browser’s develepment tools. Look at this resource and learn them.

Udemy

Udemy is another online learning platform. It covers more topics than Codecademy and doesn’t only concentrate on coding. And it doesn’t offer so many free courses. But once a year, they offer crazy discounts. Maybe Black Friday. So, better watch out!

Free Tutorial – Foundations of Frontend Web Development | Udemy

The description promises that after finishing this 20 hours video-on-demand course, you could apply for the position of Junior Frontend Developer. Honestly, I doubt that, but it should give you a better understanding, and on the other hand, who knows?

Khan Academy

We’re a nonprofit with the mission to provide a free world-class education for anyone, anywhere.

That’s ambitious! I haven’t tried it yet, but have heard about it. They cover a lot of schools or general educational topics but also about business and jobs in general, as well.

Computer Programming | Computing | Khan Academy

As I mentioned, I haven’t tried any of their courses before, and this here is somehow game-focused. So, I wouldn’t recommend taking this course from start to end. But I like how they split up their Intro to JS. By having such a clean table of content, it is easy to pick a topic that you may still struggle with and want to consult another resource. And I appreciate that they paid extra attention to the topics writing clean code and becoming a better programmer.

MDN Web Docs | moz://a

Our leadership has been at the forefront of building a healthier internet since Day 1. What began as an alternative to corporate domination has grown into a global force for good online.

Welcome to one of the pioneers of the open web 😻! Aside from delivering one of the best browsers, they contribute to many open-source projects and try to make the internet a better and more inclusive place. They provide great references covering all kinds of web topics.

Learn Web Development | MDN

The goal of this area of MDN is not to take you from beginner to expert, but it will bring you from beginner to comfortable.

I have no idea how long this course takes, but it is built on top of one of the most reliable resources you can find on the net.

edX | Platform For Education And Learning

Front-End Web Developer Professional Certificate | edX

This course isn’t announced as free, but you only have to pay for the certificate and can do it actually for free.

This course is more focused on HTML and CSS but must be quite intense because it says that it takes 7 months when you spend 5 – 7 hours per week. But it is W3C certified! This could only be topped, if Tim Berners-Lee would give you the certificate.

If you don’t know what the W3C or Tim Berners-Lee is – shame on you!

20 Best Free Web Development Course & Certification [2020 UPDATED]

In addition to my list, I want to mention this list here. There is a bit of overlap, but like one of my tutors at the FHP used to say: “Sometimes redundancy is nice!” Take a look and pick yourself.

LevelUpTuts | YouTube

Scott Tolinski is a hero! That guy can show you everything regarding web development and makes it look easy. Good thing that he keeps recording everything. If you have reached a certain level of understanding of the basics and want to look into a new development framework Scott’s tutorials are highly recommended.

LevelUpTuts is also offering paid courses through its website.

Roadmap: Learn To Become A Modern Front End Developer

Frontend development is an open field. If you want to know how much there is to learn, then follow this link. But to be honest, you don’t need to understand everything, especially not as a designer. But I think it makes sense to look at it and see what you can learn next.

Peter Sekan