So, you want to become a Web Developer?

12 min readJan 6, 2023

Being a Web Developer is the dream job of many … Being able to work from anywhere, being a digital nomad, have the freedom to work at any time of the day from, almost, anywhere in the world (as far as you find a reliable internet connection) and last but not least, being well remunerated. But what does it take to become a Web Developer?

When people ask me “what should I do to become a Web Developer?” I always tell that, being a Software Engineer, in general, it is a journey and not a goal. It is primarily driven by passion, time spent in reading articles, blog posts, tutorials, trials and errors. The job itself is made of a constant level of frustration: things do not work the way they should, code written by other people is incomprehensible to us, new technologies keep arising to the surface and more … So, how do you cope with all of this frustration? Well, it’s pretty simple, that frustration should be the driver. You need to be able to constantly raise the bar, accept the challenge and being aware that, at any point in time, you might face a new challenge. And … you should enjoy the ride and have fun, always! 😎

If You’re Not Outside Your Comfort Zone, You Won’t Learn Anything. This article from Andy Molinsky summarise the concept very well.

Do not choose this job, not even for one second, only for the compensation. You will never find any compensation that covers the level of constant learning, challenge and difficulty of this job! If you want to get rich fast, become a Broker or a Crypto guru 😅

Below I made a roadmap specific to who wants to become a Web Developer. There are multiple ways and multiple roles but the foundations are the same for everyone. Remember, if you want to be a web developer, you need to build an identity and not an objective. The objective, once reached, will slowly dissipate your motivation, but the identity will stick with you forever.

Instead of I want to learn React you should build the mindset of I am a React developer.

The Roadmap to success

For anyone approaching “the web”, there are a set of foundational topics that you must know. No shortcuts, no escape. After the foundation is set, you can decide which path you want to follow.

Foundation
Learn the languages that are fundamental for developing web applications
Tools
Learn the tools which will be used by the majority of the companies out there
Practice
Have 3/4 projects where you show your knowledge of the foundation
Learn some Frameworks
Pick-up a Framework for Front-end and one for Back-end and learn Docker
Practice again
Practice again by having 3/4 projects where you show your knowledge of the frameworks you have decided to learn
Advertise yourself
Learn a Cloud technology, publish your projects and advertise yourself

01 - The Foundation of Web

The web was invented in 1989 by Tim Berners-Lee at the CERN and it was made public in 1991 (wikipedia reference). Since then, technology has evolved drastically but the foundation of web is still the same. A Web Page is an HTML document (the skeleton), embellished by a CSS (Cascading StyleSheet) and made interactive using JavaScript.

The previous picture reflects how a web page is composed. We have the CSS, which is our “look”, we have the HTML, which is our “skeleton” and we have JavaScript, which are our “muscles”.

How should I start?
There are many platforms out there that will help you familiarise with these languages. I cannot recommend a specific one but I have personally used https://www.codecademy.com and the basic courses are actually free. In this post I am going to share all free links and I am not affiliated with any of these companies.

If I could start from scratch today, I will follow this path:

Until you are done with these three basic courses, do not look at anything else. The Foundation is the requirement to ensure your house will not collapse after few months 😏

Additional Free courses

02 - The Tools

Many of my friends, in the “tech community” define the role of Software Engineer like an “artisan”.

An artisan (from French: artisan, Italian: artigiano) is a skilled craft worker who makes or creates material objects partly or entirely by hand.

By doing so, the artisan needs tools. Same goes for a Web Developer. There is a set of tools that you must learn, learn it well and being able to use them in a team setup.

IDE (Integrated Development Environment)
This is probably the first thing. Except you are planning to write code using Notepad, VIM or similar, you want to download and install an IDE and familiarise with it. There are many, below I mention the top 3 free IDE which can be used by web developers. Choose the one that fits better your style and stick with it:

If you are not sure, consider that most of 50% of the Dev community works using Visual Studio Code 😏

