Introduction to responsive web-page development (part 1)

Hello, world! This is my first technical blog and I want to start with something that has made me fall in love with the world of programming, Web development or more specifically, responsive web page development. The reason why web development is held in high regards is that it allows a person to be creative and put forward their own version of something up on the web for people all around the world to see. In this 20 part series, I shall try my best to explain the concepts required to build a responsive webpage from scratch. I will also be adding in a few additional creative HTML and CSS code snippets that you can mess around with and use in your own projects, so let us get started!

Part 2 of this tutorial:

Introduction to responsive web page development

First, let us understand the different cogs of the wheel that makes up a webpage.

What is a webpage? A static singular page that has a bunch of information that is displayed on the net. We shall get to the what and how of the webpage shortly. But just a single webpage is not sufficient to convey all the information you need to convey and hence arises the concept of a website. A website is a COLLECTION OF WEB PAGES. For example, take Facebook. The site has the main login page, the landing page and the home page which shows us a personalized feed. Apart from these pages, we have the profile pages which correspond to different users. All of these put together make up a conglomerate called a Website. Now, we can differentiate between a webpage and a website. But what makes up a webpage? How do you build your own webpage? Are there different types of webpages and websites?

I know, I had a lot of questions like these when I started off with web development as well but the beauty of this field is the ease of understanding and the area of application, so worry not. Lets now start off with the basics of web development.

Web development = The human body?

When I started learning web development, I did not quite understand this topic, but I found a fun and relatable way to grasp this. A webpage is like our human body. It has 3 main components that help in its functionality:

  1. The skeletal system
  2. The muscular system
  3. The nervous system

The skeletal system gives the base on which the human body is built. It is somewhat like the foundation of a building. The muscular system gives a unique and distinctive look and appearance to the body. Finally, the nervous system adds interactivity and intelligence to the body, completing the human body. All these systems work in correlation with each other to give us exemplary performance. The parts of a webpage are similar to the parts of a human body. The 3 components that make up any webpage are:

  1. Hyper Text Markup Language (HTML)
  2. Cascading Style Sheets (CSS)
  3. JAVASCRIPT (Not to be confused with Java, that’s a completely different language!)

BASIC CODE SNIPPET TO DISPLAY SOME TEXT

These three components working in conjunction with each other gives us a static webpage. We shall see the main principles and working of all these 3 in the next part of this series, but I shall bid you adieu with a simple code snippet of a basic HTML file that just displays “Hello World” in your browser.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>First page</title> <!-- gives a title to your web page -->
</head>
<body>
    <h1>Hello world!</h1>     <!-- Display hello world as a heading -->
</body>
</html>

Copy this code and paste it in a normal text file. Save it as a .html file and run the file. You should see your browser open and display the output as follows:

Hello world!

 

Refer to these links to see more amazing stuff about web development :

Web Page Template Using Languages HTML, CSS and Bootstrap

Add image to a HTML page in short using HTML or CSS

PS: What other parallels can you draw between the building blocks of a webpage with other systems that exist? Leave your thoughts in the comments down below and all the very best in learning web development!

Leave a Reply

Your email address will not be published. Required fields are marked *