Learn to create a very simple website using HTML and CSS just in 5 minutes

Hello learners, as you have seen in the title, today we will learn. How to make a very simple Website in 5 minutes using pure HTML and CSS.

So what's the point for you guys behind this post?

This post is going to teach you some HTML and CSS basics, to make your concept very clear though many of you would have never played around HTML or CSS but since this post is gonna quite easy for you, so you won't feel any problem.

How to enroll for HTML and CSS courses on TECH-PHONEIX for free?

Before we start the guide I would like to make you aware that our website offers free HTML, CSS and JAVASCRIPT courses separately for beginners. If you are interested to learn these codes and programming languages. Dont hesitate to contact us via contact from or you can leave a comment at the last in this post.

Starting the Guide

Before we move further, have a look at some keywords that are going to be used while writing the codes. It is very important to know the meanings of tags and their working before doing any type of programming.

Note: every opening element has a closing too. Make sure to always close a tag that you started. For example, if I used an opening tag (<div>) then after using this tag, I will close the tag at the last (</div>) by putting a forward slash.

Special Tags in HTML

<br> tag : We use this tag basically to give spaces or breaks between two continuous paragraphs.

<tr> tag : This is the table row tag. We make tables through <tr> tag. we use this tag to specify the rows, in which we enter our values. As in row format.

<td> tag : This is the table Data tag. <td> tags are used within <tr> tags for entering the data values.

<thead> tag : This tag is the table head tag. Which is used to define the heading of the table. ( heading comes in bold letters)

<tbody> tag : We use table body tag to define the body of the table.

<div> tag : div tags are used wherever you want to add CSS style. Like if you want to add CSS in any particular HTML code just move that HTML code inside <div> </div> tags

<h1> tag : it is an heading tag , used to write headings in text format. Heading priority order goes from <h1> to <h6> .

EXAMPLE :-

<h1> is considered major heading.
<h2> less than <h1>, similarly

<h3>
<h4>
<h5>
<h6> it is considered as least heading.

<head> tag : we use a head tag for the whole head section of our HTML program and we do write CSS in the head section.

<style> tag : style tag is used to make the CSS code work. Without adding a style tag you can not use CSS. <style> tag is placed inside <head> tag.

<body> tag : we use a body tag for the whole body of the HTML program. We do write paragraphs and HTML codes in body tag including most of the tags like <td> , <tr> , <thead>, <tbody> , <div> , etc...

<header> : we use a header tag to define the heading area of the website.

<footer> : we use a footer tag to define the footer area of the website.

<ul> : It is known as unordered list. This tag is used to write list items in unordered format. For example

cake
soap
pizza
coffee
Tea
pancakes

<ol> : It stands for ordered list. This tag is used to write list items in an ordered format. For example

cake
soap
pancakes
coldrink
Tea

<li> : li stands for list item. After specifying the property of our list whether it ordered list (<ol>) or an unordered list (<ul>). We write our list items in them. By applying a <li> tag. Please note that the <li> tag is common in both order and unorder list format.

<p> : This is paragraph tag. This tag is used to write paragraphs in Html programming. For example

<p> This is a paragraph tag. And this tag is used for writing paragraphs. It is a very good tag and is used for writing</p>

For now it is sufficient enough for you guys to understand the structure of the code after learning about these special tags which construct the HTML program. We will move forward to the main content. So open any code editor like vs code or pycharm on your pc or open notepad app to write the program/codes. And make sure to add extension .html to the name you give to your file. Example any.html or my first website.html

The boilerplate code

Boilerplate code is nothing but a fixed structure of any particular programming language. In more clear terms boilerplate code means writing fixed sets of code that any particular language consists of. We use this code every time we make a new program/file in HTML. Since at this time we are using Html so we will place an Html boilerplate code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

This is our boilerplate code of Html. As I have mentioned above, we write CSS codes in the head tags within style tags. While we write Html codes inside the body tags.

Making website's structure with Html

First of all, we will make a structure of the website. That is, we will write paragraphs, headings, make necessary tables, and as soon as we finish this work. Then we will add CSS style and colors to make our website look beautiful.

After applying the boilerplate code on your code editor now have a look at this complete program.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        ul {

            border-color: antiquewhite;
            color: rgb(255, 0, 0);
        }

        h2 {

            color: coral;
        }

        h1 {

            background-color: crimson;
            color: black;

        }

        table {

            color: brown;
            background-color: darkorange;

        }
    </style>

</head>