GIT
is a free and open-source distributed Source Control System. Git was originally authored by Linus Torvalds in 2005 for development of the Linux kernel, with other kernel developers contributing to its initial development.

So far, in the last 10/15 years, I have been worked only with companies that used GIT, and they used it heavily! You need to know how to use GIT, how to use it via the command line and how it integrates with the IDE of your choice.

Some good tutorials about GIT:

GitHub
It is probably the most popular open source platform to host GIT projects. In order to use GIT and store your code “remotely”, you need a platform. GitHub is the “de facto” platform used to store Open Source projects, private and public personal repositories and more. Most important, a personal GIT account is 100% free.

Why do you need GitHub? Think about it, a Photographer has a Portfolio, which provides an overview of its work and projects. A Model has a booklet of photos, and so on for each professional job, they have “evidence” of what they can produce. A Software Engineer has GitHub, a public portfolio of its projects and code styles. Everything you do: samples, POC, mini-projects; should be stored and made visible on your GitHub. If you use this approach, you will:

Increase your visibility in the DEV community
Have an “always ready” Portfolio for your potential employers
Build a repository of techniques that later on you will be able to quickly access and review

To open a GitHub account, you can register here. Below are some good tutorials on how to use it:

03 - Practice your skills

Before approaching more complex topics, you need to practice. In 2021 and 2022 I have trained few people in my family and network and I noticed that, the best way to build the identity of being a web developer is to craft something.

Following courses and bootcamps is a great idea but you will just fly over topics but what about challenging yourself with a real project? What about facing a problem that you did not encounter during your course? That’s how you start to get into the mindset of software engineering. Additionally, facing a problem while working on a project on your own, will force you to activate the “problem solving” mechanism; a mechanism that you cannot build while watching a programming course or while attending an in-person class.

For this phase I choose 3 specific projects, and there is a valid reason for each. The objective is to use pure HTML, CSS and JavaScript. No frameworks, no libraries just pure foundational code.

A website is a good starting point. You can take inspiration from websites like the www awards website here: https://www.awwwards.com/websites/figma/. Choose an easy one and move to a more complex layout when you are done. For this project, your objectives are:

Learn how to structure page layouts using images and CSS
Learn how to transition from the various pages
Learn how to capture information entered by users (for example a contact form)

Second project should be an app. Typical app is the (in)famous Todo app that you can find in many tutorials. Objectives of this project are:

Understand how you can store information using JavaScript (session store, local store)
Understand how to update the DOM using JavaScript
Understand how to capture user’s behaviours (add task, remove task, change task)

An extra challenge can be to add a drag&drop functionality to it, a bit like how Trello works.

Last project is a Web / Mobile layout. Think about this, from where are you reading my blog post? From your PC, from your Mobile or from your Tablet? I bet that most of you are reading it from their mobile device. This is possible because Medium is fully Mobile compatible. Same should be for any web page out there, they should be Mobile ready.

Pick again one or more website from the previously mentioned www awards website and do your best to make them Mobile ready. Objectives of this project are:

Understand mobile and responsive layouts
Understand how to use media-queries and similar techniques
Understand the limitations of Mobile layouts

I did not mention it before, but all these projects should be properly stored and documented on your GitHub account. Remember, you are building a resume on your identity, you are becoming a web developer 😎

04 - Frameworks

This section will definitively create discontent 😃. Out there you will find people who love React.js, people who love Angular and people that prefer Next.js or Ruby on Rails. Are they all valid frameworks to learn? It depends. If you ask me, I would say learn one, learn it good and specialise yourself into it. If you ask others they will tell you to learn them all and understand the differences. You also need to look at the market, if your plan is to become a web developer specialised in web platforms, probably React.js or Angular are a better bet than Vue.js.

But now let’s have a look on how to learn one framework for Front-end, one for Back-end and Docker.

Learn a framework for Front-end
This is the first step. You can choose from many but, if your objective is to quickly land a job, do not go for the exotic and newest one, but stick to something that will give you a job in the short term. My top 3 goes for:

