HOME

PROJECTS

ACHIEVEMENTS

BLOGS

WORKSHOPS

GALLERY

Web Development

Before diving into the sea of web development, we must first understand how the web works.

Clients are the typical web user's internet-connected devices (for example, your computer connected to your Wi-Fi or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web browser like Firefox or Chrome).

Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.

So what happens, exactly?

When you type a web address into your browser (for our analogy, that's like walking to the shop):

The browser goes to the DNS server and finds the actual address of the server that the website lives on (you find the shop’s address).
The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client (you go to the shop and order your goods). This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.
If the server approves the client's request, the server sends the client a "200 OK" message, which means "Of course, you can look at that website! Here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets (the shop gives you your goods, and you bring them back to your house).
The browser assembles the small chunks into a complete web page and displays it to you (the goods arrive at your door — new shiny stuff, awesome!).

When a browser sends a request for an HTML file, it first parses the HTML.
If the HTML file contains <link> elements that reference external CSS stylesheets, the browser sends additional requests to the server for each stylesheet in the order they appear in the HTML file.
If the HTML file contains <script> elements that reference external JavaScript files, the browser sends additional requests to the server for each script in the order they appear in the HTML file, except for scripts with the async ordefer attributes set.
After the external CSS and JavaScript files are loaded, the browser constructs a Document Object Model (DOM) tree from the parsed HTML and an in-memory CSS Object Model (CSSOM) from the parsed CSS files.
The browser then applies the styles from the CSSOM to the corresponding elements in the DOM tree, and executes any JavaScript code found in the HTML or external JavaScript files.
Finally, the browser paints the visual representation of the page on the screen, allowing the user to interact with it.
The browser parses the HTML file first, which leads to the browser recognising any <link>-element references to external CSS stylesheets and any <script>-element references to scripts.
As the browser parses the HTML, it sends requests back to the server for any CSS files it has found from <link> elements and any JavaScript files it has found from <script> elements, and those then parse the CSS and JavaScript.
The browser generates an in-memory DOM tree from the parsed HTML, generates an in-memory CSSOM structure from the parsed CSS, and compiles and executes the parsed JavaScript.
As the browser builds the DOM tree and applies the styles from the CSSOM tree, and executes the JavaScript, a visual representation of the page is painted on the screen, and the user sees the page content and can begin to interact with it.

import React from 'react';

- Comment. Everybody likes to comment. It allows you to write a comment in your code.
<!DOCTYPE html> - It defines the document type for browser to recognize it.
<html> - It marks the start of html document.
<head> - Every HTML document is divided in two parts: head and body. This tag defines the head part.
<body> - It defines the body part of html document.
<meta> - It defines the meta data of the page such as viewport, character set, etc. Don’t worry if you don’t get the use of it.
<title> - It defines the title of the webpage.
<a> - It stands for anchor tag and used to create hyperlinks and links.
<b> - If there is an ‘a’ there is a ‘b’. But it’s different. Use it on a text and live boldly.
<br> - Well the one problem or miracle of HTML is that it collapses the spaces so it is virtually impossible to just give a line break by pressing enter. For that, we use the br tag.
<button> - Don’t think we need to tell what this does.
<div> - Most encountered tag in HTML. It just defines a box for the content and we use the box to apply many stylings.
<form> - One of the important and challenging parts of development is gathering and using the user data. Forms are the important part of it. This tag marks the form in an html.
<input> - In the form one needs a field to input data. The input tag defines an input field to do just that.
<label> - What the input is for? We answer that by the label tag. It defines a label for input tag.
<h1> to <h6> - These are the heading tags in HTML used to define heading in a document.
<img> - It expands to image and then it defines itself.
<link> - It creates a link to file used by the webpage.
<nav> - Defines the navigation links for a page.
<p> - Defines a paragraph in a document.
<ol> - Defines an ordered list with numbers.
<ul> - Defines an unordered list with bullet points.
<li> - Defines a list item in these lists.
<video> - Self-explanatory.

Well, it was a long typing span but still I think we have left quite some tags. Don’t worry you can still get other tags on W3Schools. But the docs many developers use are MDN Docs . I would strongly suggest reading these docs and making your own HTML practice page before continuing further.

CSS

Now that we have created the basic structure of our webpage, here comes the time to style it with colors and fonts. We use CSS to style our HTML page and make it look more beautiful. And guess where we can get all the content? At the same page we got out HTML content.

But before we begin, we must link our CSS file to our HTML file using the link tag. The rel attribute tells the HTML the type of document we want to link to our HTML file. For a CSS file it’s stylesheet. The href attribute gives the browser the destination where we have our CSS file on our system.

Now that we have the file linked, we can start our styling? But wait how do I tell the browser to apply style to a particular element. Here where the selectors come in. Here we shall only be covering the basic selectors.

Element Selector: We can select an element by its name using an element selector. It looks something like this

p {color: white;}

Class Selector: We can also give a class name to an element to select it in our CSS. It is generally denoted by ‘.’ in CSS.

.header {color: black;}

ID Selector: We can also give an Id to a tag along with a class and style with it. It generally begins with a ‘#’ in CSS.

#abc {color: grey;}

Example -

HTML

<html lang="en"

<head>

<title>Document <title>

</head>

<body>

<p >Hello<p>

<p className="fresher">Freshers<p>

<p id="welcome">Welcome to the zine Recruitmeent<p>

</body>

</html>

CSS

p {color: red}

.fresher {color: blue;}

#welcome {color: bisque;}

Now I can say we have figured out everything we need to do before. So let's jump in our stylings.

For starters-

color - defines the color of the text
background-color - defines the background color for the given tag
font-family - defines the family of the font used. Wait for the workshop to know more about it and our favorites.
font-size - defines the font size of the text
height - defines the height of the div
width - defines the width of the div

Box Model

One of the most widely used styling is of box model. Basically, CSS treats every div as a box which has some properties which are

padding - refers to the space between box's content and it's boundary
border - refers to the outline of the box
margin - refers to the space outside the box's boundary that browser has to leave in rendering the box.

For further info about box model, you can use the above mentioned references. Also see for properties like box-shadow, etc.

CSS Layout

Well now we have boxes but how do we arrange those boxes; for this we use CSS Layout which mainly stands on these two:

Flexbox

Flexbox is an arrangement of boxes in one direction like a row or a column. To enable flexbox, we set:

display: flex;

Grid

Grid is more of a 2-D arrangement of elements. To set up a grid, we can use:

display: grid; grid-template-columns: 200px 300px; grid-template-rows: 100px 50px;

This gives an arrangement as:

JavaScript

We have the bricks and color now let's add functionality. JavaScript is the programming language widely used for both client-side and server-side of a web app. Let's breakdown the language first.

Variables

JS is dynamically typed so we don't have any use for declaring the type of variables. We popularly use let and const for variable declaration.

const x = 10; let y = 12;

There is also another method to declare a variable using var keyword but its use is discontinued with time due to security reasons. Along with primary data types we also have array and objects in JS.

Selection statement:
We have both if else and switch statements in JS.
switch (key) {
case value: break; default: break;
}
if (condition) {
}else{
}
Looping statement
We have aall three loops in Js
do {
} while (condition); while (condition) {
}
for (let index = 0; index < length; index++) {
}
unctions -
function name(params) {
}

Now that we are familiar with the basic concepts of JS. We are moving to DOM (Document Object Model) and Event Listeners.

The above shows the DOM tree generated during rendering a webpage. In the DOM model we can access every part of the document by an object in JS by using query selector.

These selectors are –

document.getElementsByName("")
document.getElementsByClassName("")
document.getElementById()

It’s by using these selectors that we can interact with the HTML elements, add an event listener and much more. For sake of simplicity we are just going to show one example of the event listeners.

HTML

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<button id="click">Click me !!!</button>

</body>

</html>

JS

function onClick()

alert("Hello Freshers");

let button = document.getElementById("click");

button.addEventListener("click", onClick);

Preview

When Clicked

Problem Statement – Build a Portfolio using HTML, CSS and JS. It must contain a Homepage (Landing Page), About, Works, Services, Contact and must be at least a two-page Portfolio with both pages linked to each other. Also include link to your GitHub profile in the portfolio and deploy it. Send us the link of the deployed site to the same on zine.nitj@gmail.com

Robotics &
Research
Group

GROUP

Home

Team

Alumni

PROJECTS

Achievements

Projects

Contribute

ACTIVITIES

Workshops

Blogs

Gallery

Web Development

So what happens, exactly?

CSS

Example -

CSS

Selection statement:

Looping statement

unctions -

HTML

JS

Preview