DEV Community: Keshav Jindal

How to create a web page using HTML, a step-by-step tutorial.

Keshav Jindal — Sun, 09 Jul 2023 17:01:01 +0000

About

In this article we will learning that how we could create a webpage only with the help of HTML. This particular article will also give you a basic working of some of the common HTML tags.

Step1: Creating the folder

Create a new folder on your system to hold your webpage files. Name it something like "MyWebPage". This folder will be the root directory for your webpage.

Step2: Setting up the HTML file

Create a HTML file with .html extension in the editor. I’ll be using Virtual Studio Code as my editor. Give the file a meaningful name like index.html.

Step3: Add the basic HTML structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyWebPage</title>
</head>
<body>

</body>
</html>

Paste the following code in the editor and our system is ready to a create webpage.

NOTE

Shortcut for Step3 which works only in VS Code is:
html:5 and you get the same basic HTML structure written.

HTML doctype declaration tells the browser that this is an HTML document. Followed by the <head> tag which will contain the title which is displayed in the browser’s title bar, and meta data of our webpage. Then comes the <body> tag, which can be divided into many sub parts like the header, main and footer which together forms a webpage.

Step4: Add content to the webpage

Inside the <body> section, you can add various elements which will make up our webpage. It may include a paragraph tag <p>, a heading tag <h1>, inline tags, etc. Let's add a heading followed by paragraph of text to our webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
</head>
<body>
    <h1>
        About Me
    </h1>
    <p>
        Welcome to my About Me page! Here's some information about who I am.
        <h3>[your name]</h3>
        <h3>[your favourites]</h3>
    </p>    
</body>
</html>

In the code above, <h1> tag is used to give the heading, while the <h3> tag is used to give subheading. Then, we have used <p> for paragraph.

Step5: Our basic webpage is ready!

Save the changes you made to the "index.html" file. Now, you can open it in a web browser to see your webpage. Simply double-click the "index.html" file, and it should open in your default web browser.

Output

Understanding HTML tags.

Keshav Jindal — Sun, 09 Apr 2023 11:04:02 +0000

1. What are tags?
Tags are the basic building blocks of HTML. HTML is a group different kind of tags having their own unique properties. Every tag contains opening and closing tag. Tags are also opened and closed in a specific order. The most recent tag should be closed first than the outer one.
For example:

There are many number of tags, a few of are:

Heading tag.
Paragraph tag.
Image tag and many more.
We will understand each tag in detail in next module.
2. Let's see few examples for better understanding:

Example-1;

<h1>My HTML webpage content.</h1>

OUTPUT:

Example-2;

<h2>My Blog post</h2>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" />

OUTPUT:

Customization using Matplotlib in Python.

Keshav Jindal — Tue, 07 Mar 2023 18:17:00 +0000

1. What is Matplotlib
Matplotlib is a popular data visualization library in Python widely used for creating static, interactive, and animated visualizations in Python. We can represent our data in many interactive ways like Graphs, Histograms, Pie Chart, etc.

2. Why Matplotlib
It provides a wide range of customization options to make your graphs more informative and visually appealing. Here are some of the customization options available in Matplotlib:

Adding markers
Changing kind of graph
Adding labels and titles
Adding legends

3. Using markers in graphs
Markers in Matplotlib are used to represent data points on a plot with a symbol, such as a circle, square, or triangle. We can perform various function and customizations using keyword *marker * like:

Changing the marker size
Changing the marker color
Changing the marker edge color and width

Syntax

import matplotlib.pyplot as plt
import pandas as pd

ypoints = [10,20,34,40,15]

plt.plot(ypoints, marker = 'o', markeredgecolor='black', markersize=7, markerfacecolor='red')
plt.show()

Output

4. Different kind to represent our data
We can represent our data in many interactive forms like:
Pie charts, Histograms, BarCharts, etc. using a keyword kind.
Note
Kind of graph is written as a string.

Syntax

import matplotlib.pyplot as plt
import pandas as pd