React.js
A JavaScript library for building user interfaces
Angular
A platform for building mobile and desktop web applications
Vue.js
An approachable, performant and versatile framework for building web user interfaces.

React and Vue have a more similar syntax and project structure, while Angular is quite different in both, APIs and project structure. My suggestion is to query your environment. For example, look at LinkedIn, Monster and other job portals and try to see which of these frameworks is the most wanted in your country. Another approach would be to fly over each of them and go by heart 😍

All the three frameworks mentioned above have an extensive set of tutorials, guidances and articles available on their own website. You can start from there and move forward. Then later you can decide if you want to invest in a Bootcamp, in an online course or in a book.

Node.js
This is the second step. Again, many of you, already experienced developers will argue that Node.js is the best back-end framework out there. The purpose of Node.js is quite simple, you can reuse your JavaScript knowledge, it has a very extensive community and it is hosted by all major Cloud providers: AWS, Google and Azure.

So, what do you need to learn Node.js? In my opinion, there are some basic concepts that you must learn:

HTTP REST APIs
Authentication
Interaction with a Database

In terms of tutorials, you will find an ocean of documentation. Here I want to highlight the major and most basic one that will get you started:

The objective is to familiriaze with the topics and being able to create a new of APIs where you can: Login/Logout, ask or send data, interact with a Database. That’s it, the rest will come by working on real example applications.

Docker
Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers. The service has both free and premium tiers. The software that hosts the containers is called Docker Engine. It was first started in 2013 and is developed by Docker, Inc.

The official website of Docker is here: https://www.docker.com/

To learn docker, you need first to understand docker. You need to know why we use it and how we use it. Do not try to bypass this part because it is fundamental to understand the power and flexibility of Docker.

That’s it, when you are able to run one or more containers explained in the Docker documentation, you will then be able to create new images for your React/Angular/Vue.js front-end and for your Node.js backend.

05 - Practice your skills even more

Now that you got to know the various technologies, tools and components of a web application, it is time to put all of that knowledge into practice and build your Portfolio in GitHub. Remember? We are building an Identity “I am a web developer” so now we need to show this on a portfolio.

For this specific section I pick-up three applications, each one with its own objectives.

To do App
Again, why again the To do app, you might wonder? It’s very simple. A To do app like Trello will let you face a lot of challenges. The User Interface is still simple but the logic behind can become quite complex. Give yourself the following objectives:

Allow users to navigate the app from Desktop and Mobile
Allow users to register and login, in order to see only their own Tasks
Save the tasks on a Database

CRM
A CRM is a Client Relationship Management application. What does it mean? It means that inside a CRM you manage data. A Customer, a customer address, an appointment, a communication and way more.

Why a CRM is important? It is important because you will need to deal with complexity on the Database side, complexity in the User interface. For this project give yourself the following objectives:

Provide an intuitive navigation mechanism
Being able to manage (create, delete, update, search) records
Being able to manage multiple companies, their contacts, their communications and appointments

You can take some inspirations online.

Online store would be the last one. Here things might get more complicated. You will need to deal with images, products, prices, shopping cart, authentication and more.

Remember, keep it simple.

Objectives of this project would be:

Allow users to register, login and logout
Allow users to search products
Allow users to buy products and provide a shopping cart
Allow admins to edit, create and delete products

06 - Further extend your knowledge

Wow, if you read all this article, I am already impressed. If you also commit to follow my plan, then be sure that you are in the right direction to become a web developer.

There are two more topics that you will need to understand. CI/CD and Cloud. It is the begin of 2023 and Cloud is now the de facto, you cannot claim to be a web developer if you don’t know, at least, one hosting provider. There are various and I am not going to tell you which one you should learn, it is up to you.

My suggestion would be to get a “basic” certification, which will help you in understanding the basic of Cloud. Below I list the 3 major cloud provider foundational certifications, it is up to you to pick up one, two or all of them: