The Front-end Developer Roadmap - How to Become One

Beniamin Marcu -

Do you want to become a front-end developer? This is the right place.

Introduction

You scoured the internet and couldn't find a clear answer to what is front-end development and how can you become a front-end developer? The purpose of this article is to put your thoughts in order, to establish the point from which you start, and to get a vision of what the frontend-developer branch means.

This article is structured so that it is easy for beginners who want to learn web development, but also for those who took part in the journey to becoming a frontend developer and are looking for a new challenge.

Table Of content

What is a front-end developer?
6 Steps to Become a Front-end Developer

  1. Good to Know Stuff
  2. Learn the basics - Html, CSS, and Javascript
  3. CSS Positioned Layout
  4. Intermediate - Package Manager and CSS frameworks
  5. Middle - Javascript Frameworks
  6. Advanced - hybrid static & server rendering

Conclusion

What is a front-end developer?

A front-end developer is a person who develops the interface of an application. Everything you see on a website or application was done by a frontend developer. "Login" page, "Contact us" page, buttons, fonts, forms; all of these falls under the front-end development term.

At first, in order to be called a front-end developer, it was enough to know 3 things: HTML, CSS, Javascript. In these times it is not enough to know only the 3 languages, at least not in basic form.

Over the years, many frameworks have been developed, both for CSS and Javascript. This means, if you want to become a frontend developer you must know at least a CSS framework and/or a Javascript framework.

Short Definition: Front-end developers create and optimize the website interface and make sure the elements look great on all devices: smartphones, tablets, and desktops.

6 Steps to Become a Front-end Developer

1. Good to Know Stuff

In order to better understand what is presented in this article, it is good to find answers to the following questions and to know, at a basic level, the following terms. These skills are not necessary, but they will definitely help you in your journey.

  1. How does the Internet work?
  2. What is HTTP?
  3. How do browsers work?
  4. What is a domain and how does it work?
  5. What is a terminal and how do I open and use it?
  6. What is an IDE (Integrated Development Environment)?

With the answers to these questions, we begin our journey to become a front-end developer.

2. Learn the basics - Html, CSS, and Javascript

As I said at the beginning of this article, a front-end developer first learns the three basic languages: HTML, CSS, and Javascript.

HTML

HTML stands for Hypertext Markup Language is the foundation of every website, it tells the browser how to display a web page’s content. Here you need to learn the basics of HTML, but you might want to pay more attention to HTML forms as they will be fundamental in the future.

CSS And SCSS

Cascading Style Scripts or CSS is a styling language for HTML. CSS specifies how the web page is styled. Some of the basics of CSS you will come across are: variables, CSS positioning, grid, margin, padding, box model, flexbox, animation, media query, and responsive design.

SCSS - Syntactically Awesome Style Sheets is a preprocessor stylesheet language compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. It helps in organizing large stylesheets while making it easier to share design across projects.

Javascript

JavaScript is one of the most popular programming languages in the world. It is the language of the web. When it comes to JavaScript, you need to learn the basics first. Things like variables, data types, functions, arrays, objects, and more. You also need to learn about how to manipulate the DOM and many more.

3. CSS Positioned Layout

After learning the basics of programming languages, we need to learn how to position the elements on the web page. Once the elements are arranged on the page, the users of the site will understand the content and will go through it very easily. This positioning of the elements is called Layout.

Layouts

Layout basically means the arrangement of predetermined items such as image, text and, style on a page. It establishes the overall appearance and relationships between the graphic elements to achieve a smooth flow of message and eye movement for maximum effectiveness or impact.

Examples of layouts:

  • landing page - is a standalone web page, created specifically for a marketing or advertising campaign
  • home page (or homepage) - is the main web page of a website
  • product page - is a page on a website that helps customers decide what to buy
  • the dashboard - is a visual display of all of your data

For inspiration, you can check these links:

4. Intermediate - Package Manager and CSS frameworks

Before explaining what a CSS framework is and listing the 3 most popular frameworks, you need to familiarize yourself with the term "package manager".

Package Manager

A package manager or package-management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for a computer in a consistent manner.

When it comes to package managers, the first thing that comes to my mind is NPM and Yarn. So pick one of these two and learn its basics.

CSS framework

CSS is a beautiful and simple language that helps us make web pages look good. You will see that with the development of a larger project, it will be quite difficult to organize your CSS. In addition, if you want to do a new project, you will have to move CSS snippets from the old project to the new one. It is a waste of time to do this.

To solve this problem, CSS frameworks have been developed. Once written a CSS can be used in any project that we need to use that CSS. The most popular 3 CSS frameworks are:

  • bootstrap - is a giant collection of handy, reusable bits of code written in HTML, CSS, and JavaScript. It’s also a frontend development framework that enables developers and designers to quickly build fully responsive websites.
  • tailwindcss - a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
  • bulma - is a free, open-source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

5. Middle - Javascript Frameworks

After going through the CSS Framework part, the Javascript Frameworks presentation follows. In this part, I will present the most popular frameworks for web, mobile, and desktop.

Web Frameworks

React - According to the documentation, it is a JavaScript library for building user interfaces and that lets you create reusable components.

Vue.js - is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.

Angular - a component-based framework for building scalable web applications, a suite of developer tools to help you develop, build, test, and update your code.

Mobile Frameworks

React Native - is a JavaScript framework for real writing, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.

Flutter - is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

Desktop Framework

Electron - is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.

6. Advanced - hybrid static & server rendering

Are your looking to create your perfect developer resume? Check our article and use our Github readme Template to create your CV!

A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Essentially, a static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time.

Next - is the React framework to pick when you need consistently fast front-end rendering in complex pages.

Nuxt - is the Vue solution for those same complex servicing issues, plus when deadlines are a concern.

Universal - is the Angular execute on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

Jekyll - is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as "a simple, blog aware, static site generator".

Conclusion

Congratulations, you've reached the end of the front-end development roadmap! You may easily create real-time website apps using the information presented here.
A front-end web developer's abilities must be updated in the same way that technology and market demand do. Front-end web developers must continue to study and learn in order to stay current. As a result, mastering new front-end web development technologies and tools is critical. Good luck!

Are you interested to become a full-stack developer? Check out your guide to becoming a full-stack developer.