<body>


    <header>

        <h1>Resort Book.Com</h1>

    </header>

    <ul>

        <li>HOME</li>
        <li>ABOUT US</li>
        <li>BOOKINGS</li>
        <li>PLANS</li>

    </ul>

    <p> welcome to resort booker , we provide absolute good plans to Lorem ipsum dolor
        elit. Eius adipisci laborum nihil, recusandae eaque delectus consequuntur rem
        blanditiis debitis dicta. Eveniet dolore accusantium impedit possimu Lorem ip
        adipisicing elit. Amet debitis illo rerum eaque, nihil nulla! Predis avo.</p>

    <br>

    <img src="https://imgcy.trivago.com/c_limit,d_dummy.jpeg,f_auto,h_1300,q_auto,w_2000/itemimages/27/87/2787766_v1.jpeg"
        width="600" alt="sd">

    <br>

    <h2>OUR PLANS</h2>

    <div>

        <table>

            <thead>

                <tr>

     <th>Plan</th>
   <th>Subscription</th>
   <th>DATE AVAILABILITY</th>
    <th>PRICE</th>


             </tr>

            </thead>

            <tbody>

                <tr>
                    <td>A</td>
                    <td>vip</td>
                    <td>12/4/20</td>
                    <td>25000/-</td>

                </tr>

                <tr>

                    <td>B</td>
                    <td>Premium</td>
                    <td>5/8/20</td>
                    <td>50000/-</td>

                </tr>

                <tr>
                    <td>C</td>
                    <td>Premium</td>
                    <td>6/12/20</td>
                    <td>30000/-</td>

                </tr>

                <tr>

                    <td>D</td>
                    <td>Vip</td>
                    <td>15/6/20</td>
                    <td>12000/-</td>


                </tr>


                <tr>

                    <td>E</td>
                    <td>Vip</td>
                    <td>27/6/20</td>
                    <td>5000/-</td>



                </tr>

            </tbody>
        </table>
    </div>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error perferendis cori 
        explicabo, consequatur, inventore adipisci sed, aperiam incidunt deleniti eirep
        recusandae quisquam nobis fuga at laboriosam suscipit magnam. Sit, in officiain
        nihil perspiciatis odio maxime labore quisquam cum! Ullam, animi magni quibusm 
        perspiciatis quidem non eius, consequuntur autem deserunt nobis, magnam minus faci
        maiores cupiditate vero dignissimos aliquid ex eius accusantium fuga fuf.

        </p>

    <div>

<h3>REGISTER YOUR RESORT NOW</h3>

        <form action="form.php">


<input type="text" placeholder="type your name">

            <br>
            <br>

 <label for="plan A">
 <input type="radio" name="plan" value="VIP" id="plan A"> PLAN A
 </label>

 <label for="plan B">
<input type="radio" value="premium" name="plan" id="plan B">PLAN B
 </label>


<label for="plan c">
<input type="radio" name="plan" id="plan c" value="premium">PLAN C
</label>


<label for="plan d">
<input type="radio" name="plan" id="plan d" value="vip"> PLAN D
 </label>

<label for="plan e">
<input type="radio" name="plan" id="plan e" value="vip"> PLAN E
</label>

            <br>

<label for="plan f">
<input type="checkbox" name="plan f" id="plan f" value="transport"> Also inlcude transport
</label>

            <br>
            <br>

<textarea name="explain" id="explain" cols="30" rows="10"
 placeholder="Tell us the services you want from us in your pack">
</textarea>

<select name="age" id="age">

 <option value="age">select your age </option>
 <option value="age">below 18 </option>
<option value="age">18-28 </option>
 <option value="age">28-38 </option>
 <option value="age">38-48 </option>
 <option value="age">48-58 </option>
<option value="age">58-68 </option>

            </select>

        </form>

    </div>

</body>

</html>

We placed a style tag within the head tag. So that we can use CSS styles. Ignore every other aspect of the codes. Come to the body section here we entered a <header> tag for the heading of our first website. Under the header tag we gave the heading of our website's name within <h1> first priority order.

Now we will make our navigation bar. Which includes "Home" , "About US" , "Bookings" , "Plans" (You can use your keywords according to your choice.) Within <ul> tag and inside list item <li> .

After that we will describe our website in few words. Within paragraph tags <p></p>. Now to give a space and a break after you complete the paragraph just add a <br> tag so that our site doesn't look messy.

Setting up an image

Next, we will add an image to our website. To give it a better look. For that what you have to do is use an image source tag.

<img src="url of the image from google" width="600px">

Now, we will give a heading about "our plans". That is what kind of plans we do offer to our customers. So, enter a <h2> second priority order heading tag and write our plans within these tags.

We will make a table, with table tags. Make sure to add a <div> tag before starting the table structure work. Further, enter a <table> tag just after the div tag to specify we are making a table.

As soon as we finish this work, after that. We will give the heading to our table and its list items for that, enter <thead> (table head tag). And write the list items inside <th></th> tags as follows. ( you can write the list items for your choice too)

 <thead>

              <tr>

             <th>Plan</th>
             <th>Subscription</th>
             <th>DATE AVAILABILITY</th>
             <th>PRICE</th>


              </tr>

Here we are using <th> tags for entering data values but not <td> tags because we are entering heading values of the table.

Next, we are going to write the body of the table. So enter a <tbody> tag , enter a table row tag inside the <tbdoy></tbody> and within <tr></tr> tags write the data values inside <td></td> tags.

Make 4 to 5 table rows like this and enter different values. Once you finish the data entry work close all the tags (</div> , </table> , </tbody> , </tr>) as necessary.

We will again write some paragraphs and will describe our website furthermore.

