DEV Community

Claudia for women.code(be)

Posted on • Originally published at

Learn to Code: 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 Front-end development and the resources that help you get started. This post will mostly just scratch the surface of what front-end 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.

  • Front-end development
  • Full-stack development (came to exist much much later)
  • Back-end 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 front-end development.

So what is front-end 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 front-end developer. This is one of those interface types I mentioned earlier.

A front-end 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 front-end 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 front-end developer

It is safe to say that a front-end 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 front-end developer.

Before diving into our list of where you can learn front-end 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 front-end. 🤩 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


Aurélia Durand - Illustrator portfolio website

Markit by Reify product website

The Never Lands - website

Github website homepage

Start learning the basics of front-end 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 front-end 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 front-end 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 front-end development.

Stay tuned for what’s next in our Learn to Code series!

This article is the 2nd of a series of (guest) posts focussing on (self-)learning to code. If you are interested in learning to code or getting to know more about other self-taught coders this series is for you.

If you enjoyed reading this post feel free to share it with your network. ❤️

Discussion (0)