How I Became A Full Stack Developer (Roadmap) & Got Internship Opportunities In 2nd Year Of College.

The Roadmap To Full Stack Development

11 min readNov 10, 2022

Full Stack Development is trending now. Everyone who wants to start their business online seeks Developer to make website for their business. I will share you the Roadmap I used to became a full stack developer and got me internship offers. If you love to do web development this article is going to help you a lot. As full stack developer you get to know lots of technologies, even you can start your own web based business if you’re good at web development. Full stack development is going to be in trend in the future as well, because everybody want to make their business or stores online and a full stack developer do it. As a full stack developer you can make decent amount of money, according to Glassdoor the average salary of full stack developer is Rs 800K/yr ($9900/yr) in India & $99680 in USA, even it will be great career option for you to do.

START FROM FRONT-END

Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website, So that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.

Learn following things for Front-End development :

1) HTML

Before learning React you need to have some basic knowledge about HTML. learn most used tags and semantics in the HTML.

Semantic HTML
Forms & Validations

2) CSS

CSS is best language for designing, when it comes to CSS the scope is very vast, learn some points given below :

Basic Selectors & Syntax
Pseudo-Classes
Box Model
Flex-Box
Grid
Positioning (Relative/Absolute)- Units (px, em, rem, vh…)
Responsive Design
Media Queries, Animation, Transform

for designing UI we have more libraries like react-bootstrap, tailwind css, material UI. But understanding of above topics will help you to custom your design.

3) JavaScript

JavaScript is one of the most trending scripting language & we are using it in almost all web applications. JavaScript is quit vast. It is best for you to learn JavaScript as much as possible to write better code and to get started with React below topics must be covered :

Basic Syntax
Events
Let, Const
Template Literals
Arrow Functions
Spread/ Rest Operators
Object / Array Destructing
Class & Objects
Module Imports/ Exports
Promises, asyn/ await
Arrays, Functions, Events
ES6 JS
DOM Manipulation
Fetching API’s
Ajax Json

CHOOSE A FRAMEWORK

1) CSS

Bootstrap

Bootstrap has lots of predesigned templates, functions which make our CSS work more easy and saves our time. Bootstrap is so easy that even if you have basic knowledge of HTML & CSS you can use it, Bootstrap make it more easy to create responsive design.

Materialise, Tailwind, Bulma

Materialise UI components help in constructing attractive, consistent, and functional web pages, while taking modern web design principles such as browser portability, device independence, and graceful degradation.Materialise UI helps in creating faster, beautiful, and responsive websites.

Tailwind CSS speed ups to write and maintain the code of your website. By using this utility-first framework, you don’t have to write custom CSS to style your application. Instead, you can use utility classes to control the padding, margin, color, font, shadow, and more of your application.

With Bulma, the extensive range of built-in features means faster turnaround and less CSS code writing. Bulma is also fully open-source, which means that Bulma’s original source code is freely available for download — there’s no limit to how far you can extend its functionality.

PREPROCESSORS (CSS)

The CSS preprocessors will help developers to add some features that don’t exist in pure CSS, such as mixing, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.

SASS

SASS allows you to use features such as variables, nestings, modules, etc. that don’t exist in CSS. Apart from SASS, there are two other important CSS extensions — Stylus & LESS (Leaner Style Sheets). With the help of SASS, you can improve DRY (Don’t Repeat Yourself) CSS and make your code more readable.

LESS

Less is a CSS pre-processor and after compilation it generates simple CSS which works across the browser. Less is faster and easier. Cleaner structure due to the use of Nesting. Less codes are simple and well organised as compared to CSS.

2) JavaScript

React

React is the best for web and UI developers to develop highly responsive, beautiful components. React is much loved for its shallow learning curve, time-saving framework, and responsive components. To date, more than 2 million websites are built using React, and the numbers are increasing still.

Angular

One of the benefits of Angular is that it builds highly testable websites and applications. It allows end-to-end testing and unit testing (used for checking the app performance and verify whether it works as per client requirements) which makes debugging and testing easier.

Vue

Vue provides a progressive approach to writing markup, Like most frameworks, Vue lets you create reusable blocks of markup via components. Most of the time, Vue components are written using a special HTML template syntax.

VERSION CONTROL SYSTEM

The Version Control System helps to manage the source code for the software team by keeping track of all the code modifications. It also protects the source code from any unintended human error and consequences.

Git

You must be aware of how to use basic git commands so that you can clone a repo and can perform basic operation like commit, push, fetch…

Github/ Gitlab

If you want to complete your web development project with other developer then to collaborate, GitHub is the best platform. On the other hand, GitLab can be used if the project calls for continuous integration. So there you have it.

PACKAGE MANAGERS

A package manager keeps track of what software is installed on your computer, and allows you to easily install new software, upgrade software to newer versions, or remove software that you previously installed.

