CSS, or Cascading Style Sheets, is a stylesheet language that describes the presentation of an HTML or XML document. It is used to add styling and layout to web pages, defining elements such as colors, fonts, layouts, and animations. CSS works by targeting specific elements in an HTML document and applying style rules to those elements.

Why Use CSS?

CSS offers a range of benefits when used in web development. Some of the key advantages of using CSS include:

1. Separation of content and presentation: CSS allows you to separate the presentation of your website from the content, making it easier to manage and update.

2. Consistent styling: By using CSS, you can ensure that all of the pages on your website have a consistent look and feel, which can help to enhance user experience.

3. Flexibility: With CSS, you have greater control over the layout and styling of your web pages, allowing you to create more complex designs and responsive layouts

Getting Started with CSS:

Before you can start using CSS, you need to have an HTML document to apply it to. Here are the basic steps to add CSS to an HTML document:

1. Create an HTML document: You can create an HTML document using any text editor, such as Notepad or Sublime Text.

2. Add the CSS code: To add CSS to your HTML document, you can use the <style> tag. You can add CSS rules inside the <style> tag to target specific elements in your HTML document.

3. Apply the CSS: Once you've added the CSS code to your HTML document, you can apply it to specific elements using the "class" and "id" attributes.

CSS Syntax:

CSS uses a simple syntax that consists of a selector and a set of rules. The selector identifies the HTML element that you want to style, while the rules define the style properties that you want to apply. Here's an example:

selector {
  property: value;
}

In this example, "selector" would be replaced with the name of the HTML element you want to style, such as "h1" for headings or "p" for paragraphs. "property" would be replaced with the style property you want to apply, such as "color" for text color or "font-size" for font size. And "value" would be replaced with the specific value you want to apply to that property, such as "red" for the color property or "14px" for the font-size property.

CSS Terms

CSS Selectors:

In CSS, selectors are used to target specific elements in an HTML document. There are several types of selectors, including element selectors, class selectors, and ID selectors. Element selectors target specific HTML elements, such as headings or paragraphs. Class selectors target elements with a specific class attribute, while ID selectors target elements with a specific ID attribute. By combining selectors, you can create complex styles that target specific elements within your HTML document.

CSS Properties:

CSS properties are used to define the style of an HTML element. There are hundreds of CSS properties to choose from, each with its own unique set of values. Some common CSS properties include font-family, font-size, color, background-color, margin, padding, border, and text-align. By combining different CSS properties, you can create unique styles for your web pages.

CSS Box Model:

The CSS box model is a fundamental concept in web design that describes how elements are displayed on a web page. Each HTML element is represented by a rectangular box, which is made up of several parts, including the content area, padding, border, and margin. By understanding the box model, you can create more complex layouts and designs for your web pages.

Conclusion

CSS is a powerful tool for web development that can help you create beautiful and engaging websites. By learning the basics of CSS syntax and how to apply it to your HTML documents, you can take your web development skills to the next level. With practice and experience, you'll be able to create stunning web designs that will impress your clients and users.

Outro

I am making this series of content to help other aspiring developers who want to start their career in Web Development. It takes a lot of effort to make the series, If you really like my work Buy me a Coffee and Follow me on Twitter techtoe_ and Instagram Tech Shark (@techshark_web)

The first step to dockerize your backend application is to create a Dockerfile. A Dockerfile is a text file that contains instructions for building a Docker image. A Docker image is a snapshot of your application and its dependencies that can be used to create and run containers. To create a Dockerfile, you need to specify the base image, the commands to install the dependencies, the files to copy to the image, and the command to run the application.

Dockerize Node js application

Node js is the most popular backend runtime which helps in creating applications quicker and scale easily. Using express js framework we can create API quicker and maintainable

Let's create a Dockerfile for the express js application which is running on port 8000

FROM node:20

WORKDIR /app
COPY package*.json ./
RUN npm install && npm prune --production

COPY . .
EXPOSE 8000
CMD ["node", "index.js"]

Dockerize Java Spring Boot Maven app

Spring Boot is the most popular across enterprise applications and microservice applications. Spring Boot is used in organizations like Netflix, Uber, LinkedIn, etc. Spring Boot has gained popularity due to Dependency injection, aspect-oriented programming, and decoupling.