data = {'x': [1, 2, 3, 4, 5], 'y': [2, 4, 6, 8, 10]}
df = pd.DataFrame(data)
graph = df.plot(kind="bar")
plt.show(graph)

Output:

5. Labels and titles
Labels and titles are most important components of a Matplotlib plot, as they provide information about the data being visualized. They make the plot easier to understand. We can add labels both on x and y axis while title provides the plot to a name which becomes more informative.
Syntax

import matplotlib.pyplot as plt
import pandas as pd

data = {'x': [1, 2, 3, 4, 5], 'y': [2, 4, 6, 8, 10]}
df = pd.DataFrame(data)
graph = df.plot(kind="bar")
plt.title("Monthly Sales")
plt.xlabel("Years")
plt.ylabel("Sales")
plt.show(graph)

Output

6. Customization using Legend
Legend is used to identify and distinguish between different plots in a figure. We can change the color of multiple bars which makes our plot more interactive and easier to understand.
Syntax

import matplotlib.pyplot as plt
import pandas as pd

data = {'x': [1, 2, 3, 4, 9], 'y': [2, 5, 6, 8, 10]}
df = pd.DataFrame(data)
graph = df.plot(kind="bar")
plt.legend(["blue","orange"])
plt.show(graph)

Output

Intro to Matplotlib in Python, Part1-plot().

Keshav Jindal — Thu, 26 Jan 2023 09:44:44 +0000

1. What is Matplotlib
It is a library which helps us to plot and visualize the data in 2D form. It is an easy way to represent huge amount of data. It was introduced by John D.Hunter in the year 2002.

2. Why Matplotlib

Easy visualization to data.
Consist of bar graphs, histograms, pie charts, line graphs, etc.
Compatible with other third-party libraries and packages, that extend its functionality.

3. Plotting on X and Y axis

By default, the plot() function draws a line from point to point.
Also draws points on graph.
positions of points are in order. Eg(10,7), here 10 is point on X axis and 7 on Y axis.
Example:

import matplotlib.pyplot as plt
import numpy as np

x = np.array([1, 8])
y = np.array([3, 10])
plt.plot(x,y)
plt.show()

OUTPUT

NOTE

The x-axis is the horizontal axis.
The y-axis is the vertical axis.

Dictionaries in Python.

Keshav Jindal — Thu, 29 Dec 2022 15:18:40 +0000

1. What are dictionaries in Python

Dictionary is one of the data types which is used to store data in the pairs of key : data.
It is ordered.
It is mutable.
Keys should not be duplicated but data can be same.
Dictionaries are written with curly brackets.

2. Creating a Dictionary

It is encloses in curly {} braces.
Separated by a comma (,).
It holds values in pairs of keys corresponding with data.
Keys cannot be repeated and are immutable.
Data can be of any Datatype.

2.1 Example

dict = {1: 'A', 2: 'B', 3: 'C'}
print(dict)

OUTPUT
{1: 'A', 2: 'B', 3: 'C'}

3. Accessing data of a dictionary
We can access the data by their respective keys.
3.1 Syntax

dict = {1: 'A', 2: 'B', 3: 'C'}
print(dict[1])

OUTPUT
A
4. Adding elements to a dictionary
Syntax:

dict = {1: 'A', 2: 'B', 3: 'C'}
print("old dictionary")
print(dict)
new_dict=dict[4]='a'
print("Updated dictionary")
print(dict)

OUTPUT:
old dictionary
{1: 'A', 2: 'B', 3: 'C'}
Updated dictionary
{1: 'A', 2: 'B', 3: 'C', 4: 'a'}

Objects in JavaScript.

Keshav Jindal — Tue, 29 Nov 2022 12:50:34 +0000

1. What are Objects
Objects are one of the datatype in JavaScript which is very useful as it can store multiple type of values like: string, Boolean, int, etc.
For example:

Properties  
book.name= Harry Potter         
book.color= Purple
book.size= A4

2. Accessing the data
for example:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
console.log(person.age);
console.log(person.eyecolor);

Output:
50
blue
3. Object Methods
Object Methods can be accessed by using functions which are stored as properties in JavaScript.
Example:

