How to Make a Website Using HTML and CSS

By
Asif Ali
-
0

Hey guys, hope all of fine, recently, I’ve decided to share with you How to Make a Website Using HTML and CSS. Guys, If you are a beginner in web designing or web development fields and you want to learn step-by-step usage of HTML and CSS to design a website.

So, You’ve come to the right place, Here’s a tutorial on how to make a website using HTML and CSS With this guide, you’ll be able to learn the basics of HTML and CSS coding so that you can design an attractive website for yourself.

How to Make a Website Using HTML and CSS

It can be overwhelming to think of all the steps that go into making a website. But in this article, we’ll walk you through it step by step! Ever want to create a website but didn’t know how? This article will start you off with HTML and CSS.

Introduction to HTML and CSS

HTML stands for (Hyper Text Markup language) which is used to design the website structure and CSS stands for (cascading style sheet) which is used to design web pages.

HTML and CSS are two of the most popular coding languages used on the web. If you’re looking to create a website, these are two essential skills to learn. In this section, we’ll introduce you to HTML and CSS and show you how to use them to create a simple website.

How to Create a Website using HTML on Notepad

Guys, I’ve used VS code editor to Make a Website, So It’s a similar code editor such as Notepad. So, The VS Code editor provides attractive looks of the codes, and also you can install the extension that helps you to write faster codes.

So, I’ve made the complete website using HTML and CSS on VS Code editor, you can watch the below-mentioned video tutorial. Inside the tutorial, you will learn everything that is required to make a website.

Once you watch the tutorial hope you will learn many new things from the tutorial.

How to Make a Website Using HTML and CSS

Congratulations on taking the first steps to create your very own website! In this section, we’ll cover how to use HTML and CSS to create a basic web page.

First of All, you have a code editor and then you need to make a folder. Then you need to open it with your code editor, inside the code editor you need to make the first file with the name index.html.

Then you need to write the basic structure of HTML5, I’m going to share with you the Basic structure of HTML5 below you can check it now.

<!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>How to Make a Website Using HTML and CSS</title>
</head>
<body>
  
</body>
</html>

Then the next thing you need to create a style.css file inside the project folder and then you need to add style.css inside your index.html file.

<link rel="stylesheet" href="css/style.css">

Then you are able to use HTML and CSS to design the website. So, let’s see how to make a navigation bar so, you need to use HTML code inside the HTML document like this.

 <!-- Navbar -->
      <nav id="navbar">
        <div class="container">
          <h1><a href="#">HubTech</a></h1>
          <ul>
            <li><a href="index.html" class="current">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </nav>
<!-- navbar close -->

Once you did that, then you need to use CSS to design it, So, I’m going to share with you the CSS code that helps to display the menus inside your website.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* navbar start */
#navbar{
  background: #3170ff;
  overflow: auto;
}

#navbar h1{
  float: left;
  padding-top: 20px;
}

#navbar ul{
  list-style: none;
  float: right;
}

#navbar ul li{
  float: left;
}

#navbar ul li a{
  display: block;
  padding: 20px;
  text-align: center;
  transition: all 0.5s;
}

#navbar ul li a:hover,
#navbar ul li a.current{
  background: #4397EA;
  transition: all 0.5s;
}
/* navbar close */

Once you did that, then you will see the navigation bar will appear inside your browser. So, the next thing you need to add a showcase section. Inside the showcase section, you need to add the image and also text. So, You need to the same thing go to your index.html page and paste the below-mentioned code.

 <!-- Showcase Area -->
      <div id="showcase">
        <div class="container">
          <div class="showcase-content">
            <h2>The Hub of Technology</h2>
            <p class="lead">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique delectus ut velit
              ducimus quaerat quisquam, ex, suscipit deleniti illum consequatur omnis deserunt,
              placeat facere quasi dolores cupiditate non error necessitatibus! Lorem ipsum dolor,
              sit amet consectetur adipisicing elit.
            </p>
            <a href="#" class="btn">Read More</a>
          </div>
        </div>
      </div>
    </header>

Then the next thing you need to use is CSS to design that, So, Let’s check the CSS code that helps us to display image and also the text inside the image.

/* Showcase Area */
#showcase{
  background: url('../img/img2.jpg') no-repeat
  center center/cover;
  height: 600px;
  color: #fff;
}

.showcase-content{
  padding-top: 170px;
  color: #333;
}

.showcase-content h2{
 font-size: 60px;
 line-height: 1.9em;
}

.showcase-content p{
  font-size: 20px;
  margin-bottom: 20px;
}

.showcase-content .btn:hover{
  background: #4397EA;
  border: none;
  color:#fff;
  transition: all 0.3s;
}
/* Showcase Area */

