| title | date | author | category | tags | layout | preview | featured | ||
|---|---|---|---|---|---|---|---|---|---|
How to get started with front-end development in 2021 |
2021-02-12 |
claudiar |
learn to code |
|
article |
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. |
false |
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.
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.
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.
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!
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. 🤩
{% image {src: "./blog/guest-blogs/images/learntocode-frontend-example-6.png", alt: "808303.studio 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!", widths: [300,600,1000]} %}
{% image {src: "./blog/guest-blogs/images/learntocode-frontend-example-1.png", alt: "Aesop aromatique candles - product website", widths: [300,600,1000]} %}
{% image {src: "./blog/guest-blogs/images/learntocode-frontend-example-4.png", alt: "Markit by Reify product website", widths: [300,600,1000]} %}
{% image {src: "./blog/guest-blogs/images/learntocode-frontend-example-3.png", alt: "Aurélia Durand - Illustrator portfolio website", widths: [300,600,1000]} %}
{% image {src: "./blog/guest-blogs/images/learntocode-frontend-example-2.png", alt: "The Never Lands - website", widths: [300,600,1000]} %}
{% image {src: "./blog/guest-blogs/images/learntocode-frontend-example-5.png", alt: "The GitHub homepage with a cool animated globe", widths: [300,600,1000]} %}
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.
- The Odin Project
- Frontend Masters Bootcamp
- Khan Academy
- General Assembly Dash
- Udemy
- Codecademy
- FreeCodeCamp
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.
- MDN (Mozilla Developer Network)
- CSS Tricks
- W3Schools
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:
- Atom
- Sublime Text
- Visual Studio Code (VS Code)
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.
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.