FROM maven:3.8.4-openjdk-17 AS build
WORKDIR /app
COPY pom.xml .
COPY src ./src
RUN mvn clean install

FROM openjdk:17-jre-slim

# Set the working directory to /app
WORKDIR /app
# Copy the generated SNAPSHOT jar from build to /app
COPY --from=build /app/target/<APP>.jar app.jar

# Make port 8080 available to the world outside this container
EXPOSE 8080

# Run the JAR file when the container launches
CMD ["java", "-jar", "app.jar"]

Dockerize Python Django application

Django is the most popular framework in Python web applications. Django has gained its popularity due to features like rapid development, security, and authentication. which are prebuilt are ready to use features

# Use an official Python runtime as a parent image
FROM python:3.10-slim

# Set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

# Create and set the working directory
WORKDIR /app

# Copy the requirements file into the container at /app
COPY requirements.txt /app/

# Install any needed packages specified in requirements.txt
RUN pip install --no-cache-dir -r requirements.txt

# Copy the current directory contents into the container at /app
COPY . /app/

# Expose port 8000 to the outside world
EXPOSE 8000

# Run the Django application
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

Outro ❤️

I am making this series of content to help other aspiring developers who want to start their career in Web Development. It takes a lot of effort to make the series, If you really like my work Buy me a Coffee and Follow me on Twitter techtoe and Instagram Tech Shark (@techshark_web)

In HTML, HTML tags are the building blocks of HTML, the language used to create websites. HTML tags are codes that are used to create the different elements of a web page.

They consist of opening and closing tags, which are wrapped around content to define its meaning and presentation. The opening tag is enclosed in angle brackets and contains the name of the tag, and the closing tag is also enclosed in angle brackets and contains the name of the tag preceded by a forward slash.

For example, the HTML tag for a paragraph is <p>, which is the opening tag, and </p>, which is the closing tag. The content that is contained between the opening and closing tags is what makes up the paragraph.

There are many different HTML tags that can be used to create various types of content, such as headings, images, links, lists, tables, forms, and more. By using a combination of these tags, web developers can create complex web pages with a variety of content and functionality.

Some useful HTML tags

1. <html> - This tag is used to indicate the start and end of an HTML document.

2. <head> - This tag is used to contain the metadata of an HTML document, such as the title, description, and keywords.

3. <body> - This tag is used to contain the visible content of an HTML document, such as text, images, and other media.

4. <p> - This tag is used to indicate a paragraph of text.

5. <h1> to <h6> - These tags are used to indicate headings of varying sizes and importance, with <h1> being the largest and most important.

6. <img> - This tag is used to insert an image into an HTML document.

7. <a> - This tag is used to create a hyperlink to another web page or to a specific part of the same page.

8. <ul> and <li> - These tags are used to create unordered lists, with <ul> indicating the start of the list and <li> indicating each item in the list.

9. <ol> and <li> - These tags are used to create ordered lists, with <ol> indicating the start of the list and <li> indicating each item in the list.

10. <table>, <tr>, <td> - These tags are used to create tables, with <table> indicating the start of the table, <tr> indicating a row, and <td> indicating a cell within the row.

Let's create a website

<!DOCTYPE html>
<html>
<head>
    <title>My Simple Website</title>
</head>
<body>
    <h1>Welcome to My Simple Website</h1>
    <p>This is a simple website created using HTML tags.</p>
    <h2>My Favorite Things</h2>
    <ul>
        <li>Cats</li>
        <li>Pizza</li>
        <li>Reading</li>
    </ul>
    <h2>A Photo of a Cat</h2>
    <img src="https://placekitten.com/200/300" alt="A photo of a cat">
    <h2>My Favorite Quote</h2>
    <blockquote>"The only way to do great work is to love what you do." - Steve Jobs</blockquote>
    <h2>Contact Me</h2>
    <p>You can contact me by <a href="mailto:example@gmail.com">email</a>.</p>
</body>
</html>

Attributes in HTML

In HTML, attributes are additional pieces of information that can be added to an HTML element to provide more details about that element. Attributes are used to modify the default behavior of an element or to provide additional information about it.

Attributes are specified within the opening tag of an HTML element and consist of a name and a value, separated by an equals sign. The value is usually enclosed in quotation marks.

