HTML

Introduction to HTML (First Line of Code).

July 13, 2022 No comments 0

Before learning the fundamental of HTML, we all should understand the role of HTML (Hypertext Markup Language) in this entire journey of Web Development.

For developing the front end of any website three languages play a very important role and they are HTML, CSS, and JavaScript. HTML is used to structure and describe the content of the web page, CSS is used to handle the presentation and design part of any web page and JavaScript is the programming language used to add dynamic effects and web applications.

What is HTML?

HTML stands for HyperText Markup Language, it is a markup language used by developers to give structure to the web page and it is not a programming language. HTML consists of elements that describe the different types of content like paragraphs, links, headings, images, videos, etc. Our web browsers can understand HTML and render the HTML code as a website.

Markup Language is those languages that follow a standard text encoding system with some set of symbols that decide the structure or your text document of a web page. (alert-passed)

What is HTML Element?

An HTML element starts with one starting tag some content and one ending tag. Everything including from starting tag to the ending tag is considered one element (All HTML element does not always require a closing tag).

Now let's understand the basic syntax of an HTML document shown below:

The output of Below HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of Web Page - AlgoLesson</title>
</head>
<body>
  <h1>Heading of the Website</h1>
  <p>This is a paragraph.</p>
</body>
</html>

The first line of code <!DOCTYPE html> tells that the given document is an HTML5 document.

The <html lang="en"> is the root element and all other element is going to lie inside this root tag lang="en" is used to specify the language of the element's content and "en" stand for the English language like this you can check of other languages also.

The <head> contains meta information about the HTML page.

The <meta charset="UTF-8"> defines the character encoding for HTML documents and from HTML5 onward it is suggested to use the UTF-8 character set because covers almost all characters and symbols.

The line <meta name="viewport" content="width=device-width, initial-scale=1.0"> is an instruction to the browser on how to control the dimension and scaling of the webpage. The viewport is defined they are visible to the user base on the device they are using. The "width=device-width is used to set the web page to follow the screen size of the device and initial-scale=1.0 is sued to set the initial zoom level when the web page load for the first time.

The <title> is used to specify the title of the web page, which is visible on the title of the page.

This <body> is the most important tag because any content we are adding here is going to be visible to the user like images, paragraphs, headings, etc.

The <h1> is a large heading element like this we have more heading tags h2, h3, h4, h5, and h6.

The <p> is a paragraph element used to represent paragraphs.

👉Support Us by Sharing our post with others if you really found this useful and also share your valuable feedback in the comment section below so we can work on them and provide you best 😊.(alert-success)

Data Structure

Data Structure Tutorial | AlgoLesson

Probin Kumar Sah

July 09, 2022 No comments 0

The word Data Structure itself explains that it is a way of organizing the data. If we talk in terms of computer science, it is a way of organizing the data into the computer’s memory so that the computer can use the data more effectively.

In computer science, there are different ways of organizing the data based on its type and requirement, like a known amount of data that belong to the same data type can be stored in the form of an Array data structure. Like this, there are many different ways of organizing the data that we will learn in this complete Data Structure Tutorial.

Below is the list of topics that we are going to cover in this tutorial and we will also practice enough problems on each topic so you understand how and when to use all different kinds of data structures.

👉Support Us by Sharing our Data Structure Tutorial with others if you really found this tutorial useful and also share your valuable feedback in the comment section below so we can work on them to improve our tutorials 😊.(alert-success)

Visual Studio Code Setup for Front End Web Development.

Probin Kumar Sah

July 07, 2022 No comments 0

Before you start writing any kind of HTML, CSS, or JavaScript code, you first need to install a handy tool called Visual Studio Code Editor. So does it mean that without any code editor you cannot write code any kind of code for your front-end web development?

The answer to the above question is no, it is not compulsory to have a code editor for writing your frontend code you can use any kind of text editor like notepad for writing your code but having a code editor is very useful because it is designed specifically to help developers with coding.

Why use Visual Studio Code?

There are many code editors available to download on the internet but the Visual Studio Code is the most popular and favorite code editor for any front-end web developer. There are several useful and essential features available in Visual Studio Code which make Visual Studio Code the best code editor but the three main reasons for its popularity is that it is free, open-source, and cross-platform.

Open-source software is software whose source code is publically accessible under a license in which the owner gives permission to users to see or modify the code and they can distribute the source code to anyone for any purpose.(alert-success)

