Front-end Developer roadmap
Tags: javascript, roadmap, webdev
Published: 2022-05-15 17:11:31

##### 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](https://www.figma.com/community)

Resources:
1. [Code basics](https://code-basics.com/)
2. [CSS: The Missing Manual](https://www.amazon.com/gp/product/B013VQ7N2M/ref=dbs_a_def_rwt_bibl_vppi_i0)
3. [Flex froggy](https://flexboxfroggy.com/)
4. [Grid Garden](https://cssgridgarden.com/)
5. [MDN HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
6. [MDN CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)

### JavaScript ❤️
The foundation of the Web.
1. [Best JavaScript book](https://javascript.info/)
2. [JavaScript: The Good Parts](https://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742)

### React ⚛️
Really in love with this framework, but wanna try **Svelte** and **WebComponents**.
Resources: 
1. [Documentation - all learning materials you can find here](https://reactjs.org/)
2. [Egghead](https://egghead.io/) 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](https://www.amazon.com/Learning-React-Functional-Development-Redux/dp/1491954620) - 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](https://www.typescriptlang.org/) 😄
2. [React + TS cheatsheet](https://github.com/typescript-cheatsheets/react) - 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](https://docs.docker.com/get-started/overview/#docker-engine)
2. [Introduction to containers](https://www.freecodecamp.org/news/a-beginner-friendly-introduction-to-containers-vms-and-docker-79a9e3e119b/)
3. [Best article about Docker Anatomy](https://itnext.io/getting-started-with-docker-1-b4dc83e64389)

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](https://www.amazon.com/Grokking-Algorithms-illustrated-programmers-curious/dp/1617292230/ref=sr_1_1?keywords=Grokking-Algorithms&qid=1652626099&sr=8-1) can give you good fundamentals
2. [Free course from Princeton](https://www.coursera.org/learn/algorithms-part1)

### Testing
A valuable part of the development process, which is good to know.
1. [Jest](https://jestjs.io/)
2. [Cypress](https://www.cypress.io/)
3. [testingjavascript from Kent](https://testingjavascript.com/)

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](https://www.sololearn.com/home).

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](https://www.linkedin.com/in/julia-mazur-99251a1a2/)