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.
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!
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.
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 –
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.
Effect of CSS, Image Credit - BrowserLondon
Making the website interactive –
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 –
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!