Cross-platform software is that software that is designed to work on several computing platforms like Windows, macOS, and Linux. Example: Visual Studio Code, Firefox, Chrome, etc.(alert-success)

I hope you get some basic idea of a code editor and Visual Studio Code. You can also go through some frequently asked doubt related to the code editor and Visual Studio Code.

Now let's start with the download and installing the part. First, follow the link given below and download the Visual Studio Code (stable build) for your Operating like Windows, macOS, or Linux.

(getButton) #text=(Visual Studio Code) #icon=(download) #color=(#002EFC)

Install the downloaded application on your system like you install any other software for Windows simply double click on it and you will see the below interface. You just need to choose 'I accept the agreement' and click on the Next few times then click on Install.

Once you install and open the VS Code editor, it will look something as shown below. Now we will set up the code editor by installing a few small but useful extensions so you can customize the editor more and increase your productivity.

Click on Extensions (Ctrl + Shift + X) from the left panel and search for one extension named Prettier - Code formatter.

Prettier is a code formatter that enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.(alert-success)

After the installation is done, click on the Settings icon from the lower-left corner and search for 'Default Formatter' setting and from the drop-down list choose the extension you have just installed as shown in the below image.

Now VS Code should use the Prettier extension to format your code but if you want your code to get formatted automatically then you can do one more set.

Search for the 'Format On Save' setting in the search bar and tick the check box as shown below so VS Code will automatically format your code whenever you save your file.

The next important setting that you need to search is 'Auto Save' and then set this option to 'onFocusChange'. It will automatically save your file when you go to another tab or you completely leave the window.

The last but very important extension which I personally found very useful is the Live Server extension. It launches the development local server with a live reload feature for static and dynamic web pages.

It means you don't need to refresh the web browser again and again to see the changes you have made in your code. You will find this so useful when you will start writing a lot of code for designing your web page.

To see your changes parallelly while writing the code, you can split your screen into two half as shown below.

So that's it. I hope you have done all the required changes and trust me this VS Code setup is going to increase your productivity a lot.

👉Support Us by Sharing our post with others if you really found this useful and also share your valuable feedback in the comment section below so we can work on them and provide you best 😊.(alert-success)

HTML Web Development

Introduction to Web Development

Probin Kumar Sah

July 03, 2022 No comments 0

Web Development

If you are reading this article now then there is a good chance that this is your first introduction to any kind of Web Development. So before we start writing any kind of HTML code for designing the structure of a web page, it will be very useful if we get a basic introduction to Web Development.

This is just an overview of Web Development and we are not going to deep-dive into each sub-topics because we are going to learn about them in detail in upcoming blog posts. (alert-success)

Whenever you open your browser type the URL of the website you want to visit (ex: www.algolesson.com) and hit enter. You can see that the interface of the website gets loaded in your tab in just a fraction of a second. After the website gets loaded on your browser, you get options to perform many different kinds of activities, you can read the blog post, you can add your comments, or even share them on your social media.

Now let's understand how all these things are happening. So whenever you are trying to access any webpage, your browser sends a request to the web server where that particular webpage is hosted (stored) on the internet. When the server receives the request then it responds back to the browser (client) with all the files that make up the website and sends them back to the browser.

A browser can understand only three technologies, HTML, CSS, and JavaScript so whatever you see on your browser must be made up of only these three technologies. Once the browser receives these HTML, CSS, and JavaScript files from the server as a response then it will take the code and load the webpage you are trying to access.

Now as you already understand how a website loads on a browser let's understand how codes are written for such simple or complex websites.

Difference between front-end and back-end web development?

You can categorize any Web Development into two different types Front End Web Development and Backend Web Development.

The process of writing the HTML, CSS, and JavaScript code that any browser can understand and display is known as Front End Web Development.

When the files that make the website are simply stored on a web server and you receive them on your browser in the same condition without any transformation such websites are also called Static websites. ex: My Portfolio.(alert-passed)

But only Front End technologies are not enough to build big and complex websites like YouTube because if you visit such websites you will notice it keeps on changing every time you visit. You can notice that many new videos are getting uploaded each day, viewers are posting comments, and video suggestions that load on your browser are not the same for all other users.

