How did you feel when you created your first login form on a web page after so many trials and tested templates (don’t say that you created everything from scratch…)? … How did you feel when you give the layout to your first web application after multiple changes (Yes…you took the reference of some other websites or template as per requirement…)?… How did you feel when you successfully handled thousands of users’ sensitive information at the backend to build an application (It was scary…)?
Most of the web developers go through all the above phases and initially it might be frustrating for some of them but the overall feeling is really exciting and amazing when they see their website is live and people are using it all over the world. A web developer is responsible for so many tasks from gathering requirements to designing a website, handling it’s backend part and also making it live successfully for users.
Every year new technology and tools are coming out in industries to boost developers’ productivity and to make the website better for users. It becomes challenging for them to stay on top of the web development game. Today we are going to discuss a complete map to become a web developer in 2020. This will be a practical guideline for all kinds of developers (front-end, backend, and full-stack).
Decide Your Goal or Path First
We will discuss a lot of technologies, trends, and tools but we don’t want you to get overwhelmed, so you need to decide first what do you want to do to become a web developer because that will help you to choose the right tools and technology to learn. There are a lot of different reasons to become a web developer some of the options are given below…
- You want to work for a company as a web developer which is the most popular and common reason.
- You want to work as a freelance developer to start your own business or agency.
- You can become a consultant for other companies.
- You can create your own app to make money.
- Code as a hobby.
From the above area of interest or goal, you can pick up the right tools and technology that is applicable to your goal. If your goal is to become just a front end developer you can choose the tools and technology of frontend development. The same goes for backend and full-stack development.
Basic Tools and Software for Web Development
- Computer & OS: You can’t write code without a computer and OS running on it. To learn web development you don’t need any kind of fancy computer (If you have it’s good…). You can use any kind of mid-range laptop or desktop. For the operating system, you can use MacOS, Windows (Latest version) or Linux whatever is comfortable for you.
- Text Editor / IDE: No doubt VSCode is good for most cases and most languages. It has good performance, great extensions, built in terminal and ton of features as well. In 2019 StackOverFlow survey VSCode was developers first preference as well. You also have some other good options such as Sublime Text or Atom. If we talk about IDEs so Visual Studio (ASP.net or C#), Eclipse and Netbeans (Java). are good options.
- Terminal: You will be working a lot with CLI using some system commands. You can use the default or third-party terminal for your web development project. Bash, Zsh, Powershell, Git Bash, iTerm, Hyper these all are options available to use.
- Design (Optional): Not everbody needs to learn this. In companies there is a specific team to make images, logo or sketches but if you are working as a freelancer then you may have to learn Adobe XD, Photoshop, Sketch or Figma.
HTML and CSS are the basic building blocks of web development. No matter how advanced your web app is or what frameworks and backend language you are using, you will have to build your frontend application using HTML and CSS. So this is the first thing to learn in web development.
- HTML5 (Semantic elements, attributes, doctype, etc)
- CSS Fundamentals Colors, fonts, positioning, box-model etc.
- CSS Grid and Flexbox to align things or create coloumns.
- CSS Custom Properties
Your application should be viewable and usable on all kinds of devices such as smartphones, tablets, desktop, iPad or any other screen size devices. So it’s important to learn about creating a responsive design or layout. Let’s see some important topics for that.
- Learn how to set the viewport
- Media queries for different screen size.
- Fluid Widths
- rem units
- Mobile First
Custom Reusable CSS Components
Instead of relying on large CSS frameworks like Bootstrap it’s good to create your own modular, reusable CSS components to use in your projects. You don’t need to import the complete library if you build your own custom design. You create the component that you only need for the particular UI.
A new trend Saas also has come out recently that helps in writing CSS code more efficiently. If you already know CSS then you don’t need to put so much effort into learning Saas. Saas is a CSS preprocessor that adds more functionality to standard CSS and makes it more efficient. You can use variables, nesting, conditionals to reduce the repetition of CSS and make it more efficient. You can also create your separate Saas file for each reusable component. Sass really saves a lot of time so you should definitely learn it in 2020.
Learning CSS frameworks is a bit less popular than last year but still very relevant or useful for developers who are not good with design. There are a lot of popular CSS frameworks available to use, some of them are given below.
- Bootstrap is the most popular CSS framework to learn. Learning bootstrap helps in learning other frameworks as well.
- Tailwind CSS is other framework which is gaining popularity and it is little different than the others. It is a set of utility classes so that you can create your own buttons and other stuff which really looks different than the others. They are also highly customizable.
- DOM (Document object model)
- Fetch API (Request/Response/Ajax)
- Modern JS (ES6) concepts is really important to learn if you want to move to React, Vue, Angular or other frameworks.
Some Important Tools
There are some tools that you will be using in web development. These tools will help you in debugging, boosting your productivity, managing your code, collaborating with other developers and a lot of stuff like that. Let’s discuss some of these tools.
- Git (Version Control) & Github is the most popular tool that you should definitely learn in 2020. Git helps a lot in collaborating with other developers and managing your code. You also have some other options such as GitLab, Bitbucket and some other ones as well.
- Most of the IDEs or text editors have the ability to add extensions or plugins that is very helpful in boosting productivity and building web apps. For example VSCode Extensions in visual studio code helps in downloading the extension such as live-server or live-saas compiler to work with React.
- Emmet is another great tool that allows you to write really fast HTML and CSS which is helpful in boosting the productivity of developers.
At this point, once you know what tools or technology you should learn for frontend development, you need to know how to deploy your frontend website on the internet. If you are building some tiny applications, landing pages or personal sites for small businesses there is no need to learn AWS or DevOps just because it is shiny and trendy. You will be complicating things more instead of making it simple. There are some tools and steps for deployment that you should learn in 2020.
- Domain Registartion (Namecheap, Google Domains etc.)
- Managed Hosting (InMotion, Hostgator, Bluehost, etc)
- Static Hosting (Netlify, Github Pages)
- SSL Certificate.
- FTP, SFTP (File Transfer Protocol) is good for smaller applications.
- SSH (Secure Shell) for advanced app.
- CLI and Git.
Whatever tools, technologies trends or steps we have discussed till now is a part of frontend development. You don’t know the framework yet but you can build the website for individual & small businesses or you can build a mobile-friendly layout. You can also deploy your small application or project using the tools or technologies we have discussed so far. If you want to apply for the jobs then it would be great to learn some frontend framework such as React, Vue or Angular.
Front-End Framework and State Management
Frameworks allow you to do more advanced frontend development. Frameworks give you a lot of advantages such as reusable components, more organized UI or page interaction. It’s better for collaboration and helps in writing clean code as well. Also, learn about state management. Each framework has different ways of doing this. For 2020 below are some popular frameworks and state managers.
- React: React library is the most popular to learn for web development and it’s fairly easy in comparison of other frameworks and library. There are lot of job available for React developers as well. You can use Redux and Context API with Hooks for state management.
- Vue: Vue is also gaining the popularity and developers can prefer to learn Vue as well. Vue is also easiest to learn in comparison of React and Angular. VueX is the state manager built for view.
- Angular: This framework is generally used in large organizations. It has pretty steep learning curve. Also it’s good to learn TypeScript with Angular. It allows you to use optional static typing and support for the features of ES2015. NGRX and Services are good state managers to learn for this framework.
Optional to Learn:
- Learn about the server-side rendering. NextJS (React) and NuxtJS (Vue) is the framework that allows you to run React and Vue on the server. Both have great features such as Better SEO, File System Routing, Automatic Code Splitting, Static Exporting, CSS in JS and a lot of other features.
- Static Site Generators: Gatsby (React) and Gridsome (Vue)
We have discussed all the majority of frontend development tools and technology. Now let’s talk about the language and technology to become a backend developer or full-stack developer.
Server-Side Language (Choose One)
You should have the knowledge of at least one server-side language. To choose a language in 2020 some of the options are given below…
- NodeJS (Not a language but a runtime environement)
- Python (Good for absolute beginners)
- Java (Good for large organization)
- Php (Good for freelancing)
- Ruby (Less pupolar in 2020)
Note: Whatever server-side language you prefer to learn, make sure that you learn about the data structures and algorithms using that language. Data Structures and Algorithms will help you to render your data for the user and it will help you to optimize your code in web application. We especially recommend you to focus on working with Array and String (Most important). You will be working a lot with both of these.
Server-Side Framework (Choose One)
Once you learn one server-side language of your own choice, go with one of the frameworks for your language. You can choose one of the options given below…
- Node.js– Express, Koa, Adonis, Feather.js, Nest.js
- Python: Django, Flask,
- Java: Spring MVC, Grails
- PHP: Laravel, Symfony, Codeignitor, Slim
- Ruby: Ruby on Rails, Sinatra
- C#: ASP.NET MVC
- Go: Revel
Database (Choose One)
Most of the web apps need a place to store data. In some cases, certain technology or certain languages go well with certain databases. For example: in Mern stack, M stands for MongoDB and in LAMP stack M stands for MySQL but it’s totally up to you which database you want to choose for your application. We are going to discuss some popular databases for 2020.
- Relational Database: RDBMS are still most popular databases. PostgreSQL, MySQL, MS SQL are stiil most preferred to use.
- NoSQL: MongoDB, RethinkDB, CouchDB
- Cloud Database: Firebase, Azure Could DB, AWS
- Lightweight & Cache: Redis, SQLlite, NeDB
When you will be learning databases you will also learn SQL (Structured query language) for RDBMS, ORM (Object Relational Mapper) or ODM (Object Data Mapper).
GraphQL: (Optional) You can learn about the GraphQL which quite popular now a days. It’s a query language for your API. It has a simple syntax similar to JSON and it is fairly easy to implement.
You should definitely learn about the content management system especially if you are freelancing. A CMS is used to add content to your website or application. It is great for clients to be able to update their own content.
- Headless CMS: (Getting popularity in 2020) Contentful, Prismic.io, Strapi.
Deployment & DevOps
Hosting a full-stack app or backend app is a bit more complicated than just a frontend application especially when you have databases. Make sure that you know how to use CLI for deployment. Learn about the below stuff for the deployment of your application.
In most of the companies, there is a different team working on DevOps. So it’s completely optional to have knowledge about DevOps. You can learn that if you are working on your own project.
- SSH (Secure Shell)
- Web Server Environment: NGINX, Apache
- App Hosting: Linode, Heroku, AWS, Azure, Now.
- Virtualization: Docker, Vagrant
- Testing: Unit, Functional, Integration etc.
- Load Balancing, Monitoring, Security.
All the above technology, tools are good enough to make you a frontend, backend or full-stack developer. Choose the right set of tools and technology as per your end goal.
- How to Become a Full Stack Web Developer in 2019 : A Complete Guide
- How to prepare for Infosys - The Complete guide
- How to Write a Research Paper - A Complete Guide
- How to Become a Data Scientist in 2019: A Complete Guide
- How to Become a Data Analyst in 2019: A Complete Guide
- How To Learn ReactJS: A Complete Guide For Beginners
- Switch Your Career to Machine Learning - A Complete Guide
- Google Interview Preparation For Software Engineer - A Complete Guide
- How to Prepare For GSoC (Google Summer of Code) - A Complete Guide
- An Ultimate Guide to Git and Github
- Guide to Install MongoDB with Python | Windows
- Step Wise Guide to start with Open Source
- Step by Step guide to Write your own WordPress Template
- Step by step guide to make your first Wordpress Plugin
- PHP | Ds\Map Functions Complete Reference
- PHP | Ds\Set Functions Complete Reference
- HTML | DOM Complete Reference
- CSS | Functions Complete Reference
- CSS | Selectors Complete Reference
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.