Web Developer Roadmap 2024

In this note, I will outline the path to becoming a web developer in 2024 or improving your skills by learning cutting-edge technologies. I will introduce the courses, videos, and books I have used throughout my journey, and hopefully, they will be helpful to you throughout yours.

Frontend vs Backend

The divide between frontend and backend engineers is increasingly less useful. Frontend developers are no longer just writing HTML, CSS, and JavaScript. It's now common to see a frontend-focused developer build an entire web application from scratch.

Product Engineers work backwards from the desired product experience to the set of technologies that enable it. Nice blog post by Lee Robinson from Vercel on Product engineers.

General resources

• MDN
• Scrimba
• Frontend masters
• Coursera
• Udacity
• Udemy
• egghead

Habits & Mindset

Learning to code, or becoming better at it, is like learning anything else in your life, for example, learning to play the guitar. It's a process; you need to practice every day over some time to learn and continue to improve.

So it would help if you built a habit of learning every day. Usually, the most challenging part of doing anything is to start. The key is to start small, like 15 to 30 minutes daily.

Here is what you can do:

• Try to wake up 30 minutes earlier than you regularly do.
• Dedicate that 30 minutes to learning every day.
• And keep going…
• Thank me in 6 months.

Resources

• Atomic habits by James Clear
• Mindset by Carol Dweck
• Feel good productivity by Ali Abdaal

Tech Stack

• HTML: the structure of a web page. Heading, paragraph, link and image tags.
  • Resources
    • MDN
    • Scrimba
• CSS: the design and style of a web page. Things like colors, fonts, layouts and animation.
  • Resources
    • MDN
    • Scrimba
• JavaScript: adds user interactivity to an otherwise static page. Is the magic behind the dynamic behaviour of web applications.
  • Resources
    • MDN
    • Learn JavaScript
    • Scrimba
    • Eloquent JavaScript by Marijn Haverbeke (book)
• Git & Github: version control and remote repositories.
  • Resources
    • MDN
    • The coding train
    • freeCodeCamp
• React: JavaScript framework for building UIs.
  • Resources
    • React learning path
    • Learning React by Eve Porcello (book)
    • Frontend masters
    • Scrimba
    • ui.dev
• Backend server: servers and APIs using NodeJs & ExpressJs.
  • Resources
    • MDN
    • Web development with Node & Express by Ethan Brown (book)
    • Express documentation
    • freeCodeCamp
• Databases
  • Resources
    • Mongo
    • Frontend master PostgreSQL
    • Planetscale intro to MySQL for developers
    • Prisma
• NextJs: React framework for building production ready applications.
  • Resources
    • The Ultimate NextJs Course
    • NextJs learning path
• TypeScript: extends JavaScript by adding types to the language.
  • Resources
    • Free TypeScript Tutorials by Joe Previt
    • Free TypeScript tutorials by Matt Pocock
    • No BS TS by Jack Herrington

Recap

In this note, we discussed the path to becoming a web developer or improving your skills by learning cutting-edge technologies. Remember, learning to code is a process that requires daily practice and a growth mindset. Start small, build a habit of learning every day, and keep going!