DEV Community

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

Posted on • Edited 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

Top comments (9)

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 • Edited

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
 
sergeysova profile image
Sergey Sova

I can suggest learning Effector business logic manager

Collapse
 
dt_reshape profile image
dt-reshape

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

Collapse
 
dealwith profile image
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

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

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

thanks for sharing !