DEV Community

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

Posted on β€’ Edited on

14 8

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

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 !

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay