Getting Started with Web Development
Have you ever imagined of building a web site or a web application and wondered how complicated it would be? If yes, would you believe that it’s just a simple thing and there’s no rocket science behind? Is web developing all about huge programming concepts, algorithms and lots and lots of stuff? Absolutely not! It is non other than just a sequence of steps you need to follow.
By this article I will discuss about the basic requirements and the path that you need to follow up to become a web developer.
Basically there the three types of web developers.
- Front-end developers — A front-end developer architects and develops websites and applications using web technologies
- Back-end 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 front-end developer
Front-end is the user interface that we see when we go to a web app. Here are the steps that you need to follow to become a front-end developer.
- HTML — (Hyper Text Markup Language) HTML is used to build the skeleton of the web apps. It is not a programming language. So you cannot hack NASA or Google by using HTML. 😂 There are lots of resources that you can refer to learn HTML. Learning HTML is very much important to understand the structure of any web app. Here are some resources that you can follow to learn HTML. w3schools, tutorialspoint
- CSS — (Cascading Style Sheets) CSS is used to style the web app. As an example if you need to change the background colour, font size you need to change the CSS properties of html elements. Here are some resources that you can follow to learn CSS. w3schools, tutorialspoint
- JavaScript — Javascript is the most popular programming language in the world. In the web application it provides the functionality to the app. Like doing api calls, animations etc… JavaScript is easy to learn. When we are using JS in the web apps we used Vanilla JS. Here are the some resources that can follow to lean JavaScript. w3schools, tutorialspoint
By learning HTML, CSS and JS you can build powerful web sites. But it needs much effort to build web apps just using only pure HTML,CSS and JS. Therefore there are libraries and Frameworks that makes work easier. But before going to learn those libraries and frameworks you should have a solid understanding about HTML,CSS and JS. Then you can understand any of the libraries or frameworks easily.
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 directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
By learning HTML,CSS,JS and Bootstrap gives you a clear understanding about the front-end development. After learning those basics you need do some small projects. Otherwise it would not be last in you memory. Here are some project ideas that you can do.
- Biography Page of yours (Create a responsive page by including you details. Add some images and nice styles and make more professional)
- Create a basic calculator app.
- Create 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, back-end 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.
It is easy to learn React. There are many online resources that you can follow to learn React. Just type “React tutorials” on google and follow the most understandable one for you. When using React we can reuse the UI components. Therefore the code repetition is very low. And react has a large community therefore there are lot of people that you can gain 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 small time period.
Becoming a back-end developer
The back-end, also called the server-side, consists of the server which provides data on request, the application that channels it, and the database which organizes the information. As an example if a customer is browsing mobile phones in the front-end, then the backend is responsible for sending available mobile phones to the front-end.
At now there are lots of frameworks that we can use to build backends. Few examples are,
- ExpressJS (Javascript)
- Spring Boot (Java)
- Django (Python)
- Laravel (PHP)
- NestJS (Javascript)
You do not need to learn all the available frameworks to become a backend developer. Basics of all those frameworks are almost same. Therefore learning one framework and practising it is enough.
By using these frameworks we can build the api endpoints that the clients can access. As an example,
const express = require("express");const router = express.Router();router.post(“/signup”, async (req, res) => {
const result = await userService.registerUser(req.body);
res.send(result);
});
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 backend’s.
- Relational Databases
- Non-Relational Databases (Document)
From the backend we connect with database and then we query the database according to the user requirements. Therefore you should have a clear understanding about queries and methods about databases.
MySQL, PostgreSQL are some of the examples for Relational Databases. To work with them you should have knowledge about SQL queries. By referring following links you can find some of the tutorials about the SQL. w3schools,tutorialspoint
After learning the basics you should have to build few example project’s to sharpen your skills. Following are the some of the example projects that you can build.
- E-commerce site backend
- To-do app backend
- Messenger app backend
As the backend server endpoints are accessible to everyone you should need to consider about the security also. Otherwise hackers can access to data and see them. It is not good for you and your product also. Therefore security plays a vital role in backends.