So to make a big website like YouTube, you need a whole Application to keep running on the web server with a very Big Database to store all the information of that website. To build such a complex website developers write application code and keep running on web servers and for that developers use backend technologies like PHP, Java, nodejs, Python, etc.

How Website get load on a browser Poster

These application codes take data from the database, process them, and generate files that will be sent to the browser based on the user's request. This entire process is called Backend Web Development because this processing is not visible to the user.

Such websites which contain both frontend and backend technologies are also called Dynamic websites because the website is dynamically assembled each time when someone tries to visit the website. ex: YouTube (alert-passed)

(getButton) #text=(Setting up the Visual Studio Code Editor) #icon=(link) #color=(#2339bd)

👉Support Us by Sharing our HTML Course with others if you really found this course useful and also share your valuable feedback in the comment section below so we can work on them to improve our course 😊.(alert-success)

HTML Web Development

Complete HTML Tutorial

Probin Kumar Sah

July 02, 2022 No comments 0

HTML is one of the fundamental skills you should learn if you want to be a Web Developer. HTML stands for Hyper Text Markup Language because it uses markups to define the structure and layout of the content of any web page.

Markup Language are those language which follow standard text encoding system with some set of symbols that decide the structure or your text document of a web page.(alert-passed)

In this Complete HTML Tutorial, you are going to learn all fundamentals of HTML with many examples.

HTML Tutorial
Introduction to Web Development.
Introduction to HTML.
Elements in HTML.
Attributes in HTML.
Headings in HTML.
Paragraphs in HTML.
Styles in HTML.
Formatting in HTML.
Quotations in HTML.
Comments in HTML.
Colors in HTML.
Links in HTML.
Images in HTML.
Favicon in HTML.
Tables in HTML.
Lists in HTML.
Classes in HTML.
Id in HTML.
Iframes in HTML.
JavaScript in HTML.
File Paths in HTML.
HTML Head Explain.
HTML Layout Explain.
Responsive HTML Explain.
HTML Computer code.
Semantics in HTML.
Symbols in HTML.
Charset in HTML.
HTML URL Encode.
HTML Forms.
Forms in HTML.
Form Attributes in HTML.
Form Elements in HTML.
Input Types in HTML.
Input Attributes in HTML.
Input Form Attributes in HTML.
HTML Media.
Media Files in HTML
Video Files in HTML
Audio Files in HTML
Plug-ins in HTML
YouTube in HTML
Complete List of HTML Elements with Example.

Array Stack

Program for Next Smaller Element | C++ Solution.

Probin Kumar Sah

April 15, 2022 No comments 0

Problem:

You are given an array of integers of size n. Your task is to print the next smaller element for each element present in the given array and if no smaller element is present for any element then print -1 for that element.

The Next Smaller Element for an array element (x) is the first smaller element on the right side of that element (x) in the array. If you reach the last element of the array in that case you cannot see any element on the right side so in that case print -1 if no Next Smaller Element is present.

You have to store all Next Smaller Elements in an array of n sizes and print them.

Input: arr = [ 2, 3, 1, 5, 9, 4 ]
Output: ans = [ 1, 1, -1, 4, 4, -1 ]

Explanation:
For 2, the next smaller element present on the right side of 2 in the array is 1.
For 3, the next smaller element present on the right side of 3 in the array is 1.
For 1, there is no next smaller element so you can print -1.
For 5, the next smaller element present on the right side of 5 in the array is 4.
For 9, the next smaller element present on the right side of 9 in the array is 4.
For 4, there is no element present on the right side of 4 so you can print -1.

I hope that the problem statement is now clear to you, so let's start thinking about different approaches to solve this problem.

Approach 1: Using two nested loops.

Starting from the left side of the array, the outer loop will pick each element from the array one by one and the inner loop will check if any smaller element is present for the element picked by the outer loop on the right side of that element. If the smaller element is found then store that element in an array and if no smaller element is found then store -1.

#include <bits/stdc++.h>
using namespace std;

void nextSmallerElement(int arr[], int n, int ans[])
{
    for (int i = 0; i < n; i++)
    {
        int num = -1;
        for (int j = i + 1; j < n; j++)
        {
            if (arr[j] < arr[i])
            {
                num = arr[j];
                break;
            }
        }
        ans[i] = num;
    }
}

