Front-end Developer roadmap

Hey folks 👋

This article will take an eye on one of the exciting topics suitable for every developer level. In addition, I will share a valuable resource for each step of a roadmap that I used before to learn the Front-end.

I've shared some books here, but everybody knows that books become outdated too fast in a developing world, so to buy them or not is your decision.

HTML, CSS 👨‍🎨

The basic level, which sometimes newbies miss 😉
The real foundation I've got in a book CSS3: The Missing Manual, and most of the time, my recommendation is to search for a beautiful and challenging design frames on the internet and try to do them, or a lot of them you can find for free in Figma community

Resources:

1. Code basics
2. CSS: The Missing Manual
3. Flex froggy
4. Grid Garden
5. MDN HTML
6. MDN CSS

JavaScript ❤️

The foundation of the Web.

1. Best JavaScript book
2. JavaScript: The Good Parts

React ⚛️

Really in love with this framework, but wanna try Svelte and WebComponents.
Resources:

1. Documentation - all learning materials you can find here
2. Egghead You can find a lot of good courses here for free, but if you reach, you can even buy a PRO version🤴)
3. Learning React Functional Development - can be outdated right now, but still, you can find here some good techniques.

Typescript 🏢

For several years I didn't say a project without TS 🫡

1. Documentation is always the best resource 😄
2. React + TS cheatsheet - this great cheatsheet I recommend almost to everyone who is doing React+TS

Docker

It is an essential technology in the middle-size project and enterprise development.

1. Info about docker engine
2. Introduction to containers
3. Best article about Docker Anatomy

These three resources gave me a basic understanding. For further information, I recommend you to learn through a docker website.

Algorithms

In Front-end development, you don't need to know all algorithms, but it's good to learn some basics.

1. Grokking Algorithms can give you good fundamentals
2. Free course from Princeton

Testing

A valuable part of the development process, which is good to know.

1. Jest
2. Cypress
3. testingjavascript from Kent

If you don't have a computer right now, it seems like you share my first steps because I started to learn programming without a laptop, so I would recommend starting with a mobile app called SoloLearn.

And of course, one of the most excellent places to learn something new is YouTube 🎥

Share your best resources for Front-end developers in the comments 🥇

Cover design by Julia Mazur

Comments

[Igor Bartashevich]

N1! Useful & very interesting! After learning Angular , i'll follow this roadmap to learn React!

[Gleb Krishin]

hey man, absolutely try it, follow me for more articles which will come soon ! Also check the new beta doc
beta.reactjs.org/, it looks much better with an aim for interactivity

[Sergey Sova]

I can suggest learning Effector business logic manager

[dt-reshape]

How about writing an article about Git? I think this topic is very popular among beginners

[Gleb Krishin]

Think that for beginners, we already have enough info, and vice versa in the community, the minimal amount of articles about advanced git usage like bare repositories exists

[Dima Shorokh]

Very useful, thank you! It'll help me to learn a new stuff.

[Gleb Krishin]

Thanks, check out my other articles, stay tuned !

[naveennamani]

Wanna build offline documentation for react, typescript and more, checkout my git repo and star it

GitHub - naveennamani/offline-docs: A collection of scripts to build offline documentation for your favourite frameworks/libraries. Simply search, copy/paste the commands and enjoy.

A collection of scripts to build offline documentation for your favourite frameworks/libraries. Simply search, copy/paste the commands and enjoy. - GitHub - naveennamani/offline-docs: A collection ...

GitHub.com

[Gleb Krishin]

thanks for sharing !