The beginner’s web developer roadmap (with details)

To have a good start as a Web developer it is extremely important to understand what it means.

The beginner’s web developer roadmap (with details)

To have a good start as a Web developer it is extremely important to understand what it means.


Web development is the process of building and maintaining static websites and also interactive web apps. So by the definition, Web developer should know the technology and tools with wich he can complete entire procedure.

Web developer can do all the needed work by himself, or he just can focus on a part of a job. Web developement can be split into three types of roles:

  • front-end development,

Responsible for visible part of the Web app and website, like images, inputs, animations; whole look of the app.

  • back-end development,

Responsible for entire process which is invisible to the user, for example fetching database, user authentication, etc.

  • full-stack development.

It combines two roles mentioned above.

In this article the path of the beginner web developer starts from learning fundamentals of front-end, then back-end. For majority, this exact „road” should be easier and give more fun.


Full-stack roadmap

  1. Understanding the Internet

Every webdeveloper should know basics, fundamentals of the:

  • Web working,
  • what is HTTP, HTTPS,
  • how does browser works,

It is not so cool as coding, but sacrifacing hour or more can really help beginner webdeveloper in for example debugging, when back-end do not work correctly.


2. Get acquainted with HTML and CSS.

This part is about first steps in coding. A little bit of basic knowledge of HTML and CSS syntax can provide enough skill to create first website. In this part it is so important to do not get caught in tutorial hell. Learn basics and code your own templates with combination of aquired and „to aquire” skills. This practique can boost beginner developer to insane level.


3. Learn javascript.

Javascript is necessary to create simple and complexed web apps, like e-commerce, blog or even social media app (Facebook, Instagram). It is recommended to master data structure and basic alghoritms. It is not as exciting as learning latest technology, but it „builts strong fundamentals”.

Important things to learn:

  • control flow: if statement, switch, for loops, etc.,
  • simple functions,
  • error handling: „console.error”,
  • data models,
  • asynchronius functions,
  • DOM manipulation,
  • object oriented approach,
  • es6.

4. Javascript framework

Every Web developer wants to create more and more efficient apps, websites, etc. Choosing and mastering one concrete javascript framework is the path which Web dev should follow. There are three main frameworks:

  • React,
  • Angular,
  • Vue.

Get acquinted with pros and cons of every framework, see if the syntax is appriopriate for you and master one of them.


5. Package manager

There are mainly two options, choose npm or yarn.


6. Git & GitHub

One important issue is about being able to know the differences between those two. Then learn how to control version of the project, adding and removing a branch, merging. The next mile step is to making repo on GitHub and pushing source code to this remote repository.


7. UI/UX

This part is about creating „user interface” and „user experience”. Even fundamental knowledge how to sketch wireframe, design the layout, insert inputs and buttons in the most efficient way.

This is the place where front-end developer can stop, master mentioned parts of the roadmap and of course learn latest tech and be up to date with latest frameworks.

It is necessary, to mention that back-end developer do not start learning from this point, he should know for example git and GitHub or javascript, if back-end is developed with node.js. Moreover, basic knowledge of The Internet specififcation, HTML is also appriciated.


8. Back-end programming language

This is the moment of choosing appriopriate programming language and framework, where it is needed. There is a wide variety of backend languages, for example:

  • javascript,
  • Java,
  • python,
  • ruby,
  • php,
  • C#,
  • go,
  • rust.

It is important that, there is not an ideal chose. Every developer should find the appriopriate language for himself, by analyzing pros and cons, syntax, etc.


9. Database

In programming world there are different types of databases, for example:

  • relational databases,
  • distributed databases,
  • object-oriented databases,
  • centralized database,
  • open-source databases, etc.

However, Backend Web dev mainly works with SQL and NoSQL databases. It is worth to mention Document/JSON databases which acquaintance can help with APIs.

As far as this issue is concerned, backend dev may be in a position where maintaining different types of databases will be required, so it is extremely important to have one favourite and know basics of the rest.

Popular databases:

  • MySQL,
  • oracle,
  • PostgreSQL,
  • Microsoft SQL Server,
  • MongoDB,
  • Casandra.

10. Containers.

Containers provide ability to create isolated environments, so that the app can be run anywhere. This is one simplified advantage, which should raise interest of learning this. The most popular tool is a docker, it has great community and documantation, which makes it easy to learn.

Basically, this is the end of the roadmap. Fortunately, web development is still growing, technology is not stacked, what means that every dev should not only be focused on the projects which require skills which he learned few years ago, but also he should manage same time to be acquinted with latest tools and frameworks.


Do not give up, never stop learning!