Basics of Web Development

Post Reply
N
Posts: 3
Joined: Thu Apr 02, 2020 3:33 pm
Reputation:

Web Development 101 – Learning the Basics

Have you ever wondered how webpages are made or how can we access them over browsers or how simple words are linked to different webpages, or how these e-commerce websites work? Have you ever wanted to design one yourself and didn’t know where or how to start? Well, we are here to help you by answering these questions for you😉. Before we get to designing websites, it’s important to know how a website works.

Image

Understanding how a web page is developed –

How does the magic happen?

The magic happens between a client – that is you, and a server – where the webpage originated from. A server, more technically, is where we store web pages, like a cupboard filled with files. A client asks for a specific file, that is, a webpage and the server picks the right file and returns it to the client. A client can also give a file to the server to store in the cupboard, that is, you can create a webpage and put it on the server so that other users can access it over the Internet.

This exchange of data between server and client forms the basis of the web and the internet. Now, we need a medium to access the data. This medium is the browser on your desktops like Chrome, Mozilla Firefox, or Opera. Now, let’s break down some jargon that web developers use in routine to get you comfortable with the concept of web development.

What we see and what we don’t see!

You might have come across words like frontend, backend, database, Javascript and similar heavy terms. Here’s a secret, they just sound scary but they are really easy to follow and we are going to demystify most of them. The webpage that a client can view is the frontend of a webpage. What goes on behind the webpage is the backend of the webpage.

For example, you may have seen several buttons on a webpage. The button is part of the frontend. When you click the button, it performs certain functionalities, the functionality has to be added as logic at the backend which can be modified at the server end.

To work on the frontend and backend we need to use specific coding scripts. The website is designed using HTML and CSS while we add functionality, making the website dynamic using Javascript.

Building the Basic Blocks –

Giving the structure –

Let’s now talk about how websites are made from scratch. The two magical words are – HTML and CSS. HTML – HyperText Markup Language is a language that helps us create the basic structure of a webpage. The language is fairly easy to write and it makes use of tags. A basic example of HTML is as follows –

Image

Basic HTML

The HTML is broadly divided into two parts – the head part and the body part. The head part includes things such as title for the webpage and metadata. While the body part includes everything that goes onto the page. From heading to paragraph, lists to forms, and so on. It’s best compared to giving a bone structure to a body.

Beautifying the website –

CSS – Cascading Style Sheets are used to styling the webpage. Imagine the skeleton of a body, it would be bland and probably a little scary to be just like that. The skin adds a style element to the body. Similarly, CSS adds the style element to the website.

You can add colors, align the text, give margins and padding, change fonts, size the text and a lot more. Here’s what CSS can do to a webpage.

Image

Effect of CSS, Image Credit - BrowserLondon

Making the website interactive –

HTML and CSS alone can help you create a static website. That is a website with no interactivity. You can put a button on a webpage but to make that button perform some action, we need interactivity. For that we have Javascript.
Javascript is a programming language that lets us perform several actions on the website. It helps us interact in real-time. It’s amusing to make the web pages responsive by prompting a pop-up to come in case you click a specific word or make buttons work, making them change colors of the webpage.

Learn these scripts and languages –

It’s extremely fun to learn about web development and these five resources are some of the best that will help you learn. These courses are free of cost and give concise content to get you started quickly.

1. Responsive Web Development - Udemy
2. Basic HTML – FreeCodeCamp
3. Web Development by Doing – Udemy
4. Foundations of Frontend Web Development – Udemy
5. Master the Basics - Udemy

Where to write the code?

Just like we need browsers to access webpages, we need code editors to write code. There are several editors available like VS Code, Notepad++, Sublime, Atom, and several others. The best, we have realized, in the game for web development is VS Code and we strongly recommend you to use the same.

How VS Code can help us!

VS Code is Visual Studio Code developed by Microsoft and is available for download here. The editor is free, easy to use, gives help with writing the code at every point. You can also increase its functionality using extensions available and it’s completely customizable.

Using the Right Framework –

Image

Using Javascript to add functionality can mean writing several lines of codes. To help you, there are several frameworks available like React, Angular, Vue. They have components and structures already built-in. React seems to be the popular one at the moment but every framework has its advantages and disadvantages over each other. Vue is comparatively newer than the other two. At the end of the day, it depends on which framework caters best to your requirements.
Hope this article was informative and it helps you get the basic idea of building a website?. 😇. Don’t wait up, get your editor and start creating your website now!
Post Reply