How To Make Website Using HTML & CSS

Hello Friends, today in this blog you’ll learn how to make website using HTML & CSS.

Using only HTML & CSS we can easily create very attractive websites if you have some basic knowledge of HTML & CSS and know some CSS concepts like CSS Flexbox, CSS Grid then you can easily create awesome wesites & landing pages using only HTML & CSS.

Video Tutorial of How To Make Website Using Only HTML & CSS

In the video you’ve seen that we create a simple website using only HTML & CSS. simply we add a navigation menu bar, some text, a button, social media icons and 2 images…1st is background image & a featured image. Styling all the content using CSS Grid…so if you know about CSS Grid then to create this type of landing page is not a big deal.

So, enjoy the tutorial & learn something new today 🙂

How To Make Simple Website [ SOURCE CODE ]

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!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">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>How To Make a Simple Website Using HTML & CSS</title>
</head>
<body>
    <div class="container">
        <div class="nav-bar">
            <img src="Images/logo.png" class="logo">
            <h3>Coding Master</h3>
            <nav>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </nav>
            <button class="btn">Subscribe Now</button>
        </div>
        <div class="content">
            <h1>Learn <br> Programming</h1>
            <h4>Level Up Your Skills...</h4>
            <p>We Provide Quality Content On Web Development For Free.<br> Join Us Now And Start Your Journey As a Web Developer <br> And Get Your Dream Job.
            </p>
            <div class="content2">
                <button class="btn2">Join Us</button>
                <div class="social-media">
                    <a href=""><i class="fa fa-facebook"></i></a>
                    <a href=""><i class="fa fa-instagram"></i></a>
                    <a href=""><i class="fa fa-twitter"></i></a>
                    <a href=""><i class="fa fa-youtube"></i></a>
                    <a href=""><i class="fa fa-github"></i></a>
                </div>
            </div>
        </div>
        <img src="Images/1.png" class="image">
    </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

<!-- wp:code -->
<pre class="wp-block-code"><code class="">* {
    margin: 0;
    padding: 0;
}
.container {
    height: 100vh;
    width: 100%;
    background-image: url(Images/background.png);
    background-position: center;
    background-size: cover;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
    position: relative;
}
.nav-bar {
    width: 100%;
    height: 15vh;
    margin: auto;
    display: flex;
    align-items: center;
}
.logo {
    width: 100px;
    cursor: pointer;
}
h3 {
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 600;
    color: #378de5;
}
nav {
    flex: 1;
    padding-left: 350px;
}
nav ul li {
    display: inline-block;
    list-style: none;
    margin: 0 20px;
}
nav ul li a {
    text-decoration: none;
    color: #1b1b1b;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
}
nav ul li a:hover {
    border-bottom: 1px solid #378de5;
    width: 25px;
    color: #378de5;
    height: 0.18px;
    transition: border-bottom .3s;
}
.btn {
    box-shadow: inset 0px 1px 0 0 #bbdaf7;
    text-transform: uppercase;
    background: linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
    border-radius: 30px;
    border: 1px solid #84bbf3;
    cursor: pointer;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 700;
    padding: 12px 19px;
    text-decoration: none;
    box-shadow: 1px 4px 12px rgba(94,28,68,.15);
    text-shadow: 0px 1px 0px #528ecc;
}
.btn:hover {
    box-shadow: 3px 8px 22px rgba(94,28,68,.15);
    transform: scale(1.1);
    transition: .2s ease-in-out;
}

 /* CONTENT */

 h1 {
     font-family: 'Poppins', sans-serif;
     text-transform: uppercase;
     font-weight: 700;
     margin-top: 40px;
     letter-spacing: .1em;
     font-size: 53px;
     color: #1641cf;
 }

 h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 800;
    margin-top: 10px;
    letter-spacing: .2em;
    color: #65aaee;
 }
 p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .1em;
    margin-top: 50px;
    color: #378de5;
 }
 .content2 {
     display: flex;
     align-items: center;
 }
 .btn2 {
     background-image: linear-gradient(to right, #1a2980 0%, #26d0ce 51%, #1a2980 100%);
     margin-top: 80px;
     padding: 15px 45px;
     text-align: center;
     transition: .5s;
     border: none;
     outline: none; 
     text-transform: uppercase;
     color: #fff;
     font-family: 'Poppins', sans-serif;
     cursor: pointer;
     font-weight: 700;
     font-size: 22px;
     display: block;
     border-radius: 30px;
     background-size: 200% auto;
     box-shadow: 3px 8px 22px rgba(94,28,68,.15);
}
.btn2:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}
.social-media {
    font-family: 'Poppins', sans-serif;
    margin-top: 80px;
    margin-left: 50px;
    text-decoration: none;
    font-size: 27px;
}
.fa {
    color: #378de5;
    padding: 5px;
}
.fa:hover {
    transform: scale(1.2);
    color: #1b1b1b;
    transition: .5s;
}
.image {
    height: 90%;
    position: absolute;
    width: 58%;
    bottom: 0;
    right: 0;
}</code></pre>
<!-- /wp:code -->

DOWNLOAD SOURCE CODE FILES