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