Here's an example of an HTML element with an attribute:

<img src="image.jpg" alt="An image of a mountain">

In this example, the <img> tag is used to display an image, and it has two attributes: src and alt. The src attribute specifies the location of the image file, and the alt attribute provides alternative text for the image, which can be used by screen readers or when the image cannot be displayed.

Some common attributes in HTML include:

• class - used to specify one or more CSS classes for an element

• id - used to specify a unique identifier for an element

• href - used to specify the URL of a hyperlink

• title - used to provide additional information about an element (often displayed as a tooltip)

• style - used to specify inline CSS styles for an element

Each HTML element has a specific set of attributes that can be used with it. By using attributes, you can modify the behavior and appearance of HTML elements to create more sophisticated and dynamic web pages.

HTML forms

In web development, HTML forms are a way for users to input data and interact with a web page. Forms allow users to submit data such as text, numbers, or files to a web server for processing.

An HTML form is created using the <form> tag, which contains one or more input elements, such as text boxes, checkboxes, radio buttons, and dropdown lists. When the user submits the form, the data is sent to a server using the HTTP protocol. The server can then process the data and send a response back to the user.

Here's an example of a simple HTML form:

<form action="submit.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="message">Message:</label><br>
  <textarea id="message" name="message"></textarea><br><br>

  <input type="submit" value="Submit">
</form>

In this example, the form has three input elements: a text box for the user's name, an email input for the user's email address, and a text area for the user's message. The action attribute specifies the URL of the script that will process the form data when it is submitted. The method attribute specifies the HTTP method that will be used to submit the form data (in this case, POST).

When the user clicks the "Submit" button, the form data is sent to the script specified in the action attribute, which can then process the data and generate a response. Form processing can be done using server-side languages like PHP, Python, or Node.js.

HTML forms are an essential part of web development, allowing users to interact with web pages and submit data for processing. They are used in a wide range of applications, from simple contact forms to complex web applications.

Some HTML Form Tags

1. <form>: This tag creates an HTML form that contains input fields and other elements that allow users to submit data to a web server.

2. <input>: This tag creates a variety of input fields that allow users to enter data, such as text, numbers, dates, and files. Some of the common type attributes used with the <input> tag include text, password, checkbox, radio, submit, reset, file, date, time, and email.

3. <textarea>: This tag creates a multi-line input field that allows users to enter large amounts of text, such as comments or messages.

4. <select>: This tag creates a drop-down list that allows users to select one or more options from a list of predefined values.

5. <option>: This tag is used within the <select> tag to define the values that can be selected in the drop-down list.

6. <label>: This tag is used to associate a label with an input field, allowing users to click on the label to select the input field.

7. <button>: This tag creates a clickable button that can be used to submit a form or perform other actions.

8. <fieldset> and <legend>: These tags are used to group related form elements and provide a title for the group.

9. <form action="url" method="get/post">: This tag specifies the destination URL and HTTP method that will be used to submit the form data.

Example with HTML forms

<!DOCTYPE html>
<html>
<head>
    <title>Simple Form Example</title>
</head>
<body>
    <form action="submit.php" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>

        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="18" max="100"><br><br>

        <label for="gender">Gender:</label><br>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label><br>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label><br>

        <label for="favorite-color">Favorite Color:</label>
        <input type="color" id="favorite-color" name="favorite-color"><br><br>

        <label for="favorite-fruit">Favorite Fruit:</label>
        <select id="favorite-fruit" name="favorite-fruit">
            <option value="apple">Apple</option>
            <option value="banana">Banana</option>
            <option value="orange">Orange</option>
            <option value="strawberry">Strawberry</option>
        </select><br><br>

        <label for="comments">Comments:</label><br>
        <textarea id="comments" name="comments"></textarea><br><br>

        <input type="submit" value="Submit">
    </form>
</body>
</html>

In this example, the form includes several different input types, including text boxes, email fields, password fields, number fields, radio buttons, color pickers, and dropdown lists. The form also includes a textarea for comments, as well as a submit button.

When the user submits the form, the data is sent to the server specified in the action attribute of the form using the HTTP method specified in the method attribute (in this case, post). The server can then process the data and generate a response.