Then you will able to see the image and also will appear inside your browser, but you have an image because I’ve made it inside my project. Then you can use another code to display the About section, So, Let’s the HTML code that helps to display the About content.

 <!-- About Section -->
    <section class="about">
      <div class="container">
        <h3 class="bg-dark-line"><span>About Us</span></h3>
        <p class="lead">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi beatae nobis officiis illum
          quo eum deserunt fuga numquam! Provident sint iusto, doloremque quae consectetur ipsa
          harum minus enim in possimus. Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quasi beatae nobis officiis illum quo eum deserunt fuga numquam! Provident sint iusto,
          doloremque quae consectetur ipsa harum minus enim in possimus. Lorem ipsum dolor sit amet
          consectetur adipisicing elit. Quasi beatae nobis officiis illum quo eum deserunt fuga
          numquam! Provident sint iusto, doloremque quae consectetur ipsa harum minus enim in
          possimus.
        </p>
        <p class="lead">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique debitis neque
          exercitationem. A, consequatur magnam asperiores impedit adipisci perferendis ab aperiam!
          Voluptatum ducimus ratione maiores. Et ut maxime accusamus mollitia. Lorem ipsum dolor,
          sit amet consectetur adipisicing elit. Iusto, fuga. Voluptatibus, tenetur veritatis
          ratione tempore optio quas debitis quis accusamus culpa maiores dolor facilis obcaecati
          aspernatur suscipit cupiditate perspiciatis minus?
        </p>
      </div>
    </section>
    <!-- About Close -->

Then you need to use CSS to manage your About content inside the website. So, Let’s the CSS code that helps us to manage the About content.

/* About Section */

 .about{
    height: 350px;
    margin-top: 40px;
 }

 .about h3{
    width: 100%;
    border-bottom: 2px solid  #ddd;
 }

 .about h3 span{
    background:  #ddd;;
    padding: 10px 22px;
    color: #333;
    text-align: center;
    display: inline-block;
 }

/* About Close */

Guys, You’ve completed more than three sections inside your website such as the Navigation bar, Showcase, and also About Section. So, Let’s move on to another section. In another section we are going to display the service data, So, Let’s the HTML Code below.

<!-- Our Services -->
    <div id="services">
      <div class="container">
        <h3 class="bg-dark-line"><span>Services</span></h3>
        <div class="box bg-primary">
          <h2>Web Designing</h2>
          <i class="fa-solid fa-paintbrush fa-4x"></i>
          <p class="lead">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam iusto, pariatur sint
            culpa vero impedit ex tenetur doloremque, nihil corrupti, amet soluta? Earum, quidem
            culpa.
          </p>
        </div>
        <div class="box light-gray">
          <h2>Web Development</h2>
          <i class="fa-solid fa-code fa-4x"></i>
          <p class="lead">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam iusto, pariatur sint
            culpa vero impedit ex tenetur doloremque, nihil corrupti, amet soluta? Earum, quidem
            culpa.
          </p>
        </div>
        <div class="box bg-primary">
          <h2>Desktop Application</h2>
          <i class="fa-solid fa-desktop fa-4x"></i>
          <p class="lead">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam iusto, pariatur sint
            culpa vero impedit ex tenetur doloremque, nihil corrupti, amet soluta? Earum, quidem
            culpa.
          </p>
        </div>
      </div>
    </div>
    <!-- Services Section Close -->

Guys, you need to use CSS to manage the Services box inside your website, So I’m going to share with you the CSS code on below. You can check it now.

/* Services start */
#services h3{
    width: 100%;
    border-bottom: 0.5px solid #ddd;;
}

#services h3 span{
    background: #ddd;
    padding: 10px 22px;
    color: #333;
    text-align: center;
    display: inline-block;
}

#services .box{
    float: left;
    width: 33.33%;
    padding: 45px;
    text-align: center;
    margin: 30px 0px;
}

.bg-primary{
    background: #265ede;
    color: #fff;
}

.light-gray{
    background: #ddd;
}

#services h2{
    margin-bottom: 25px;
}
/* Services close */

Guys, we have more than two sections left, So, Let’s how to make an author section. In the author section, you will learn many new things that help you to improve your coding skills.

So, I’m going to share with you the HTML-based code that you can use inside the HTML file. but before using HTML code you need to use div and assign the class clr. After the services HTML code, you need to add that.

 <div class="clr"></div>

Then you need to go to your style.css page and paste below mentioned simple code.

.clr{
    clear: both;
}

Guys, once done, your site is ready to display every section on a web page very well, without using those codes, your sections don’t appear perfect on your website, because we’ve used float property inside the project.

Let’s check it author code on the HTML page.

