So you’ve decided to become a web developer. Whether it is front-end, back-end or full-stack, this extensive web developer roadmap guide will cover all aspects from the basics pre-requisite to tools and technology that will help you get hired. This is a complete dummies guide so I will cover everything from the very basics. Here is the ultimate web developer roadmap guide to getting started in your career in web development.
Understanding of Computers and the Internet
As a starting point, you need to have a general understanding of how computers communicate with each other. The internet in a nutshell is just interconnected machines. A client(typically a browser) makes a request to a server and the server processes the request and returns the data. Watch this short video to give you a clearer explanation:
Front-end, Back-end or Full Stack
You need to decide on what type of web developer you want to become, whether you’ll be doing front-end or back-end, or becoming a full-stack developer who is proficient in both areas. A front-end web developer is responsible for implementing the visual and interactive elements of a website or application. Back-end web developers focus on building the logic that processes the data for the underlying systems and technologies that support a website or application. In the web developer roadmap, I recommended you start with the front end and then move on to the back end.
Tools
- Browser – You would normally code your work in one browser, I prefer to use Chrome. however, when it comes to front-end, it is recommended you do cross-browser testing across all the major browsers listed below to ensure that the website is working across various browsers and devices. This is typical because not all browsers support all of the latest features of HTML / CSS / Javascript. CanIUse is an extremely useful website which tells you which frontend technologies are compatible with which browsers. Here is the list of major browsers used :
- Code Editor – You’ll need something to write your code and your choice of code editor also sometimes known as IDE or Integrated Development Environment. Here is a list of the most commonly used:
- VS Code (Free) – this is the most popular code editor
- Sublime Text (Free with unlimited trial) – Another free text editor that is popular among developers
- PHPStorm (Paid but free for students and Open Source Projects) – If you work with PHP-based frameworks and popular packages such as WordPress, Joomla, Drupal, Magento and Laravel this is one to go for.
- Terminal – You need to communicate with your operating systems to do certain tasks by running specific commands
- For Windows, you have the options of Comand Prompt / Powershell and WSL and Gitbash
- For Mac – iterm2 with zsh
- For Linux – If you are a Linux user , I don’t need to tell you this
Coding Languages
Next, you need to choose which languages to code in.
Front End
- HTML
- CSS
- Javascript
- Typescript – You should only really learn this after you have good javascript experience.
Back End
- Node JS – Javascript
- Python
- PHP
- Ruby
- C#
- Java
It is worth noting that if you most likely decide to learn C# as a back-end language then you will most likely go through the route of learning MS SQL as your primary database technology and the .NET framework. For hosting you’ll most likely go down Azure over AWS (this is covered later below). In regards to front-end, the tech stack will always be the same as mentioned above.
Framework
There are several frameworks and packages available with pre-built code that enables you to speed up your development. Using frameworks can improve the performance and security of a website, as they often include optimised code and built-in security features that help protect against common web vulnerabilities. You don’t need to learn all of them, ideally, it’s best to look at what’s trending in the job market within the area you live in or looking for work and learn that as an entry point. There are good frameworks out there with a good community and documentation which you can learn for both front-end and backend technologies:
Front-End Frameworks
CSS – There are many however the most commonly used ones on the web are Bootstrap and Tailwind, I would start with bootstrap and then go into Tailwind
Javascript – The list is ever growing, however, there are some contenders :
Back-End Frameworks
- Node JS – Express JS , Hapi, Socket.io, Meteor.js, Koa.js
- Python – Django or Flask are the main contenders
- PHP – Laravel , Symfony, Slim (If you are building a simple API this is a good one)
- Ruby – Ruby on Rails
- C# – .NET Framework
SEO and Page Optimisation
Search Engine Optimisation ( SEO) is the process of a optimising a website visibility and ranking amongst search engines. Here is a list of things your role may involve under which will essentially ensure the websites you work on have a better chance of search page rank results (SERP) : –
- Optimising website performance for page speed. For this you can use Google PageSpeed Insights – It is a free tool provided by Google that gives you recommendation on how to improve the website performance.
- Submitting a sitemap – A sitemap is a file that lists all the pages on your website. Once generated, you will need to submit this to Google through the Google Search Console and You can also submit this to Bing through Bing Webmasters Tool . Once you have submitted the sitemap, you will need to wait for the website to be crawled and it will alert you if any performance issues it detects which you will need to fix to ensure the page
- Implementing structured data and schema markup – Special Markup code that you implement within the HTML of your website so that search engine understands your content better. Checkout Schema.org on how to achieve this. They also have a free markup validator which you can use to test the markup.
- Ensuring your website is optimised for mobile – using responsive design techniques to ensure the website works across all devices and screen sizes.
- Ensuring that the website is accessible to users with disabilities – to ensure that the website is compatible with assistive technologies such as screen readers.
SEO itself is a big topic and there are many other parts to it, whilst you don’t need to know everything about it, it is advisable to learn the basics of SEO.
Version Control
Git allows you to track changes in your code, collaborate with others and enables to test features of work. You typically have a master branch that will hold the production data and what users will see on your live site. you will then create separate branches for each piece of new work or bug fixes you are doing, which will then be tested and then merge back into the master branch. GitHub is the most commonly used code hosting platform that is used out there.
Domains / Hosting / DNS / HTTP / HTTPS
It is generally good to have an idea of how domains, hosting services, HTTP/HTTPS and DNS work. The process for getting a website online starts with you usually buying a domain ( the name of your website i.e. codenathan.com). Followed by hosting, which will enable you to put your coded files onto a server. In most cases, you’ll also end up hosting your own website if you decide to build your own website or run your own web development company.
If you work for a company you’ll end up using AWS Amazon Web Services or Azure for hosting (In most cases if you can learn this on the job when you are starting out but make sure you have an understanding of what hosting and how hosting works). Finally, the hosting providers will provide you access to DNS which will allow you to map your domain to the IP Address related to your hosting server ( A Record).
Databases
Almost all the websites on the web use a database, in most cases, front-end developers don’t have to worry about databases as the back-end developer will be responsible for building endpoints for retrieving the necessary data. You’ll come across different types of databases, such as Relational, Document, Graph and many others. However, the pros and cons vary for each of these types and it all depends on the use cases. I would recommend getting started with relational databases as there are the easiest to understand as they work similarly to how spreadsheets work. Here are some examples from each :
- Relational – MS SQL, MySQL, SQL, PostgreSQL
- Document – MongoDB
APIs
API (Application Programming Interface) is a way for programs to communicate with each other. It allows applications to exchange information or functionality securely and consistently, without requiring any input from the user. If you are front end developer, you’ll need to understand how APIs work in general and how to interact with them, the same goes for a back-end developer however they will be responsible for building and maintaining the code and the logic for the API. There will be cases where your own internal API will communicate with other APIs.
It is generally a good idea to play around with some APIs that already exist out there and use them to build some projects. Here are some APIs with excellent documentation I recommend when starting out :
- Slack API: The Slack API allows you to build applications that interact with their team communication platform.
- Spotify API: The Spotify API allows you to access data and functionality from the music streaming service, including tracks, playlists, and artist information.
- Stripe API: The Stripe API enables you to process payments and manage customers for your business.
- Twitter API: The Twitter API allows you to access Twitter data and functionality, such as tweets, followers, and user information.
If you are building your own API or are testing other APIs such as the ones listed above. I would strongly recommend using a tool like Postman which allows you to send HTTP requests to an API and view the responses, making it easy to test and debug your API calls. Some of the mentioned APIs above have a collection you can download as a JSON file and import into a tool like Postman.
The Beginning to the end of a web developer roadmap
What do I mean by this? It means as a developer you’ll never stop learning, that is a curse but the beauty of being in such a rewarding career. Whichever path you take I hope this guide gives you a good starting point for your career in web development.