int main()
{
    int arr[] = {2, 3, 1, 5, 9, 4};
    int size = sizeof(arr) / sizeof(arr[0]);
    int ans[size];

    nextSmallerElement(arr, size, ans);
    for (int i = 0; i < size; i++)
    {
        cout << ans[i] << " ";
    }
}

Output:

1 1 -1 4 4 -1

Time Complexity: O(n^2)
Space Complexity: O(1)

Approach 2: Using Stack Data Strcuture.

As you can see that the above approach of solving the problem using two nested loop is not a good approach for solving this problem because it increases your time complexity to O(n^2). You can more efficiently solve the problem using Stack data structure and its property.

Create a Stack and push -1 initially and now -1 is present at the top of stack. Now approach the given array element from the right hand side and whenever you pick one element x , check the topmost element of the stack. If top element is smaller than the element x you just picked, store the topmost element of stack into your ans array and push the picked element x.

If you get a situation in which the topmost element is not smaller than element x start popping out elements from the stack until a topmost element smaller element than x. When you find that element, store that element into ans array and push the x into the stack.

#include <bits/stdc++.h>
using namespace std;

void nextSmallerElement(int arr[], int n, int ans[])
{
    stack<int> st;
    st.push(-1);
    for (int i = n - 1; i >= 0; i--)
    {
        int curr = arr[i];
        while (st.top() >= curr)
        {
            st.pop();
        }
        ans[i] = st.top();
        st.push(curr);
    }
}
int main()
{
    int arr[] = {2, 3, 1, 5, 9, 4};
    int size = sizeof(arr) / sizeof(arr[0]);
    int ans[size];

    nextSmallerElement(arr, size, ans);
    for (int i = 0; i < size; i++)
    {
        cout << ans[i] << " ";
    }
}

Output:

1 1 -1 4 4 -1

Time Complexity: O(n)
Space Complexity: O(n)

So I hope you understand both approaches clearly and now you can solve more such coding-related problems using these approaches. You can use the comment section below to ask any questions related to the post.

Stack STL

Stack STL Container in C++.

Probin Kumar Sah

April 13, 2022 No comments 0

Stack is a Linear Data Structure that is based on LIFO (Last In First Out) principle and we also have a Stack container class in C++ STL (Standard Template Library) that is implemented based on the same LIFO principle.

When you use STL Stack, you don't have to worry about the implementation part of the stack operations like push(), pop(), top(), and empty() because in STL Stack all these operations are already provided in the form of a member function. You can directly use these member functions inside your program without thinking about the implementation part.

Important Stack STL member functions:

push(): It is used to insert an element at the top end of the Stack.
pop(): It is used to delete the topmost element of the Stack.
top(): It returns the topmost element present in the Stack. This function just returns the value present on the top it does not remove that element from the Stack.
empty(): It is a boolean function that will return true if Stack is empty else it will return false.
size(): It is used to get the count of the number of elements present in the Stack.

Syntax: stack<datatype> stackname;

Example: C++ code for STL Stack.

#include <iostream>
#include <stack>
using namespace std;

int main()
{
    stack<int> st;

    st.push(50);
    st.push(40);
    st.push(30);
    st.push(20);
    st.push(10);

    cout << "Element present at the top: " << st.top() << endl;
    // delete top element of the stack
    st.pop();
    cout << "Top element after deletion: " << st.top() << endl;
    if (st.empty())
    {
        cout << "Stack is Empty." << endl;
    }
    else
    {
        cout << "Stack is not Empty." << endl;
    }
    cout << "Number of element present in stack " << st.size() << endl;
}

Output:

Element present at the top: 10      
Top element after deletion: 20      
Stack is not Empty.
Number of element present in stack 4

Stack

Stack Implementation using Linked List | C++ Code

Probin Kumar Sah

April 13, 2022 No comments 0

You can implement the Stack data structure using a singly Linked List but you have to keep in mind that you have to perform all the Stack operations by following the LIFO (Last In First Out) principle. You also have to remember that all the Stack operations like push(), pop(), pee(), and isempty() must be performed under the constant time complexity of O(1).

Stack operations using Linked List:

To implement a stack using a linked list, you have to create one top pointer that will always point to the head of the linked list or you can say the topmost node of the stack. Because here, in this case, you are not just going to store the variable inside the stack instead you are going to store the node of the list. All your important operations like push and pop are going to perform from the beginning of the list or you can say at the head (top) of the list.

