A Beginners Guide to Everything about Web Development

4 min readFeb 17, 2021

I had a discussion with a friend not so long ago, and he had this brilliant idea for a food ordering app (He loves Beans), but unfortunately he wasn’t going about it in the most efficient way possible, and that’s the challenge most newbies face when they have that inventive idea for the next big web app to change the world. In this article, I’m going to guide you through the most straightforward way to transform that idea to a fully realised web application.

Keep Calm and Learn Web Development

There’s always some confusion around the web development landscape, especially because of how fast things change. One day you’re well informed about something and the next day there’s a new update, but calm down for a second, the key elements remain the same.

Inside this article, I’ll guide you through what web applications are and how to finally get started with it the right way, giving you the confidence to develop your own web applications.

This article is designed to help beginners, students and anyone just enthusiastic about technology or the web and will be the first part of a 3 part series on web development.

In the next sections, I hope to shine light on what web applications are, what the front-end of a web application does, and the right tools and technologies that you’ll need to get your hands dirty with code, let’s get into it!

What on Earth is a Web Application Anyway?

A web application is an interactive computer program built with browser supported languages such as HTML, CSS and JavaScript (different from java) and is accessed via a web browser (Google Chrome).

Web applications are often confused with websites, but yes they are very different. While web apps allow users to create, read, update and delete data within the application, websites only define an output for users to read information but not affect it in any way.

A typical example of a web application would be your email. You’re able to compose mails, check your calendar, delete mails and even blow up your mails (yes, you heard me right). My entire point is your email is interactive and not static.

Web applications can be broken down in many ways, but to keep things simple there are basically 3 divisions of a web application.

The front-end also known as client side
The middle-tier (Services)
The back-end (Databases, usually)

This structure is popularly known as the 3-tier architecture.

The front-end? What’s that?

The front-end or client side is the visual element of your web application. It defines everything you see and interact with. It’s developed using a combination of HTML (for page structure and content), CSS (used for styling, eg. adding colours) and JavaScript (making things interactive)

Once you get the hang of HTML, CSS and JavaScript you should move on to learn about front-end frameworks or libraries which are basically front-end cheat codes, just kidding they’re packages that contain pre-written, standardized code that give you a base to build on.

A good example of a front-end framework is Angular, an open-sourced JavaScript framework for web and mobile application development managed by Google.

Why do I need to use a front-end framework you ask?

To save time! Obviously, remember you’re trying to build your web app using the most efficient means possible, how will you achieve that by writing every single line of code by yourself? Frameworks will help you with a jumpstart.
The code works! How do you know your self written code will be compatible with at least 70% of all browsers? With frameworks you have pre-tested, standardized and functional code readily available to help you.

While i am Angular biased, another good example of a front-end library you could learn and should probably start with instead of Angular is React, an open-source JavaScript Library for building UI components managed by Facebook.

React is quite popular among developers because of it’s simpler learning curve and ease of use as compared to Angular.

Use the right tools for the Job

There are countless software's available for building web applications, but we’ll start with the ones you need to get started with front-end development, this process is known as “setting up your development environment”.

In order to code basic HTML, CSS and JavaScript you’re going to need a text editor. I was kind enough to list some below for you.

Visual Studio Code (personal favourite)
Sublime Text
Atom
Brackets
Notepad++

I’m positive this guide has been basic enough to give you a fair understanding of web application development, I’ll continue in the next article on what the middle-tier entails, thanks for reading. PEACE!