npm

You should be aware of how to use npm to help you run and test a ReactJS app locally.

yarn

Yarn allows you to use and share (e.g. JavaScript) code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.

BACKEND DEVELOPMENT

Back-end development means working on server-side software, which focuses on everything you can’t see on a website. Back-end developers ensure the website performs correctly, focusing on databases, back-end logic, application programming interface (APIs), architecture, and servers.

CHOOSE A LANGUAGE :

Python

Python is easy to read and write. Python’s English-like syntax was designed to be easy to decipher. It also requires fewer lines of code to achieve a needed result compared to such languages as, for instance, Java.

Java

Java is another exemplary programming language for backend web development. The object-oriented programming language is widely used for developing enterprise-scale web applications along with the development of android applications, desktop applications, scientific applications, etc.

PHP

PHP is designed as a fully backend-focused language, it can be well integrated with HTML, centralized servers, and databases, and will be the best choice for LAMP stack projects including Linux, Apache, and MySQL.

Ruby

Ruby on Rails is used as a backend framework for web applications. It’s known for efficiency and scalability. You can write best functionality with much fewer lines of code as opposed to what you’d need in Java or Node.

FRAMEWORKS

Python- Django

Django is the best framework for web applications, as it allows developers to use modules for faster development. As a developer, you can make use of these modules to create apps, websites from an existing source. It speeds up the development process greatly, as you do not have to code everything from scratch.

PHP- Laravel

Laravel routing can create websites that are search-engine friendly. Laravel offers various modules that help you smoothly create complex and large applications.

Java- Spring

Spring enables developers to develop enterprise-class applications using POJOs. The benefit of using only POJOs is that you do not need an EJB container product such as an application server but you have the option of using only a robust servlet container such as Tomcat or some commercial product.

DATABASE

Databases are used for customer feedback forms, website polls, and inventory lists. Personal web databases are a useful way to store email addresses, or even for a home inventory list.

RELATIONAL

MySQL

MySQL is the de-facto standard database system for web sites with HUGE volumes of both data and end-users (like Facebook, Twitter, and Wikipedia). Another great thing about MySQL is that it can be scaled down to support embedded database applications.

Oracle

Oracle services for containers and server less help developers build applications using technologies, such as Kubernetes, Functions, and API Management for OCI, hybrid cloud, and multi cloud environments.

PostgreSQL

PostgreSQL has the architecture, reliability, data integrity, robust set of features, extensibility, and the dedication of the open-source community behind the software to deliver innovative, high-performance solutions.

NON-RELATIONAL

mongoDB

mongoDB can help organisations develop modern web-based applications is MongoDB. This database enables organisations to build scalable and data-driven applications.

Firebase

Firebase provides detailed documentation and cross-platform SDKs to help you build better web applications.

CouchDB

CouchDB components can be used as building blocks that solve storage problems in slightly different ways for larger and more complex systems.

SOME OTHER SKILLS

Testing/ Debugging

Testing is to identify what happens when there is a mistake in a program’s source code. The purpose of debugging is to locate and fix the mistake in the code.

API’S

API’s allow developers to create complex functionality more easily.

Web Security

Web security is important to keeping hackers and cyber-thieves from accessing sensitive information.

Servers

The main job of a web server is to display website content through storing, processing and delivering webpages to users.

NOTE

Learn NodeJS

NodeJS is an open source, cross platform in nature that runs across various platforms. It is a JavaScript runtime environment that executes JavaScript outside a browser.

ADDITIONAL SKILLS (DEV OPS)

SSH

SSH provides a secure way to access a computer over an unsecured network.

HTTP/ HTTPS

HTTPS is HTTP with encryption and verification. The only difference between the two protocols is that HTTPS uses TLS (SSL) to encrypt normal HTTP requests and responses, and to digitally sign those requests and responses. As a result, HTTPS is far more secure than HTTP.

LINUX COMAND

Linux is considered to be more secure than Windows. No antivirus is needed. Since it is open source, several developers are working on it and everyone can contribute code. It is likely that someone will find a vulnerability long before hackers can target a Linux distro.

DSA

Knowing the algorithms and which one to use makes all the difference while writing code. As a back-end developer, good knowledge of DSA is necessary for efficient storage management and retrieval of data while preventing memory leakage.

.NET & ASP.NET FRAMEWORKS

Websites on windows have authentication which makes the applications more secure. In ASP.NET applications, source code and HTML files are together, so ASP.NET pages are easy to manage and write.

CHARACTER ENCODING

A character encoding provides a key to unlock (ie. crack) the code. It is a set of mappings between the bytes in the computer and the characters in the character set. Without the key, the data looks like garbage.

AWS

AWS enables you to select the operating system, programming language, web application platform, database, and other services you need. With AWS, you receive a virtual environment that lets you load the software and services your application requires.