GIF for Push operating into Stack using Linked List

Push Operation into Stack

push(): To perform the insert operation into the stack, you have to insert an element at the beginning of the list. When your head (top) is pointing to NULL it means your stack is empty so to insert an element into the stack you have to create one new node with that element and assign the address of this node to the head (top). And whenever you want to add one new element, you can perform insert at the beginning operation on the list.

GIF Pop operating into Stack using Linked List

Pop operation on Stack.

pop(): To remove the top element of the stack, you can simply delete the first node of the list because it is the topmost element present in the stack and as you know that the head (top) always points to the beginning of the list. After deleting the first node, the head (top) will start pointing to the second node which is now the top element of the stack.

peek(): To get the information about the top element of the stack, you can simply return what value is present in the first node of the list which is pointed by the head (top) pointer. If the head (top) is pointing to NULL it means no element is present in the stack.

isempty(): It is very simple to know if the stack is empty or not, if your head contains a NULL value it means your stack is empty.

There is no condition when the stack gets full when you are implementing Stack using Linked List because the size of the Linked List can increase or decrease at runtime.

Example: C++ code for the Implementation of Stack using Singly Linked List.

#include <bits/stdc++.h>
using namespace std;
class ListNode
{
public:
    int data;
    ListNode *next;
    // constructor
    ListNode(int data)
    {
        this->data = data;
        this->next = NULL;
    }
    // destructor
    ~ListNode()
    {
        int value = this->data;
        if (this->next != NULL)
        {
            delete next;
            this->next = NULL;
        }
        cout << "Pop a Node with value " << value << endl;
    }
};
// function to push element into stack
void push(ListNode *&top, int num)
{
    ListNode *temp = new ListNode(num);
    temp->next = top;
    top = temp;
}
// function to pop element from the stack
void pop(ListNode *&top)
{
    if (top == NULL)
    {
        cout << "Stack is Empty" << endl;
    }
    else
    {
        ListNode *temp = top;
        top = top->next;
        temp->next = NULL;
        delete temp;
    }
}
// function to check topmost element of stack
int peek(ListNode *&top)
{
    if (top == NULL)
    {
        cout << "Stack is Empty" << endl;
        return -1;
    }
    else
    {
        return top->data;
    }
}
// function to print all the element of stack
void printStack(ListNode *&top)
{
    ListNode *temp = top;
    while (temp != NULL)
    {
        cout << temp->data << endl;
        temp = temp->next;
    }
}
// function to check stack is empty or not
bool isEmpty(ListNode *&top)
{
    if (top == NULL)
    {
        return true;
    }
    return false;
}
int main()
{
    ListNode *top = NULL;
    // push elements into stack
    push(top, 20);
    push(top, 30);
    push(top, 40);
    push(top, 50);
    cout << "Element present at the top of stack :";
    cout << peek(top) << endl;
    pop(top);
    cout << "New top after deleting topmost element :";
    cout << peek(top) << endl;
    cout << "Elements present in the stack :" << endl;
    printStack(top);
    if (isEmpty(top))
    {
        cout << "Stack is Empty" << endl;
    }
    else
    {
        cout << "Stack is not Empty" << endl;
    }
}

Output:

Element present at the top of stack :50   
Pop a Node with value 50
New top after deleting topmost element :40
Elements present in the stack :
40
30
20
Stack is not Empty

You can observe that all the stack operations like push(), pop() and peek() are done within constant time complexity O(1) using a singly Linked List.

Mega Menu

TRENDING

Introduction to HTML (First Line of Code).

What is HTML?

What is HTML Element?

Data Structure Tutorial | AlgoLesson

Visual Studio Code Setup for Front End Web Development.

Why use Visual Studio Code?

Introduction to Web Development

Difference between front-end and back-end web development?

Complete HTML Tutorial

Program for Next Smaller Element | C++ Solution.

Approach 1: Using two nested loops.

Approach 2: Using Stack Data Strcuture.

Stack STL Container in C++.

Important Stack STL member functions:

Example: C++ code for STL Stack.

Stack Implementation using Linked List | C++ Code

Stack operations using Linked List:

Example: C++ code for the Implementation of Stack using Singly Linked List.

MUST READ

LATEST

POPULAR

ARCHIVE

DON'T MISS

Advertisement

SPORTS

CRICKET

LABELS