const my_object = {
  firstName: "Ronn",
  lastName : "Doe",
  uid       : 9980,
  }
};
console.log(my_object)

Output:
firstName: "Ronn",
lastName : "Doe",
uid : 9980,

4. Accessing Object Methods
Syntax:
object_name.property;
OR
object_name["property"]

Functions in JavaScript.

Keshav Jindal — Sat, 05 Nov 2022 13:37:46 +0000

1. Introduction
Function is a block of code which perform specific task in a better and efficient way.

Syntax
It is defined using function keyword, then followed by the name of the function say var1, followed with parentheses ().
Function name follows same rules as of variable name.

function var1(par1, par2) {
code to be executed
}

2. Uses of Functions
Functions basically resist the repetition of same code again and again. Once the code is designed, we can use it multiple times just by giving the
arguments.

Example:

function add(num1, num2) {
  const addition = num1 + num2;
  console.log(addition);
}
add(2, 1);
add(63,232):

Output:
3
295
3. Function Return
When return keyword is used in Function and it reaches to return statement, the code will stop executing. Return keyword helps in future use of the output of Function.

For example:

function multi(par1, par2) {
  return par1 * par2;
}
console.log(multi(10, 2));

Intro to Array in JavaScript.

Keshav Jindal — Thu, 13 Oct 2022 08:31:29 +0000

1. Introduction
Array is a unique kind of variable which can store multiple values. It is enclosed in square [] brackets.

Syntax