Making a booking Form

This is the last and most important stage of our website. A little bit difficult to understand, but no worries Tech-Phoneix is always there for you.

So at the end of our website, we will provide a booking form to our visitors. Those who are interested can book our services by filling this form.

Special tags used in making Form

From here our form code has started. For now, you don't need to understand this code.

Just place it as it is.

<label for="(give any name of your choice, here it doesn't matter)"> : A <label> tag is used to specify a label for an <input> element of a form. It adds a label to a form control such as text, email, password, textarea etc. It toggles the control when a user clicks on a text within the <label> element

<input type="radio" name="plan" id="plan e" value="VIP(give any of your choice)"> PLAN E (give any name of your choice )

Note : in this tag, you can give any name or values to value part but , your id name should always be unique there shouldn't be two same id names. And radio is the button, that is also fixed and can not be changed, if you want to use a button on your form. Also if you are making more than 1 buttons on your form you have to give same values to the name=" " .

<label for="plan A">

<input type="radio" name="plan" value="VIP" id="plan A"> PLAN A
 </label>

  <label for="plan B">
 <input type="radio" value="premium" name="plan" id="plan B">PLAN B
   </label>

 <label for="plan c">
 <input type="radio" name="plan" id="plan c" value="premium">PLAN C
       </label>


  <label for="plan d">
  <input type="radio" name="plan" id="plan d" value="vip"> PLAN D
  </label>

 <label for="plan e">
 <input type="radio" name="plan" id="plan e" value="vip"> PLAN E
 </label>

Now we will create a different type of button, using a checkbox button tag. See this code

<label for="plan f">
<input type="checkbox" name="plan f" id="plan f" value="transport"> Also inlcude transport </label>

Next, we will create a box in which users can write their messages regarding our services. And we can apply this feature by adding a textarea tag.

<textarea name="explain" id="explain" cols="30" rows="10" placeholder="Tell us the services you want from us in your pack"> </textarea>

In placeholder we write, what we want us to make appear in the box. You can enter rows and columns values of your choice and need. Again note that I haven't created two same id names, every id name is unique here. You have to pay attention to it.

At the end we will enter a <select> tag. To grab the age information of users. This feature will appear just behind the box in a small format as a drop-down list. And from there users can select the age group they belong to.

To enter the data values of age ( example : below 70 or above 20 ) we have to write these values inside <option></option> tags and within <select> </select> tags.

 <select name="age" id="age">

 <option value="age">select your age </option>
 <option value="age">below 18 </option>
 <option value="age">18-28  </option>
 <option value="age">28-38 </option>
 <option value="age">38-48 </option>
 <option value="age">48-58 </option>
 <option value="age">58-68 </option>

   </select>

Setting background, text colors using CSS

A website doesn't hold any value if it doesn't look beautiful. If there are no colors and designs in your website, it will just look like an ugly Html structure of lines and paragraphs. Therefore, to make our website look beautiful and attractive we will use styles using CSS.

Do remember CSS is always written inside the <head> section of the website, within <style></style> tag. So let's move to the upper part of our program. To set text colors and background colors, what you have to do is, simply specify the name of the tag in which you want to apply the CSS. And write few lines of code as follows.

<style>

ul{

    border-color: antiquewhite;
    color: rgb(255, 0, 0);
}

h2{

    color: coral;
}

h1{

    background-color: crimson;
    color: black;

}

table{

color: brown;
background-color: darkorange;

}

</style>

Finally, just close all the tags you opened in your whole Html program. And you are done. Congratulations! you have successfully made your first website using pure Html and CSS.

If you have any doubts and queries regarding this post do leave a comment. We will surely reach you within no time.

THANK YOU , for giving your time.

Make a very simple website using pure Html and CSS

Learn to create a very simple website using HTML and CSS just in 5 minutes

So what's the point for you guys behind this post?

How to enroll for HTML and CSS courses on TECH-PHONEIX for free?

Starting the Guide

Special Tags in HTML

The boilerplate code

This is our boilerplate code of Html. As I have mentioned above, we write CSS codes in the head tags within style tags. While we write Html codes inside the body tags.

Making website's structure with Html

Setting up an image

Making a booking Form

Special tags used in making Form

Setting background, text colors using CSS

Post a Comment

Post a Comment

SMS & Call Bombing using CyberGhost and Kali Linux

BruteForce Instagram using Kali Linux

Bruteforce instagram using hydra

Contact Form

Make a very simple website using pure Html and CSS

Learn to create a very simple website using HTML and CSS just in 5 minutes

So what's the point for you guys behind this post?

How to enroll for HTML and CSS courses on TECH-PHONEIX for free?

Starting the Guide

Special Tags in HTML

The boilerplate code

This is our boilerplate code of Html. As I have mentioned above, we write CSS codes in the head tags within style tags. While we write Html codes inside the body tags.

Making website's structure with Html

Setting up an image

Making a booking Form

Special tags used in making Form

Setting background, text colors using CSS

Abhishek Singh

Post a Comment

Post a Comment

Contact Form