Note: that the example above is just a simple illustration of how you can use HTML form tags. In a real web application, you would need to implement server-side code to process the form data and handle user input securely.

Semantic HTML

Semantic HTML refers to the use of HTML markup to convey the meaning and structure of web content rather than just its appearance. In other words, it's using HTML tags to provide more context and meaning to the content of a web page, so that it can be more easily understood by both human readers and machines such as search engines, screen readers, and other assistive technologies.

By using semantic HTML, web developers can create more accessible, more maintainable, and more search engine-friendly web pages. Here are some examples of semantic HTML tags and their meaning:

1. <header>: This tag represents the introductory content of a web page, such as the logo, the site navigation, and the main heading.

2. <nav>: This tag represents a section of a web page that contains navigation links.

3. <article>: This tag represents a self-contained piece of content, such as a blog post or a news article.

4. <section>: This tag represents a generic section of a web page, such as a chapter or a group of related articles.

5. <aside>: This tag represents content that is related to the main content of a web page, but can be considered tangential or supplementary.

6. <footer>: This tag represents the footer or end content of a web page, such as the copyright information or the site map.

7. <main>: This tag represents the main content of a web page, which should be unique to that page and not repeated across multiple pages.

By using these and other semantic HTML tags appropriately, you can make your web content more understandable and useful to both humans and machines.

HTML Media

HTML media refers to the various multimedia content that can be included in an HTML document, such as images, videos, and audio files. By incorporating media elements into your web pages, you can make your content more engaging, informative, and visually appealing.

Here are some examples of how to use HTML tags to include different types of media:

1. <img>: This tag is used to display images on a web page. You can specify the image source using the src attribute and add alternative text for users who can't see the image using the alt attribute. Example:

    <img src="example.jpg" alt="Example image">
   

2. <video>: This tag is used to embed video content on a web page. You can specify the video source using the src attribute and add controls for playing, pausing, and adjusting the volume using the controls attribute. Example:

    <video src="example.mp4" controls>
    </video>
   

3. <audio>: This tag is used to embed audio content on a web page. You can specify the audio source using the src attribute and add controls for playing, pausing, and adjusting the volume using the controls attribute. Example:

    <audio src="example.mp3" controls>
    </audio>
   

4. <iframe>: This tag is used to embed external content, such as a YouTube video or a Google Map, on a web page. You can specify the source URL using the src attribute. Example:

    <iframe src="https://www.youtube.com/embed/example"></iframe>
   

By including multimedia elements in your web pages, you can make your content more engaging and dynamic, and provide users with a more rich and interactive experience. However, it's important to use media elements responsibly and ensure that they are accessible and do not negatively impact the page's performance.

These are the main topics that are basic in HTML there are various other topics in HTML that are not included but you can find out and learn those topics on your own.

Exercise

Here are some basic exercises which are covered in this article.

• Create a Portfolio website that tells your skills and your work. use all the HTML tags that you have remembered.

• Create a user input page that takes basic information of the user, then stores the data using https://formspree.io/.

• Embed your favorite Youtube video into your website.

Reference

• HTML Tutorial (w3schools.com)

• HTML Tutorial (tutorialspoint.com)

• Learn HTML | Codecademy

Outro

I am making this series of content to help other aspiring developers who want to start their career in Web Development. It takes a lot of effort to make the series, If you really like my work Buy me a Coffee and Follow me on Twitter tejaswan1 and Instagram Tech Shark (@techshark_web)

What is HTML?

HTML stands for (hypertext markup language) used for designing websites and it is known as the skeleton of a website. HTML is not a programming language because it does not contain any programming logic to develop software.

HTML consists of a series of elements, such as headings, paragraphs, lists, images, and links, that are represented by tags. These tags are used to define the structure of the content, and they are surrounded by angle brackets (e.g. <p>). The content of the web page is placed between the opening and closing tags.

Syntax of an HTML element

An HTML element consists of three parts: a start tag, content, and an end tag.

<p>This is some text in a paragraph.</p>

In this example, <p> is the start tag, This is some text in a paragraph. is the content, and </p> is the end tag. The end tag is identical to the start tag, but with a forward slash (/) added before the tag name.

The start tag is used to define the type of element being created, and it may also contain attributes that provide additional information about the element. For example:

<p class="highlight">This is some text in a paragraph.</p>

In this example, the start tag contains an attribute named class with a value of "highlight". This attribute can be used to specify a CSS class that provides styling information for the element.

The content of the element is the text or other elements that are contained within the element. In this case, it's the text "This is some text in a paragraph."

The end tag is used to indicate the end of the element and its content. The end tag is optional for some HTML elements, but it's generally recommended to use end tags for all elements to ensure that the HTML is well-formed and can be processed correctly by web browsers and other HTML processors.

Let's write a basic HTML code

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>

    <body>
        hurray.. it's our first web page
    </body>
</html>

Explanation of the code

<!DOCTYPE html>

<!DOCTYPE html>: This line declares the type of document being used as HTML5, which is the latest version of HTML.

<html>

This is the opening tag for the HTML document, and it contains all of the other elements on the page.

<head>
    <title>My First Web Page</title>
</head>

The head section of the HTML document contains information about the page that is not displayed to the user, such as the title of the page. The title element in the head section sets the title of the page, which is displayed in the browser's title bar.

<body>
    hurray.. it's our first web page
</body>

The body section of the HTML document contains all of the content that is displayed to the user. in the above example, we haven't used any HTML tags we will understand the whole HTML tags concept in the next article.

</html>

This is the closing tag for the HTML document, which indicates the end of the document.

HTML comments

HTML comments are used to add notes to an HTML document that are not displayed in the browser. They are used to document the code, to explain what certain parts of the code do, or to temporarily hide parts of the code without removing them.

HTML comments start with <!-- and end with -->. Everything between these two markers is treated as a comment and ignored by the browser.

Here's an example of an HTML comment:

<!-- This is an HTML comment -->

In this example, the text "This is an HTML comment" is a comment that is not displayed in the browser.

HTML comments can be placed anywhere in an HTML document and can span multiple lines. They are a useful tool for keeping track of changes or for working with others on a project, as they allow you to add explanations and context to your code that can be easily shared and understood by others.

Features of HTML

1. Structure: HTML provides a structure for creating and organizing content, including headings, paragraphs, lists, links, images, and more.

2. Hyperlinking: HTML allows you to create links between pages, allowing users to easily navigate your website.

3. Multimedia: HTML supports a wide range of multimedia content, including images, audio, and video, making it possible to create rich and engaging web pages.

4. Compatibility: HTML is an open standard and is supported by all major web browsers, making it possible to create content that can be accessed by a large audience.

5. Styling: HTML can be combined with CSS (Cascading Style Sheets) to provide visual styling and layout information for a web page.

Reference

• Getting started with HTML - Learn web development | MDN (mozilla.org)

• What is HTML? Definition of Hypertext Markup Language - javatpoint

Outro

I am making this series of content to help other aspiring developers who want to start their career in Web Development. It takes a lot of effort to make the series, If you really like my work Buy me a Coffee and Follow me on Twitter tejaswan1 and Instagram Tech Shark (@techshark_web)

Types

Center Horizontal

• Relative and absolute

• Flex Box

• Margin auto

Center Vertical

• Through Relative and absolute

• Through Flex Box

Center horizontal and vertical

• Relative and absolute

• Though Flex Box

• Through Grid

Center Horizontally

Through relative and absolute

By using relative and absolute, we can center a div horizontally let's assume that a child div is dependent on a parent div. In this kind of situation, we have to use relative and absolute by providing relative to the parent and absolute to the children.

Relative tells the children div where to start its position. And absolute tells the children to follow the absolute value of the parent.

.parent {
    position: "relative";
}
.child {
    position: "absolute";
    left: "50%";
    transform: translateX(-50%);
}

But the left 50% will not center correctly, to avoid we need to use transform: translateX(-50%); .

Through FlexBox

flexbox is the comfortable way to center a div horizontally. the only thing that the parent div should contain width by default div is a block element so, no need for manual width. flexbox contains justify-content: center to center horizontally.

.parent{
    display: "flex";
    justify-content: "center";
}

Through Margin Auto

Margin auto is the easiest way to center a div horizontally. as the div is a block element in which you don't need to add width manually.

Auto keyword in CSS with push the block to as much it can. so if you can auto on both sides. then the div gets to the center.

Margin auto needs when we don't want to add CSS to parent div.