const variable_name= [//"data"];

2. Its importance
Array is very helpful as it makes our work easier and also make code less complicated and simple. We don't need to create multiple variables as we can store multiple kind of data in one.
NOTE
We can modify the data in array once declared.
3. Array length
We can access the no of items in the array using 'length' keyword.
For example:

const cars= ['BMW', 'Audi', 'Mercedes'];
console.log(cars.length)

Output for above example is:
3 is output, as there are three items in the array.
Example:

const laptops = ['Lenovo', 'Dell', 'HP'];
console.log(laptops.length)

output:
3
4. Array Push
Array Push adds the item at the end of the sequence.
For example:

const fruits= ['Apple', 'Mango', 'Banana'];
fruits.push('Orange');
console.log(fruits)

Output:
["Apple", "Mango", "Banana", "Orange"]
In above example, an array named fruits was created and in statement 2, using push keyword, 'orange' was added in the list.

Conditional statement in JavaScript.

Keshav Jindal — Sun, 02 Oct 2022 11:40:44 +0000

1.Introduction
Conditions are very important topic in programming.
They are extensively used in programming as they determines a True and False condition in the code. They are of three types:

if condition
else if condition
else condition

NOTE
if, else if, else are the keywords and are not same as If, Else if, Else.

2.if condition
if condition determines the True condition.
Syntax

if (condition) {
 //the code block to be executed if condition is True
}

2.1-Examples of if condition

Example 1:

const var1=10;
if (var1==10){
console.log("Its right")

OUTPUT
"Its right".
In the above example we have declared a variable and assigned a value to it, then we checked its value through if condition.

Example 2:

if (10/2 == 5){
  console.log("Its correct")
}

OUTPUT
"Its correct".
3.else if condition
else if condition is preceded by an if condition, and it is checked when the first if condition is not True.
3.1 Syntax

else if(condition){
//the block of code to be executed if the first if condition is  False 
}

3.2-Examples of else if condition
Example 1:

const var1=50;
if (var1>100){
console.log("Its greater than 100")
}else if(var1>40){
console.log("Its greater than 40")
}else{
console.log("Input Invalid")
}

OUTPUT
Its greater than 40 .
In above example, firstly if condition was checked by the machine which was False ,then machine checked else if condition which got True.
4.else condition
It is the block of code which is executed when the specified condition is False.

4.1-Syntax

else {
//code block to be executed when if condition id not True
}

4.2-Examples of else condition
Example 1:

const num1=10;
const num2=20;
if (num1>num2){
console.log("num1 is greater than num2")
}else{
console.log("num2 is greater than num1")
}

Example 2:

const var1=10;
if (var1 % 2 !== 0){
  console.log("Its a Even Number")
}else{
  console.log('Its a Odd Number')
}

What is Machine Learning?

Keshav Jindal — Mon, 26 Sep 2022 11:09:16 +0000

1.Introduction to AI
AI stands for Artificial Intelligence. It enhances the human efficiency and capabilities. It tells us how to manage a huge amount of data in an easier and efficient way. It is used in various fields like:
1.Enterprise.
2.chatbots.
3.Health Care.
4.Banking, etc.
Definition
When human intelligence is put into a machine and the machine is able to perform various tasks on the basis upon the given data. To do this a person should have a good knowledge of Algorithm and basics of mathematics.
2.Domains of AI
There are three domains or sub parts of AI. These are as follows:

1.Machine Learning or Data Science.
2.Computer Vision.
3.Natural language processing(NLP).

In this article we are going to understand the first domain of AI i.e. Machine Learning.

3.Machine Learning or Data Science
This domain of AI deals with teaching and adapting capabilities of machine. We are training the machine to respond to an situation where it can work more efficiently than humans. This capability of responding is done in three steps. These are :
1.The data is given to a machine .
2.The machine analyze the data .
3.The machine gives us the prediction.

Append() function in Python.

Keshav Jindal — Tue, 13 Sep 2022 12:43:14 +0000

1.What is Append function?
Append function is used to add a item at the end of the sequence if the condition is True.

Example1

subjects = ['Maths','Science','Physics']
subjects.append('Chemistry')
print(subjects)

Explanation:
Statement 1:
subjects = ['Maths','Science','Physics']
Statement 2:
append functions is being used in Statement 2 So, 'Chemistry' will be added at the end of the sequence.
Final Output:
['Maths', 'Science', 'Physics', 'Chemistry']

Example 2

list1=['Mathematics', 'AI', 'Science','Political Science']
list2=[]
for i in list1:
 if 'a' in i:
    list2.append(i)
print(list2)

Explanation:
Iteration1:
"a" in 'Mathematics' , condition becomes True and it will be added at the end of list2.
Iteration1:
"a" in 'AI' , condition becomes FALSE and it will not be added in sequence.

Final output
['Mathematics', 'Political Science']

Nested loop practice.

Keshav Jindal — Sat, 10 Sep 2022 12:22:02 +0000

1.Introduction to For loop
For loop is used to iterate over a sequence. With the help of for loop all the items present in the sequence are accessed one by one.

2.Trick to solve nested loopquestions easily
Let the first loopcondition be Days and the other loopconditions be sessions. Linking this analogy to the daily life of a student- a student has to sit in all sessions every day.

For example-

for i in range(3):
 for j in range(6):
   print(j, end=' ')

TRICK TO SOLVE ABOVE QUESTION:
Let i = Days(Monday, Tuesday, etc..) &
j = Sessions(Mathematics, Science, etc..)
range for i = (0,1,2)
range for j = (0,1,2,3,4,5)
Iteration 1:

i=0, the condition becomes True and the loopwill be connected and the day will be Monday. There are 6 sessions in j, and a student must sit in all sessions daily.
So, the result will be: 0 1 2 3 4 5
Iterations 2:

i = 2, the condition becomes True and the day will be Wednesday. Result: 0 1 2 3 4 5

Final Output:
0 1 2 3 4 5 0 1 2 3 4 5 0 1 2 3 4 5

Example 2:

my_string =['Mathematics','Science','History']
for i in range(len(my_string)):
  for x in range(4):
    print(x, end=(' '))

Explanation:
Iteration 1:

Range for i = (0,1,2)
Range for x = (0,1,2,3)
i = 0, Day 1 i.e Monday, we have to sit in all sessions So, the output becomes: 0 1 2 3
Iteration 3:

i = 2, Day 3 is Wednesday and after sitting in all sessions, output comes out to be: 0 1 2 3.
Final output
0 1 2 3 0 1 2 3 0 1 2 3