A few weeks ago, I barely knew anything about web-development. Upon doing research, I instantly felt overwhelmed – due to the vast amounts of different languages, frameworks, concepts and mindsets that you can start with.

I realized that for beginners, with no background in coding or IT, the bigger challenge isn’t learning programming languages – its learning where to begin and what path to take.

Most courses focus on just learning coding, however there is a lot more than just understanding how to code.

I have mapped out a logical and practical roadmap starting from a complete beginner, progressing you to a full-stack developer.

 

STAGE 1: Understanding fundamentals of the web

A good starting point is to do research on understanding the very basics of the internet:

• How websites work
• What browsers and servers are
• What HTTP and HTTPS means
• The difference between frontend vs backend
• What is a domain
• What is meant by hosting
• What databases are
• What API’s are

It is only necessary to learn the definitions and understand the broad purposes of each of the above, not necessarily to know how/why they work. Understanding the brief definitions of these concepts will familiarize you with what you will eventually be working with. You can learn all of these concepts simply by doing research.

Once learning the difference between frontend and backend, it is good to learn what different programming languages there are, and which of the above they mostly fall into:

The main 3 languages that form the fundamentals of every website and web-application

• HTML
• CSS
• JavaScript

Each of these have specific purposes that work together to form interactive, modern web applications. HTML is the content and structure of the webpage, CSS is the styling and visuals of the webpage, and JavaScript adds functionality to the website, making it interactable. Using a house as an analogy:

• HTML is the walls, floor and roof
• CSS is the paint and decoration
• JavaScript would then be the wires, pipes that bring electricity and water

It is a good idea to learn these three languages together in that order over the course of a few weeks/months

 

STAGE 2: Learn HTML

As mentioned earlier, HTML refers to the structure and content of a webpage.  It is good to do a structured course such as the one on freecodecamp. This will enable you to be able to build extremely simple webpages.

To practice HTML on your own, you can write it using simple text editors like Notepad (Windows) or TextEdit (Mac), however real web developers instead make use of a code editor. During any one of these first 3 steps, you should install a code editor, as then you will already from the beginning be coding how it is done professional.

A recommended code editor is VS Code (Visual Studio Code), as it is:

• Free
• Beginner Friendly
• Works for all the languages and frameworks outlined in this blog
• Used professionally

 

STAGE 3: Learn CSS

CSS creates the styling of a website/webpage

After learning CSS you will be building complete static websites

 

STAGE 4: Learn JavaScript

JavaScript adds functionality to websites making the user able to interact with them. This is where you will spend most of your time. It is ideal to do a deep dive course in JavaScript to fully master this language.

Courses can be found in various places such as one Udemy.

During this stage you should focus on building many projects to gain experience, and build up a portfolio

 

STAGE 5: Learn Professional Tools

Modern developers use many more tools than just programming languages.

Find documentation, resources and videos, and practice using the following:

• Git – a version control system
• GitHub – a website that stores Git online
• Browser DevTools – a window into everything happening inside the browser – It’s important to know the important tabs, and what each tab displays and can be useful for

 

STAGE 6: Learn TypeScript

TypeScript is another programming language that builds on JavaScript. It helps catch bugs before your code runs. TypeScript is compiled into regular JavaScript automatically in order to be executed in browsers.

It is essential to first learn JavaScript before learning this.

It is recommended to learn TypeScript as most companies expect you to know it, even if it isn’t specified.

 

STAGE 7: Learn a frontend Framework

A framework is a pre-built foundation that takes care of a lot of the underlying work.

There are various frontend frameworks (frameworks make programming languages easier). Popular choices are React, and Vue.

Once you are fully confident with a front-end framework, you can technically call yourself a front-end developer.

If you are not wanting to do full-stack, and rather only be a front-end developer, it is a good idea to learn other frameworks so that you are versatile and can swap between them interchangeably – making you valuable to companies.

 

STAGE 8: Learn Backend Development

This is the stage where you choose a backend language to learn, and a framework.

Recommended languages would be PHP or Python. With PHP, you can learn through the Laravel framework as the Vue + Laravel combination is considered one of the top combinations.

A different path you can look into is to use JavaScript with Node.js for backend, with the Express.js. framework. The advantage of this is that you already know JavaScript.

 

STAGE 9: Learn SQL and Databases

The next step for back-end development is to learn about databases. It is important to learn:

• SQL
• Database Design
• Relationships

SQL is specifically designed for working with relational databases, can be used within almost every other language, and is useful for frontend, backend and even testing.

After this, you should learn one SQL database, such as MySQL

 

STAGE 10: Learn Other Development Concepts

At this stage, it is a good idea to do research and learn about the following:

• Authentication
• Unit Testing
• API testing
• Deploying applications
• Basic DevOps concepts

 

After this is important to learn how developers operate within the workplace such as understanding the following concepts:

• Agile
• Scrum
• Kanban
• Jira
• User Stories
• Sprint Planning
• Standups
• Code Reviews
• Pull Requests
• Branching strategies
• Documentation

These are everyday realities in software teams

 

Build a portfolio

This is something you do throughout the entire process, from stage 3/4. As you learn you should build different projects which will give you experience and practice, which is what employers mostly look for.

Common types of projects to build in your portfolio:

• Calculator
• To-do App
• Weather App
• Notes App
• Expense Tracker
• Movie App
• Chat App
• E-commerce Store
• Booking System
• Blog CMS
• Full-stack Social Media App

It is also a good idea to learn other frameworks once you are fully confident in the ones you specialized in, as once you learn one, the others will be much easier to learn as they are similar. This way you are extremely versatile and valuable as you can work on projects that use different frameworks.

At this point you are a junior full-stack web developer, and you can decide to continue in this stack, or even broaden your skills by learning mobile development such learning Dart as a language for flutter, etc.

This roadmap is something that takes time, dedication and is achieved over the course of the next few years, depending on how much effort is put into this journey. There is no “correct” way or roadmap to follow, and this certainly does not cover everything, however it will definitely make you employable as a junior full-stack developer, and these are the most important steps to take to reach this title/skill level.

Once you are employed, your employers and projects will require you to learn different things on the job, or to upskill, learn different frameworks and languages, however once you know the ones outlined in this roadmap, learning other syntaxes will be much easier.