.child {
    margin-left: auto;
    margin-right: auto;
}

/*2nd way one liner*/
.child {
    /* margin: Yaxis and Xaxis */
    margin: 0 auto;
}

Center Vertically

Similar to centering horizontally.

Through Position and absolute

It is similar to the previous but we have to use the Y axis in `transform: translateY(-50%)`.

.parent {
    position: "relative";
}
.child {
    position: "absolute";
    top: "50%";
    transform: translateY(-50%);
}

Through Flex Box

Similar to the previous flexbox but justify-content: center only to center horizontally. but to center vertical, we have to use align-items: center .

Important when you center horizontally height is needed.

.parent {
  height: 100vh;
  display: flex;
  align-items: center;
}

Centering Horizontal and Vertical

Through Position and Absolute

Centering both vertically and horizontally we have to use top and left in the child div. And using translate both the x-axis and y-axis.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Through FlexBox 💖

Similar to the previous one but we have to use both justify-content and align-item for centering both horizontally and vertically.

.parent {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Through Grid 🔥(easy)

If you want to center a div with one line of code 🤯. the grid has a one-line solution to flexbox by using place-items: center .

place-items: center will center both horizontally and vertically.

.parent {
  height: 100vh;
  display: grid;
  place-items: center;
}

References 🧑‍💻

• Centering in CSS: A Complete Guide | CSS-Tricks - CSS-Tricks

• 11 Ways to Center Div or Text in Div in CSS (hubspot.com)

Outro ❤️

I am making this series of content to help other aspiring developers who want to start their career in Web Development. It takes a lot of effort to make the series, If you really like my work Buy me a Coffee and Follow me on Twitter tejaswan1 and Instagram Tech Shark (@techshark_web)

The Internet has become popular in the early 1990s to share data from one location to another location. Actually, internet technology was developed for military purposes in the United States in the 1960s. The packet switching technology was essential to the development of ARPANET by the United States Military. ARPANET is considered the first known group of interconnected computers, aka the internet.

How the Internet works

Internet works on interconnected networks of computers across the globe, which enables one to connect to other devices worldwide. It operates by transmitting data in the form of packets from one device to another, with each packet containing source and destination information.

When you send a request for a website or any other data on the Internet, your device sends the request through your Internet Service Provider (ISP) to the servers that host the data. The servers then send the data back to your ISP, which delivers it to your device.

The underlying technology used for transmitting data over the Internet is the Internet Protocol (IP), which defines how data is packaged and addressed for transmission. The data is transmitted using various physical and wireless communication technologies such as Ethernet, Wi-Fi, and cellular networks.

In summary, the Internet works by allowing devices to communicate with each other using standardized protocols for transmitting data, enabling the sharing of information and resources on a global scale.

How the Internet is connected worldwide

The Internet is connected globally through a vast network of routers and servers that are connected to each other through various communication technologies, including fiber optic cables, satellite connections, and microwave links.

At the core of the Internet is a global network of high-speed fiber optic cables that interconnect data centers and major Internet Service Providers (ISPs) around the world. These fiber optic cables transmit large amounts of data at very high speeds and form the backbone of the Internet.

For devices to connect to the Internet, they need to be connected to an ISP, which provides access to the Internet. This can be done through a wired connection, such as an Ethernet cable, or wirelessly through technologies such as Wi-Fi or cellular networks.

Once a device is connected to an ISP, it can communicate with other devices on the Internet and access online content and services. The data is transmitted from one device to another in the form of packets, with each packet containing source and destination information.

What happens when you type google.com in the browser

• The web browser resolves the domain name "google.com" to an IP address, which is the numerical address that identifies a device on the Internet. This process is known as Domain Name System (DNS) resolution.

• The web browser sends a request for the data associated with the IP address of "google.com" to the nearest DNS server.

• The DNS server responds with the IP address of the server that hosts the "google.com" website.

• The web browser sends an HTTP (Hypertext Transfer Protocol) request to the server that hosts "google.com", asking for the data associated with the website.

• The server responds by sending the HTML, CSS, and JavaScript code that makes up the "google.com" website, along with any images and other assets.

• The web browser renders the HTML, CSS, and JavaScript code to display the "google.com" website on your screen.

What is TCP/IP protocol?

For a beginner, TCP/IP will be hard to understand but in layman's language, TCP/IP protocol helps to transfer data from one device to another device. It is the underlying communication language of the Internet and is used to transmit data between devices on a network.

TCP is responsible for breaking down data into manageable packets, transmitting the packets over the network, and reassembling the packets into the original data on the receiving device. It provides reliable data transmission by ensuring that all packets are received in the correct order and that any missing or corrupted packets are re-sent.

IP is responsible for routing the packets of data from one device to another over the network. It provides the basic method for transmitting data between devices by defining how data is packaged and sent to its destination.

Together, TCP/IP provides a complete set of rules for transmitting data over the Internet, ensuring that data can be sent and received accurately and efficiently, regardless of the devices or networks being used.

Client Server Architecture

Client-server Architecture is an important topic for web developers. because mostly we will be developing web applications around client-server Architecture.

The client typically initiates a request for information or services and the server responds by providing the requested information or services. The client and server communicate through a standard communication protocol, such as HTTP or FTP, to exchange information.

In a client-server network, the server provides a central source of information and services, while the clients request and receive information and services from the server. This architecture allows for efficient and scalable distribution of resources and processing power, as a load of processing and data storage can be distributed across multiple servers.

Definitions

• ISP: An Internet Service Provider (ISP) is a company that provides Internet access to customers. An ISP provides the means for customers to connect to the Internet, usually by offering a combination of hardware, such as a modem, and a connection to the Internet through a wired or wireless network.

• DNS: The Domain Name System (DNS) is a decentralized system that is responsible for resolving domain names, such as "google.com", into IP addresses, which are the numerical addresses that identify devices on the Internet.

• HTTPS: HTTPS (Hypertext Transfer Protocol Secure) is a widely used security protocol for secure communication over the Internet. It is used to protect the privacy and integrity of data that is transmitted between a web browser and a website.

• IP Address: An IP address (Internet Protocol address) is a unique numerical label assigned to each device connected to the Internet. It acts as an identifier for devices on a network and is used to locate and communicate with other devices on the Internet. IP addresses are written in a standardized format, such as 192.168.1.1, and are typically divided into two types: IPv4 and IPv6. IPv4 addresses are written as four sets of numbers separated by periods (e.g. 192.168.1.1)

References

• How does the Internet work? - Learn web development | MDN (mozilla.org)

• How does the Internet work? | Cloudflare

• How Does the Internet Work? - GeeksforGeeks

• Client Server Architecture - Detailed Explanation - InterviewBit

Outro

I am making this series of content to help other aspiring developers who want to start their career in Web Development. It takes a lot of effort to make the series, If you really like my work Buy me a Coffee and Follow me on Twitter tejaswan1 and Instagram Tech Shark (@techshark_web)

Flow of This Series

Frontend

Introduction

• How the internet works

HTML

• Introduction to HTML

• HTML Tags

• Advance HTML

Tools

• Learning Chrome Dev Tools

• Walkthrough of Visual Studio Code

CSS

• Introduction to CSS

• Basics of CSS (margin, padding, box model)

• Responsive design with CSS

• Introduction to CSS animation

• Tricks for better CSS

JavaScript

• Introduction to JavaScript

• Variables, conditions, loops

• DOM (Document Object Model)

• BOM (Browser Object Model)

• Functions

Project Stage 1

• Netflix UI clone

• Microsoft UI clone

• Making a Web Calculator

React JS

• Introduction to React JS

• ES6

• Single page web applications

• Virtual DOM

• Class vs functional components

• React Hooks

• Making custom Hooks

• Routing (React Router)

• Introduction to State Management

• API Fetching

Tools 2

• Importance of Linux

• Using Terminal

• Introduction to Git and GitHub

Backend

Why Backend

• Client - Server Architecture

• Introduction to APIs

Node.js

• Introduction To Node.js

• Basics API's Node.js

• File System Operations

• Non Blocking IO

• Handling APIs with Express. Js

• Database connection with Node.js

• CRUD operations

• API Testing with Postman

Databases

• Introduction to SQL

• Using PostgreSQL

• SQL vs NoSQL

• Introduction to MongoDB

• MongoDB with Node.js

Project Stage 2

• Notes Application

• Chatting Application

• E-commerce Application

Additional Topics

• Need for Typescript

• Introduction To Docker

• Deployment Of Applications

And much more added to the series....

FAQs on this series

What I will learn from this series?

In this series, we will start learning from basics like how the internet works to advance topics like databases, and Internet Security. All the topics will be covered from the basics.

Do I need any prerequisites to start this series?

Simply, you don't need any prerequisites because we will start from the basics. The only thing is you need a computer and good internet. And you don't need any programming basics to start web development.

How many articles can I expect in a week?

I will make sure to post at least 2 to 3 posts a week. It takes time to make the content for beginners but I will try to be consistent.

What Programming languages I will learn from this series

This series contains markup languages like HTML and CSS. And programming languages like JavaScript and Typescript.

Frontend

• HTML

• CSS

• JavaScript

Backend

• Node.js

Database

• MongoDB

• PostgreSQL (SQL)

Frameworks

• React.JS

• Express.js

• Next.js

Advance Concepts

• Internet Security

• Serverless

• Deep dive into JavaScript Architecture

• TypeScript

A Request

I am making this series of content to help other aspiring developers who want to start their career in Web Development. It takes a lot of effort to make the series, If you really like my work Buy me a Coffee and Follow me on Twitter tejaswan1 and Instagram Tech Shark (@techshark_web)

So today I want to share some underrated Ui libraries which you should definitely try.

Libraries Used in the article.

1. Mantine UI

2. NextUI

3. HeadlessUI

1. Mantine UI

Mantine Ui is an underrated Ui library, Even I have started using Mantine UI in my personal projects.

The main advantage of using Matine UI is the Components. The components provided by the Mantine UI are lit 🔥, unlike ChakraUI the MantineUI provides 100+ components which is crazy.

Mantine Ui is not only limited to components but also provides React Hooks which are useful and saves lots of time. Hooks like use-pagination for pagination use-local-storage to access local storage, use-Toggle for Toggling in the state.

Features

1. 100+ components

2. Predefined hooks

3. Provides React Form (Mantine form)

4. Easy-to-use CSS

Adding To Your Project

For installing Mantine UI in your React project these steps need to be followed.

npm install @mantine/core @mantine/hooks @emotion/react

Index.js

import { MantineProvider, ColorSchemeProvider } from "@mantine/core";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <MantineProvider>
            <App />
        </MantineProvider>
    </React.StrictMode>
);

