How to start with Frontend development: Tips and a Guide for Developers

What does a frontend developer do

The frontend developer creates the visual part of the web application with which the user interacts. In addition to programming, the following activities are related to this:

• Optimizes web applications in terms of speed, SEO, UX user experience, etc.
• Tests web applications.
• Ensures accessibility for all users e.g. with disabilities
• He communicates with the designer, backend developer or the customer, so it is important to work on their soft skills.
• They are constantly learning and monitoring new technologies.

The difference between a frontend and a backend developer

The frontend developer develops a web application that runs in a browser on the user's side. Simply put, what is displayed to the user in the browser when they open the site. In addition to that, it addresses user interaction with the web e.g. through forms, buttons or the like. On the other hand, the backend developer develops the part of the application that runs on the server and so the average user does not see what is in the background. The role of the backend developer is, for example, processing data and storing it in a database, verifying user access rights, etc.

Fullstack developer can work with both backend and frontend technologies. The downside is that a fullstack developer has to learn much more and probably won't be able to go as deep as if he were focusing on just one area. On the other hand, as a fullstack developer, you can modify or add functionality to the backend without waiting for another developer.

Tip: A good frontend developer should know how it works on the backend as well. I definitely recommend you to learn how to work with a database, understand the REST API, etc. The best way to learn this is to make a complete web application where you also try to do the backend as well. You don't have to go very deep. All you have to do is make a simple web application where you only get an overview of how it works. Thanks to this, you will be better able to communicate with backend developers and eventually you will be able to fix a bug yourself.

The frontend must, of course, communicate with the backend part of the application. Usually the REST API is used. Other technologies are also coming up, such as GraphQL. As a result, the frontend can retrieve data from the backend, for example in JSON format, and then display this data in a clear form for the user.

How to become a frontend developer

For a start, all you need is any computer with internet. I started writing HTML code in a plain text editor, which I then opened in a browser.

As a frontend developer you will program in HTML, CSS and JavaScript. In addition, you will you come into contact with large number of tools, libraries and frameworks, such as React, Git, TypeScript, Bootstrap, ESLint, webpack, npm, etc. It is not easy to get acquainted with all these tools. In addition, new tools and frameworks are emerging in the web technology ecosystem, especially JavaScript, almost every day. Even for an experienced developer, it is often difficult to choose the right framework that he wants to learn or use for a future project. If you want to orient yourself better, see this road map for frontend developers. It is an outline that you can follow in your learning.

Tip: If you're just getting started with HTML, CSS and JavaScript, I don't recommend jumping straight to more advanced frameworks like React, Angular or Vue.js. Only when you feel comfortable and code a few web pages in plain HTML, CSS and JavaScript can you switch to a framework like React.

What IDE to choose

You have several development environments (IDEs) to choose from. The decision is entirely up to you, but the most important thing is that it works well for you. However, it's a good idea to use the same IDE as your colleagues. This will prevent more problems when setting up the environment. We most often use Visual Studio Code, which is free and one of the most used IDEs for JavaScript developers. Many colleagues also use WebStorm, but it is paid. It is important that the IDE supports add-ons that simplify your work, e.g. lintres, syntax highlighting for different frameworks or have integration with git.

Which JavaScript framework is best

Currently the most used JS frameworks are React, Angular and Vue.js. First of all, it must be said that none of them is the best or the worst. All three are used and popular among developers and each has its advantages and disadvantages. You will find many stories on the Internet, such as this article from Academind or a video to help you choose. It would take a long time to compare them in this article.

In my experience, I know that many developers have moved from one to the other. For example, I started with Vue.js and now I work in React. Once you learn one, switching to another is much faster because they share the same concepts. Sometimes the only difference is the name and the way code is written.

How to learn HTML, CSS and JavaScript

You will find an endless amount of material on the Internet. I have selected a few resources that are suitable for both beginners and advanced developers:

Free internet resources

MDN Web Docs will be your Bible, where you will find a lot of material about web technologies. Learning everything on MDN is unrealistic, but when you need to do something specific, you know you can find it here. Usually, when I googling anything about HTML, CSS or JavaScript, I just click on the results from MDN.

Tip: It's not important to learn everything, but to know how to find it quickly. Things you won't use regularly you'll probably forget. Therefore, it is more important if you know where to look.

I learned JavaScript completely free of charge from the javascript.info portal. Here you will find information from basic to advanced topics with a simple but detailed explanation. It is a suitable alternative to MDN Web Docs.

Paid courses

If you prefer video courses, you can find many courses at Udemy up to 15 €. Personally, I have good experience with Maximilian courses, but thanks to reviews you can find many other quality courses.

I recommend the CSS for JavaScript Developers course for CSS. It is not one of the cheapest, but it is very good and the investment will definitely return. This course is also suitable for more experienced developers.

Tip: The best way to learn web technologies is to create your own project. Therefore, whenever you watch any video course or read something, try it now. Otherwise you will simply forget it.

Blog & News

I have also selected a few sites where you can find useful articles:

• Smashing magazine
• css-tricks
• web.dev
• Nielsen Norman Group

Tip: We also try to contribute to the community with our articles. I recommend you watch the Frontend Briefly series, where we summarize the most important news from the frontend world every month. For more advanced, we have prepared articles on optimizing React SPA applications in benchmark tools.

Summary

I believe this article has helped you orient yourself in the frontend ecosystem. All you need is an effort to learn and try everything in practice. This is the most important way to become a successful developer.