Javarevisited
Published in

Javarevisited

2021 Zero to Hero: Front End developer Roadmap

front end developer roadmap 2021 cover image

This story was originally published as: The Complete Front-End Developer Roadmap 2021

Google is an amazing place to find resources about front-end development, the problem is, what do I need to learn?

Here’s a full 2021 Roadmap to Front-end development, with 15+ FREE resources, to kickstart your career and start monetizing your development skills.

You will start from the fundamentals of programming, learning what a variable is and how data is stored. You will then move towards building your first web page, adding some interactivity with JavaScript and styling with CSS.

At the end of this Roadmap you’ll be able to fully create a small to medium front-end application using the latest JavaScript frameworks and CSS Preprocessors, but beware:

No matter how good the Roadmap is, without practice, there’ll be no learning. It will take you some time, but the rewards will be huge!

Ready? Let’s start with the fundamentals of Computer Science.

1. There’s No Front End Without Fundamentals

Room with computers and two engineers. Fundamentals of computer science

Before JavaScript and front-end frameworks, you’ll need to master the fundamentals of Computer Science.

Learning what a function is, how your code is interpreted, and how data is handled, will tremendously speed up your understanding of programming languages while building the basics of your web development journey.

To start, I suggest you take a look at:
Fundamentals of Computer Science, a Free course published by Harvard itself.

2. Before Front End: Learn How the Web Works

Man typing on a laptop. How the web works.

It’s key for a Front-end developer to understand what HTTP or DNS means, what is a Cookie, or how a browser is able to display a website on a screen.

You’ll have to communicate with APIs, handle, send and receive data: better be prepared.

Learn how the web worksA primer for newcomers to web development.

3. Learn HTML and CSS

HTML code — learn the fundamentals of front-end development

Everything started with HTML, then someone thought of making things “cool” and created CSS.

Learn how to create your first web page with HTML and how to style elements, giving them the look you like.

A 300+ hours free course by freecodecamp.com, the best place to kickstart your front-end developer career in 2021.

4. Develop a Portfolio to Showcase your Frontend Projects.

desk with a mac and a wallpaper with “do more” written on it. Create a portfolio to showcase your front end skills.

To retain notions you need to practice, and you can practice by developing stuff. Better if this “stuff” serves you towards your goal of becoming a successful front-end developer.

The first thing you’ll get asked to present when contacting a new customer is a portfolio. Why not make one, now that you master the fundamentals of HTML and CSS?

Here’s a step-by-step guide on how to create a plain HTML and CSS portfolio.

5. Do Not Lose Your Work — Learn Git.

Git branches with front end code stored

Knowing version control is not optional.

There is a myriad of version control systems out there, like:

What is common to all of them, is GIT:
A free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Simply put, GIT alone is a local history of file changes in a folder, that will help you:

  • Keep track of your code.
  • Back up your code.
  • Avoid disastrous consequences due to unwanted changes.
  • Collaborate with teammates and other people, seamlessly.

Learn GIT in this crash course on YouTube.

6. Add Interactivity to Your Front-End — Learn JavaScript

Books about Javascript and CSS, the fundamentals of Front end development

JavaScript with its frameworks, powers essentially any front-end that needs to have some degree of interactivity or data handling like:

  • A form,
  • pop-up,
  • Twitter’s feed.

Learning it in 2021 is one of the best investments you can make as a web developer, as it opens thousands of job opportunities as a front-end developer.

Developer Interactive websites with this free JavaScript Introduction course.

7. Optimize Your Code: Learn Algorithms and Data Structures

Being a good developer means a lot of things: one of those is knowing your tools.

Having a good understanding of algorithms and data structures, understanding the differences between a list, a queue, and a stack, knowing how a sorting algorithm works, is key to write more optimized and cleaner code.

Freecodecamp offers a free 300+hrs certified JavaScript course, that also goes through the fundamentals of Algorithms and Data Structures.

8. Connect Your Front-End — Learn about APIs

As a front-end developer in 2021, you will have to find a way to communicate with the guys in the backend room, to exchange data or verify a user.

To do so, you’ll probably use some APIs and HTTP, but what is an API, how do I send and receive data from it?

Learn what an API is on YouTube.

Learn how to fetch data from an API in JavaScript.

9. To learn Front-End development You Need to Make Front-Ends

As said before: learn by doing is key.

One woman and a man near a white board. The man is drawing the wireframes design for a front end website to develop

Now that you’ve learned JavaScript, is time to develop some fully-fledged front-end applications.

Try to create:

  • A To-do application,
  • Signup form,
  • Pricing component,
  • Landing page.

To test how HTML, CSS, and vanilla JavaScript work together in a real-world front-end application.

Here’s an amazing tutorial on how to build your To-do app front end.

And here are 16 front-end projects inspirations to lit your creativity.

What vanilla JavaScript means?

When you read “vanilla JavaScript” you should intend this as JavaScript used without any framework (React, Vue, etc.)

How do I choose the right front-end project to develop?

It really depends on your goals:

Do you want to develop web apps? Develop a Netflix clone.
Do you want to develop SaaS? Develop a subscription-based tool.
Do you want to develop landing pages? Create a landing page. Be relevant.

10. Speed up Front End Development — Learn a JavaScript Framework

A mac from above, with a colorful keyboard and a npm sticker. A popular Node library

Although vanilla JavaScript is able to create completely working front-ends, it is not scalable and doesn’t bring you those ready to use tools that frameworks and libraries such as:

Might bring to your development. Picking a JavaScript front-end framework will also tremendously skyrocket your job opportunities.

Be aware though, you should spend enough time on building vanilla JavaScript projects before moving to a framework, otherwise, you might lose many fundamental concepts of front-end development.

Choose your framework based on your preferences and your country’s demand.

11. Learn: React Frontend Development

React logo, a popular frontend library

React is an amazing open-source framework that makes it painless to create interactive UIs. Released by Facebook in 2013, has become highly popular because of its simplicity and flexibility.

React is powering more than 100k websites

Here’s an amazing playlist by the net ninja to kickstart your React journey.

12. Learn: Vue.js Frontend Development

Vue.js logo, a popular javascript Front-end development library

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces.

Its roadmap is similar to React, with great documentation, and easy to learn if already experienced with vanilla JavaScript and entry-level Front End development.

Learn Vue in this amazing crash course by Traversy media.

13. Learn: Svelte Frontend Development

Svelte logo, a popular front-end javascript library

Svelte has a new approach to building user interfaces.

Whereas frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Learn Svelte with its official free tutorials.

14. Improve Your Front End Styling Workflow

Learn a CSS preprocessor.

A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from, however, all of them will add some features that don’t exist in pure CSS, such as:

  • Mixin
  • Nesting selector
  • Inheritance selector, and so on.

Sass is considered to be the best CSS Preprocessor for front-end development.

15. Learn Sass to Style your Front-End

CSS with superpowers.

sass logo, a famous CSS pre processor

Sass is the acronym for “Syntactically Awesome Style Sheets”. Sass is not only the most popular CSS Preprocessor in the world but also one of the oldest, launched in 2006 by Hampton Catlin and later developed by Natalie Weizenbaum.

Learn Sass in this Free course, again, with freecodecamp.org

Conclusions: Becoming a front-end developer in 2021 is the best choice.

Becoming a front-end developer in 2021 and entering the IT world, it’s the best investment you can make.

Remember that a self-made project is worth tens of projects made by following a tutorial. In this roadmap, I’ve listed the best free resources I’ve found while learning Front-end development.

Showcase your project appropriately in your portfolio, this will be the first thing your customers will look at!

Other Developer RoadMap Articles you may like

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store