How to get started with front-end development in 2021

Welcome to another edition from our Learn to Code series, in this edition we will focus on Frontend development and the resources that help you get started. This post will mostly just scratch the surface of what frontend development really is, but you will know enough to get started.

If you are new to coding and web development, we can assure you that the world of web development is a vast sea of knowledge.

Web development and its various specialisations

When we talk about web development we often hear about various different specialisations. These 3 are the most common roles that still stand after many years of a constantly evolving environment.

  • Frontend development
  • Fullstack development (came to exist much much later)
  • Backend development

Funny thing though, these 3 specialisations aren’t necessarily limited to web development. Besides web pages, you can build apps and all kinds of user interfaces (UI in short), such as the user interface on your tv for example.

Hold on… What are user interfaces?

A Web user interface or Web app allows the user to interact with content or software running on a remote server through a Web browser. The content or Web page is downloaded from the Web server and the user can interact with this content in a Web browser, which acts as a client.

To use the interface we need something to translate our commands, this can be a keyboard, mouse, touch, speech, a camera and gestures…
Let’s leave it at that for now and dive further into frontend development.

So what is frontend development?

To keep it simple: You just surfed to this blog, right? And everything that you see here on this blog, the things you are interacting with is mostly the work of a frontend developer. This is one of those interface types I mentioned earlier.

A frontend developer uses HTML, CSS and JavaScript to do their work. You might have heard of things such as React, Vue, Sass and many other libraries and tools. But all of these boil back down to HTML, CSS and JavaScript. So look at these 3 languages as your starting point and core knowledge for becoming a frontend developer. Once you know the basics pretty well, you can choose whatever framework or library you want. Or hey, just keep it vanilla — meaning to only use the HTML/CSS/JS stack– which definitely has benefits that are often overlooked!

The tasks of a frontend developer

It is safe to say that a frontend developer is usually in charge of translating a design into code, but it doesn’t stop there, they also make sure that interactions are pleasant and smooth for the users or visitors of your website, platform or app. And they are also our go-to people when it comes to making our websites as accessible to as many people as possible.
(check out accessibility / a11y to find out more )

It might sound obvious, but accessibility should already be included as much as possible during the design phase. That being said, there are certain things that fall under the responsibility of the frontend developer.

Before diving into our list of where you can learn frontend development, we selected a few screenshots of websites that we think are cool! They also show a nice variety of styles and effects that can be done in the frontend. 🤩 is a new online music creation platform created by Yuri Suzuki, the Design Museum and Roland. Check out the website and create your own music! Aesop aromatique candles - product website Markit by Reify product website Aurélia Durand - Illustrator portfolio website The Never Lands - website The GitHub homepage with a cool animated globe

Start learning the basics of frontend development (for free)

The web is like a treasure trove, but sometimes you just have to know where to look. Once thing is certain, there are many quality resources that can help you get started with coding and / or frontend development.

We listed a few below. You will quickly notice that not all resources teach you the same way. Some use a traditional approach where you have to read a lot and can do little exercises, some are video tutorials and then there are also the interactive courses…

The key here is to find what works for you, so don’t be afraid to try a few before settling for any specific approach. Or maybe even a combination of a few.

General resources for frontend development

Go-to sites that you should keep close!

These sites can be your best friends for a long time. You will regularly have to look things up, and these sites have very good descriptions and examples that help you understand a lot of concepts.

CSS Games

Your tools of trade

To write code you could use a simple text editor, but this is not very productive. So it’s better to use a text editor that was built to help you write code. These are often just labeled as text editors or source code editors, but are definitely very different from word or notepad.

Here are few popular editors you could check out:

One more thing!

When learning to code — at some point when your projects start to grow bigger– you might also want to check out something called version control. A popular tool called Git, is one of the most important tools in any developers toolbox. This will help you store versions of your code and make it so that you can always go back to an older version.

Platforms such as GitHub, GitLab and Bitbucket are probably the 3 most commonly used for Git versioning. And all 3 of them offer a free plan! ✨

Besides choosing a platform there is another thing that you should think about or experiment with when using Git; namely, how that you want to use it. The easiest is probably via a Git client, which is a piece of software that gives you a more visual approach to working with Git.

When you’re familiar with your computer’s terminal (or command line) or are eager to learn how to use it, you can just use that instead.

Learning Git:

With so many more resources out there, both paid and free, we could probably create a much longer list. But with the resources we listed above, you can already make big progress on your quest to learn frontend development.

Thank you for staying with us till the end of this post! ❤️ If you enjoyed reading this, why not share it with your network?

Stay in the loop

Subscribe to our newsletter