DEV Community

Cover image for Front-end Developer roadmap
Gleb Krishin
Gleb Krishin

Posted on • Updated on

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

Discussion (6)

Collapse
bartigorfs profile image
Igor Bartashevich

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

Collapse
dealwith profile image
Gleb Krishin Author • Edited on

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

Collapse
daytonaog profile image
Dima Shorokh

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

Collapse
dealwith profile image
Gleb Krishin Author

Thanks, check out my other articles, stay tuned !

Collapse
naveennamani profile image
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 ...

favicon GitHub.com
Collapse
dealwith profile image
Gleb Krishin Author

thanks for sharing !