Understanding HTML Grid System: A Comprehensive Guide with Examples

HTML for Absolute Beginners


In the world of web development, creating responsive and visually appealing layouts is crucial. One powerful tool at a developer’s disposal is the HTML Grid System. With its flexibility and ease of use, the grid system allows developers to structure their web pages efficiently. In this blog post, we will delve into the basics of the HTML Grid System, exploring its syntax and providing practical examples to help you get started.

What is the HTML Grid System?

The HTML Grid System is a layout model that enables developers to design web pages in a two-dimensional format, dividing the page into rows and columns. It’s a fundamental part of modern web design, providing a straightforward way to create responsive layouts that adapt to different screen sizes.

Getting Started:

To implement the HTML Grid System, you’ll need to use the CSS Grid properties. Let’s begin with the basic structure:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>HTML Grid System</title>
    <div class="grid-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>

In the above example, we’ve created a basic HTML structure with a container div and six child divs. Now, let’s style it using CSS:

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 20px;

.item {
    background-color: #3498db;
    color: #fff;
    text-align: center;
    padding: 20px;
    border-radius: 5px;


  • display: grid;
    The display property is set to grid to establish a grid container.
  • grid-template-columns: repeat(3, 1fr);
    grid-template-columns defines the number and size of columns in the grid. In this example, we’ve created three columns, each taking up an equal fraction of the available space.
  • gap: 10px;
    The gap property specifies the size of the gutters (gaps) between the rows and columns.

In this CSS code, we’ve set up a grid container with three columns of equal width using grid-template-columns. The gap property adds spacing between the grid items, and we’ve added some styling to the grid items themselves.

Responsive Grid:

One of the key advantages of the HTML Grid System is its responsiveness. By using media queries, you can adjust the layout based on different screen sizes. Let’s modify our CSS to make the grid responsive:

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);

@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr;

Now, when the screen width is 768 pixels or less, the grid will switch to two columns, and when the width is 480 pixels or less, it will become a single column.


The HTML Grid System is a powerful tool for creating flexible and responsive layouts in web development. By understanding its basic structure and experimenting with examples, you can enhance the visual appeal and usability of your websites. Don’t hesitate to explore further and customize the grid system to suit your specific design needs. Happy coding!


HTML for Absolute Beginners


Hypertext Markup Language revision 5 (HTML5) is markup language for the structure and presentation of World Wide Web contents. HTML5 supports the traditional HTML and XHTML-style syntax and other new features in its markup, New APIs, XHTML and error handling.

There are three organizations that are currently in charge of the specification of HTML5:

  1. Web Hypertext Application Technology Working Group (WHATWG) created the HTML5 specification and is in charge of the HTML5 development that provides open collaboration of browser vendors and other involved parties.
  2. World Wide Web Consortium (W3C) is in charge with delivering the HTML5 specification.
  3. Internet Engineering Task Force (IETF) is in charge of the development of HTML5 WebSocket API.

HTML5 comes with a lot of flexibility and it supports the following features −

  • Uppercase tag names.
  • Quotes are optional for attributes.
  • Attribute values are optional.
  • Closing empty elements are optional.


the Doctype in older version is written to longer bit in the HTML5 is just specify the doctype

<!DOCTYPE html>

Character Encoding

<meta charset = "UTF-8">

<link> tag

In older version there define the file types but here just defile the path of the file:-

<link rel = "stylesheet" href = "stylefile.css">

<script> tag

Script syntax also can write so simple as :

<script src = "scriptfile.js"></script>

HTML5 Attributes

In the HTML Attributes are be specified within start tags and must never be used in the end tags.

HTML5 attributes are case insensitive so we can write in all uppercase or mixed case, but most common convention is written with lowercase.

Custom Attributes

A new feature introduced in HTML 5 called as custom data attributes.

A custom data attribute starts with data- and the name will be user define.

Here is a simple example −

<div class = "example" data-name = "website" data-value = "dynamic">

there use two custom attributes called data-name and data-value. Using those attribute you able to get the values using JavaScript APIs or CSS in similar way as you get for standard attributes.

What is CSS and type with brief description

What is CSS and type with brief description

What is CSS and type with brief description.
We all are know about the HTML. Basically all the website are design using the HTML (that is called front-end web development). So When we are design a front-end that time we are use the HTML code. But the HTML is not only create the hole website front-end development with a good graphical design. To complete front-end development we are use the CSS(stands for Cascading Style Sheets).

So What is CSS and type with brief description

CSS stands for Cascading Style Sheets. The CSS can control HTML elements how they are displayed on web browser.
There are three way to write CSS for a website. Mean there are three types of CSS.

  • Inline styles
  • Embedded styles or Internal styles
  • External styles
  1. Inline styles: Inline styles are written directly in the tag and it only affect specific tag they are written the CSS. Syntax:style="" Example:
<a href="http://www.spectrumtech.in" style="color:red;text-decoration: underline;">Web Design</a>

Output: Web Design

Explain: Here the “style” tag content the CSS for the anchor tag. So when the browser display the link text then its display text color RED and the text underline.

2. Embedded styles or Internal styles: Embedded styles or Internal styles are written in the HTML HEAD section and this CSS affect the current HTML file where the CSS is present. Example:

<!DOCTYPE html>
<title>This is the title of the page.</title>
 <p class="classname">This is a paragraph.</p>
 <a href="http://www.spectrumtech.in" class="blue">This is a link.</a>

Output: This is a paragraph This is a link.

3. External styles: External styles are written outside of the HTML file in a separate document and then attached to various web documents. Now in this time most website use the External styles. How to link the External styles:

<link href='url' rel='stylesheet' type='text/css' />
how to write External styles or Internal styles

So here we discuss about the how to write basic CSS for External styles or Internal styles.
Both are same process using the “class name” or the “id name” or “attributes name” or the “tags name”. for the class name we are use the “.”(dot) before the classname for denoted the class like .classname , for ID use “#” like #id , for attribute like [attribute^=”value”] and tag name just use the tag name.
For define class and use:

Define Class and write CSS regarding this class Example: 
<a href="http://spectrumtech.in/" class="classname">This is a link</a>
Example: .classname{color:red;}

For define ID and and write CSS regarding this ID with Example:
<a href="http://spectrumtech.in/" id="IDname">This is a link.</a>

How to write CSS using attribute Name:: 
<a href="http://spectrumtech.in/" target="_blank">This is a link.</a>
 Example:a[target="_blank"] { color: black;}

How to write CSS using tag name:: 
<a href="http://spectrumtech.in/" >This is a link.</a>
 Example:a{ color: black;}

*Notes: Most professional web designers are use a External styles to govern a site’s layout and design. The disadvantage to external style sheets is that every page will use every style in the CSS sheet, So some of pages will load a much larger CSS page than that actually required. But Advantage : for a website have one CSS file and its load once for the all pages because the browser can cache the CSS file for first time and that case the CSS file can’t hit second time and the website load quickly.

I hope this article helped you to learn what is css and types?.

HTML for Absolute Beginners

HTML for Absolute Beginners

Hear we describe how to Learn HTML easy way for the beginner with example and Description about the HTML tags and the attributes with example.

What is HTML?

HTML (Hypertext Markup Language) is the language in which most websites are written. HTML is used to create pages and make the webpage visible.

The History of HTML

HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989

The current standard of HTML is dubbed HTML 5 and is specifically at version 5.2.

Hypertext means that the document contains text, links, pictures, and even sound and video.

A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes.


To write HTML programming language we are use “tags”, browser read the tags and understand how a webpage should look. The tags usually come in pairs: an opening tag defines the start of a Html code and an ending tag defines the end of Html code. There are many different kinds of tags present in html, and each one has use for a different purpose.

Now check Here is an example how to write HTML code.

<DOCTYPE html>
  <title>This is the title of the page.</title>
<body bgcolor="gray">
 <p>This is a paragraph.</p>
 <a href="http://spectrumtech.in>This is a link.</a>
 <img src="image url" alt="describe the image use for" />

Some of HTML tags:

Tag name Name Function Code Example
<!DOCTYPE> Doctype Defines the Document type <!DOCTYPE> html
<html> html Defines an HTML document <html>All code and all tags are under this tag</html>
<head> Head Contains any code that is not used to display elements on the webpage <head>here we write the title tag, favicon link, external CSS link, style tag, external JS link and more… </head>
<title> title Defines the title of the webpage <title>(shown on the tab in browser)</title>
<body> body Contains the visible elements of the webpage <body>Which are display on the website ll are written under this body tag</body>
<h1> to <h6> Headings Headings of various sizes there are six heading tag h1 to h6. h1 is the largest and h6 is the smallest
<p> Paragraph Defines a paragraph of text <p>content here</p>
<Anchor> Anchor Creates active links to other web pages <a href="www.spectrumtech.in">Learn HTML for the beginner in easy way</a>
<img> image Defines <img>Displays an image on the page</img>
<br> html Break line <br>break the line. if you use <br>“here use br tag” tag with in a line then it break the line after the br tag.
<center> html Moves content to the center of the box or page <center>display the text in center with in the area.</center>
<script> html Creates a script in the webpage <script>Here we write the script like JavaScript or Jquery</script>

What is HTML Attributes

Attributes provide additional information about HTML tag and complete the purpose for the HTML tags.

  • all HTML tag have attributes.
  • All attributes are start in the starting of html tag.
  • Attributes have the name and value pairs Example: src=”image path”. there the “src” is Attributes name the the “image path” is the Attributes value.
  • All the attributes values are written with in the Single or Double Quotes