That's It, I will try to make a separate Article about Matine UI installation, dark theme, hooks, etc.

Link: https://mantine.dev/

2. Next UI

NextUI is a new UI library system that can be used for both React and NextJs but NextUI gives an edge if you are using NextJs. NextUI is still in beta version which is not recommended to use in production but you can try it as a side project.

Features

1. Beautiful Components

2. Dark mode

3. Easy Next js Support

4. Stitches CSS customization

Adding To Your Project

For installing NextUI in your React project these steps need to be followed.

npm i @nextui-org/react

index.js

import { NextUIProvider } from '@nextui-org/react';
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
         <NextUIProvider>
            <App />
         </NextUIProvider>
    </React.StrictMode>
);

Link: https://nextui.org/

3. HeadlessUI

Most of us have moved to tailwind CSS as a goto library for writing custom CSS but the problem with custom CSS is when we start making menus, switch, model boxes, etc we need to write custom javascript to handle state. HeadlessUI will solve this problem by providing basic components which are important when writing custom CSS which saves lot of time.

Features

1. Lightweight

2. Easy Transitions

3. works with both react and vue

Adding To Your Project

For installing HeadlessUI in your React project these steps need to be followed.

npm install @headlessui/react

[yourcomponent].js

import { Popover } from '@headlessui/react'

function MyPopover() {
  return (
    <Popover className="relative">
      <Popover.Button>Solutions</Popover.Button>

      <Popover.Panel className="absolute z-10">
        <div className="grid grid-cols-2">
          <a href="/analytics">Analytics</a>
          <a href="/engagement">Engagement</a>
          <a href="/security">Security</a>
          <a href="/integrations">Integrations</a>
        </div>

        <img src="/solutions.jpg" alt="" />
      </Popover.Panel>
    </Popover>
  )
}

Link: https://headlessui.com/