I’m writing this piece to help fellow coders, even the first-timers who have an aim to earn the title of a Web Developer in 2021 and also to be able to develop meaningful projects. This article will definitely help you take the right path in your From Zero to Mastering Web Development journey as a concrete roadmap to follow throughout!
The Roadmap has no section of pre-requisite skills as such, but there is the First Stage of learning every developer should be well versed in before diving into the actual development part. I’ve termed this set of skills as - Let’s Warm Up!
Then comes the two faces of the same coin - the Front-End and Backend areas of web development. These two stages are solely based on your interests, whether you like to see and create visual designs, layouts or enjoy handling and querying databases.
So, let’s begin with our first common stage of - Let’s Warm Up!
Let’s Warm-Up
This stage includes the basic skills that we need to grasp firmly before we move on to the next stage. The list of learnings of this stage are as follows:
Command-Line Basic: This is a fundamental skill every techie should know before diving into the world of GitHub. Basic Linux/DOS commands, and how to effectively use the terminal is a must to proceed further.
Tutorials:
Git and GitHub: The basic needs in the life of a coder are these two - version control system - Git and the hub of code repositories, to learn, share and contribute - GitHub. To learn about them, there are numerous articles, videos, and tutorials on the internet.
Tutorials:
Web Protocols: Basic knowledge of HTTP, HTTPS, and SSH is enough to proceed with the actual roadmap to be a web developer.
Data Structures and Algorithms: The basic building blocks are to be well versed with the language of your interest. It can be either Java, Javascript, or Python. Being confident in this section can earn you fortunes.
Tutorials:
Fluency in Programming: It is of utmost importance to understand that the tools, frameworks, and libraries are of no use unless and until you can bind them all together in a language seamlessly. An idea of how common programming languages like C, C++, Java or Python, etc. works well enough to kick start your dev journey.
After having skimmed through these basic learning stages which I’ve termed as warming up, we are ready to explore the Front-end and Backend areas of Web Development.
Front-end Development
Mastering the front-end, the UI/UX is not as easy a task as it seems to be. We will proceed step-by-step in this stage and would urge my readers to proceed to the next framework, only when they are capable of developing the given projects using the particular and above-mentioned tools/frameworks only!
HTML and CSS: Mastering the plethora of web development begins with basic HTML and CSS. The structure and styling of the web pages, elements, layouts, everything can be done only using these two pillars. Some tutorials to follow and the project that is expected from you to build after having learned these are given below:
Tutorials:
Project Ideas:
- A greeting card web page
- Basic Portfolio Website
Javascript/Typescript: You may be thinking that HTML/CSS web pages are nowhere close to the website l imagined to build. Well, Javascript is a magic language you can say which will bring the magic potion of interactivity and responsive flow to your dull website. Along with some Typescript knowledge, you will be all set to be known as a front-end developer!
Tutorials:
Project Ideas:
- To-do-list app
- Food/Weather web app using some API
- Redefine your portfolio website
React.js: This is one of the most popular frameworks currently, mainly because of its easy implementation and the ability to deliver modern one-page websites in a limited time frame due to reusable components. React.js framework is originally developed by Facebook and is open-sourced.
Tutorials:
Project Ideas:
- Twitter/Instagram Clone web app
- Messaging/Chatbot web app
- Social media app
- Redefine your portfolio website a bit more!
Angular.js/Vue.js/Next.js: These are other frameworks having support for Javascript or Typescript and are used to build modern webpages within limited time constraints. I’m a beginner in these technologies right now. You can check out the tutorials below if you wish to master these:
Tutorials:
👀
A note to my readers, if they want to be a full-stack developer, that is mastering both front-end and back-end technologies, then one can proceed to the backend learning stage when they have successfully surpassed learning Javascript! Not being sarcastic here though as Javascript is really an ocean to swim through! Best of luck. 🚀
Backend Development
There are several options to choose from in the case of backend development - Python, Ruby, Spring, PHP, Django, and much more! There are no step-by-step tech stacks here as in the case we witnessed for the front-end. You can pick one that suits your needs and you are ready to go!
Java and Spring: This is my favorite stack as I’ve been using this extensively at work for over six months. You can make complete functional enterprise applications using Java and Spring as backend technology. I would recommend you to begin with this tech and explore the subsequent technologies thereafter.
Tutorials:
Python and Django: The go-to-choice for Pythonistas for developing a backend in Python is to use the Django framework. It is in itself a full-stack framework with an attractive default UI. Moreover, Django websites are easy to deploy on sites like Heroku.
Tutorials:
Node.js: If you want to develop your whole website, integrated with the backend in Javascript, then choosing Node.js is the best bait!
Tutorials:
PHP and MySQL: This had been the first choice during my college years to build something fast and dynamic. If you are a novice, I would highly recommend starting your backend journey learning PHP and MySQL.
Tutorials:
Ruby: Ruby language has the web development framework Rails which is used as a backend technology. You can explore more about it by referring to the tutorials.
Tutorials:
So, with this, I wish all the best to my readers and sincerely hope they would have a firm grip over the web development technologies and refer to the above roadmap, to begin with, the learning journey.
Thank you!
Chandrika Deb 👀 ❤️
Checkout my Website!
Top comments (5)
If you didn’t already know: roadmap.sh/
Flask is a great light weight alternative to Django , especially for beginners. If you want to make a one page site and maybe an API and some templating, Flask quick and easy. Django makes sense if you want to have a database and models based in and have files for your admin view. Even with years of Python experience and part of job once in Django, I still way prefer Flask. Django makes a lot of boilerplate code in your repo which you didn't write yourself and so it can be intimidating to know where to make a change in the code.
The language and point is confusing here.
I'd rather say that if one starts with the frontend, then get the fundamentals of HTML, CSS and JS down but not mastered, then move to add backend skills. Especially since if you using templating like in PHP or Django you need to know about HTML and CSS.
You can also do a lot on the backend side of the full stack journey with minimal JavaScript. JavaScripts adds interactivity to the styled content added with HTML and CSS. And unless you make a SPA like with React or Vue, your site will be very usable still with JavaScript disabled. Except if you are going to pull in some dynamic data or doing ecommerce.
Can you add the name of the links especially as there are a lot, so they are easy to follow
Goood jobbbb