<!-- Authors -->
    <div id="authors">
      <div class="container">
        <h3><span>Authors</span></h3>
        <div class="auth">
          <img src="./img/Authors/person1.png" alt="" />
          <p class="names">John Doe</p>
          <p>Admin</p>
          <p class="lead">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem aut quod, earum
            quaerat eveniet doloribus quasi nam est illo reiciendis fugiat sit blanditiis omnis
            cumque quos error temporibus quisquam eligendi?
          </p>
        </div>
        <div class="auth">
          <img src="./img/Authors/person4.png" alt="" />
          <p class="names">Suzi</p>
          <p>Manager</p>
          <p class="lead">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem aut quod, earum
            quaerat eveniet doloribus quasi nam est illo reiciendis fugiat sit blanditiis omnis
            cumque quos error temporibus quisquam eligendi?
          </p>
        </div>
        <div class="auth">
          <img src="./img/Authors/person3.png" alt="" />
          <p class="names">Jason</p>
          <p>Accountant</p>
          <p class="lead">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem aut quod, earum
            quaerat eveniet doloribus quasi nam est illo reiciendis fugiat sit blanditiis omnis
            cumque quos error temporibus quisquam eligendi?
          </p>
        </div>
      </div>
    </div>
    <!-- Author Close -->

So, let’s check it CSS code to display the author boxes in the same line with the accurate size of each box.

/* Author */
#authors h3{
    width: 100%;
    border-bottom: 0.5px solid #ddd;;
 }

 #authors h3 span{
    background: #ddd;
    padding: 10px 22px;
    color: #333;
    text-align: center;
    display: inline-block;
 }

#authors{
    background: url('../img/img.jpg') no-repeat center;
    height: 600px;
    padding-top: 40px ;

 }

.auth{
    float: left;
    height: 500px;
    width: 33%;
    color: #fff;
    padding: 20px;
    text-align: center;
    margin: 20px 01px;
}

.auth img{
    border-radius: 50%;
}

.names{
    font-weight: bold;
    font-size: 18px;
}
/* Author Close */

Hope you are understood each code that I’ve mentioned below, Let’s talk about the final steps inside our website. So, First of All, you need to add the contact form HTML code inside the HTML file.

 <!-- Contact -->
    <div id="contact">
      <div class="container">
        <h3><span>Contact Us</span></h3>
        <div class="contact-form">
          <form action="process.php">
            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" name="name" />
            </div>
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" name="name" />
            </div>
            <div class="form-group">
              <label for="message">Message</label>
              <textarea name="message" id="message" cols="30" rows="10"></textarea>
            </div>
            <button type="button" class="btn">Submit</button>
          </form>
        </div>
      </div>
    </div>
    <!-- Contact Close -->

Then you need to use CSS to design your contact form and also we need to manage it inside the website, So Let’s check it now with the CSS code below.

/* Contact Us */
#contact h3{
    width: 100%;
    border-bottom: 0.5px solid #ddd;;
    margin-bottom: 35px;
}

#contact h3 span{
    background: #ddd;
    padding: 10px 22px;
    color: #333;
    text-align: center;
    display: inline-block;
}

#contact .form-group{
    margin-bottom: 20px;
}

.contact-form label{
    display: block;
    margin-bottom: 5px;
}

.contact-form input{
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
}

#contact textarea{
    height: 200px;
    width: 100%;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline: none;
    border-color: #265ede;
}
/* Contact Close */

In the final step you need to add the footer section inside the footer section, you need to add some contact or you can say that text and then you need to align it with help of CSS.

 <footer id="main-footer">
      <div class="container">
        <p>
          The Hub of Technology Design by
          <a href="https://onlineittuts.com"> OnlineITtuts </a> &copy 2022
        </p>
      </div>
    </footer>

Here is the CSS code that manages your footer content.

/* Footer */
#main-footer{
    background: #265ede;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
    color:#fff;
}

That’s guys, we’ve learned How to Make a Website Using HTML and CSS. hope this tutorial is helpful and beneficial for you. If you need the complete source code of this project, you can get it below.

Download Source Code

How to Make a Website Responsive for all Devices

Guys, I’ve made a tutorial on How to Make a Website Responsive For All Devices, you can watch the complete tutorial, and inside the tutorial, you will learn step-by-step usage of media query to make a responsive website.

Before watching the tutorial, you must have a basic knowledge of HTML and CSS3, then you will understand everything that is explained inside the tutorial.

Conclusion

In conclusion, making a website is not as difficult as it may seem at first. With a little bit of HTML and CSS knowledge, you can create a beautiful and functional website for yourself or your business.

You May Also Like:

Use the tips and resources in this article to get started, and don’t be afraid to experiment with different designs and features until you find something that you like. With a little effort, you’ll be able to understand How to Make a Website Using HTML and CSS that you can be proud of.

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.