Ever thought about building a web site or application? Maybe it seemed too hard. But guess what? It’s easier than you might think! Web development isn't just about complicated code and algorithms. It’s really just a sequence of steps.

I’ll walk you through the basic needs and steps to become a web developer.

Basically there the three types of web developers.

• Frontend developers - A frontend developer architects and develops websites and applications using web technologies
• Backend developers - Type of programmer who creates the logical back end and core computational logic of a website, software or information system.
• Full Stack developers - Developers who develop both backends and frontends.

Becoming a frontend developer

The front end is the user interface you see in a web app. Here’s how to get started as a front-end developer.

HTML - (Hyper Text Markup Language) Think of HTML as the skeleton of a web app. It's not a programming language, so don't think you can hack into NASA with it! You can find lots of resources online to learn HTML, like w3schools and tutorialspoint. Learning HTML is important to understand the structure of any web app.

CSS - (Cascading Style Sheets) CSS styles the web app. Need to change the background color or font size? That's where CSS comes in. Check out w3schools and tutorialspoint for CSS tutorials.

JavaScript - JavaScript is very popular right now. It adds function to your web app, like making API calls or creating animations. It’s easy to learn, and you can use “Vanilla JS” in your web apps. Resources like w3schools and tutorialspoint can help you learn JavaScript.

With just these three, you can build good-looking websites. Pure HTML, CSS, and JS can be kind of hard when building web apps, so libraries and frameworks can help. But first, get a strong grip on HTML, CSS, and JS, and you’ll understand frameworks and libraries much easier.

When developing the UI elements you need to define custom CSS for each and every element. And using pure HTML elements are not user friendly. Therefore there are some UI frameworks that you can use to style the UI elements. From them the most popular one is Bootstrap.

Bootstrap - Bootstrap is a free and open-source CSS framework that helps you build responsive, mobile-first websites. It has HTML, CSS, and JavaScript templates for buttons, forms, and navigation. If you learn HTML, CSS, JS, and Bootstrap, you’ll have a solid understanding of front-end development.

After you learn the basics, work on some small projects. It will help you remember what you learned. Here are some ideas.

• A personal biography page (Make it look good and professional!)
• A basic calculator app
• A to-do list app
• After completing those challenges you can brush up your skills in developing the front-end of web apps.

Using libraries and frameworks for frontend

If you had developed web pages using HTML,CSS and JS you will face some major problems like the code is repeated again and again and we can’t reuse UI elements in different places. But by using frameworks and libraries we can overcome these problems.

In the web development perspective there are many frameworks and libraries we can use. But in this article I will discuss mostly about the NodeJS framework and it’s associated libraries.

Node.js is an open source, cross-platform, backend JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser, which was designed to build scalable network applications. To build web apps first we need to install Nodejs to our computer. It just a simple task that you can do individually.

On top of the NodeJS there are libraries which we can use to create web apps. From them the most popular one is ReactJS.

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.

React is easy to pick up, and you can find many tutorials online (just search React tutorials on Google). With React, you can reuse UI components, which means less repeated code. It also has a large community, so it's easy to find help.

After learning the React basics you can build some smaller projects and brush up the skills. Few ideas for the projects are,

• Build an e-commerce web app
• Calculator
• Small messenger app

There are many libraries which we can use with react for different purposes. Some of them are,

• Redux - For the state management
• Axios - For API calls
• MUI - User interface components
• react-router - To add routing to the app

Apart from React there are many UI libraries and frameworks that you can use to develop the frontend. Some examples are,

• Angular JS
• Vue JS

It is not required to learn all the available UI libraries and frameworks to become a front-end developer. If you have time and eager you can do it. But if you know basic concepts you can learn any framework within a small time period.

Becoming a backend developer

The back end, or server-side, has the server that provides data, the application that handles it, and the database that stores the information. For example, if someone is browsing phones on the front end, the back end sends the available phone data to the front end.

Right now, you can use a lot of frameworks to build back ends, such as

• ExpressJS (JavaScript)
• Spring Boot (Java)
• Django (Python)
• Laravel (PHP)
• NestJS (JavaScript)

You don’t have to learn all of these. They’re almost all the same when it comes to basics. Learning one framework and practicing it is good enough.

With these frameworks, you can build API endpoints that clients can access. For example,

Here the endpoint is “/signup” and the method is POST. This endpoint can be accessed by any of the application. In this endpoint we want to register the user. To register the user data should be saved. Where to store data? Answer is simple “Database”.

There are mainly two types of databases we use with backends'.

• Relational Databases
• Non-Relational Databases (Document)

From the back end, you connect to a database and query it based on what the user needs. You need to know about queries and methods.

MySQL and PostgreSQL are examples of relational databases. You’ll need to know SQL queries to work with them. You can find tutorials on w3schools and tutorialspoint.

After learning, build a few example projects to sharpen your skills. Here are a few ideas.

• An e-commerce site back end
• A to-do app back end
• A messenger app back end

Since backend server endpoints are accessible to everyone, you need to think about security. If you don’t, hackers can access data, which isn’t good for you or your product. Security is key for back ends.