Hello Reader, in this article you will learn how to create your own website using HTML and CSS. The website I am going to share with you in this article is about new modern web design. Earlier in this website I have shared post that how to create a portfolio website with HTML and CSS.
If you want to create a website, you are at right place I have create professional website for your business. This is the easiest website builder for small business. Get your website for business to boost your income. Also always choose and create website domain unique and different to attract visitor from all over the world.
Building a modern website using HTML and CSS is an essential skill for anyone interested in best easy website builder. With the help of these two technologies, you can create beautiful, responsive, and user-friendly websites that work well on different devices and browsers.
How to create own website tutorial
In the below tutorial, I have create own website for business using HTML and CSS. Create a modern website like this, watch this tutorial and do practice
In this blog, we’ll discuss some essential steps you can follow to build a modern website using HTML and CSS.
- Step 1: Plan your website
- Step 2: Create the HTML structure
- Step 3: Style your website with CSS
- Step 4: Make your website responsive
Step 1: Plan your website
Before you start coding, it’s essential to plan your website’s structure and content. You can use a pen and paper or a digital tool like a wire framing app to create a site map and layout.
Decide on the number of pages you want, the hierarchy of content, and the navigation structure. Consider the design elements you want to incorporate, such as colours, typography, and images.
Step 2: Create the HTML structure
Once you have a plan, you can start building the HTML structure of your website. HTML stands for Hypertext Markup Language and is the backbone of the web. It’s used to define the structure and content of your website.
To get started, create an HTML file and define the basic structure of your website using HTML tags. The basic structure includes the head, title, and body tags. Inside the body tag, you can start adding content using various HTML tags, such as headings, paragraphs, images, and links.
Step 3: Style your website with CSS
CSS stands for Cascading Style Sheets and is used to style the HTML structure. CSS allows you to control the look and feel of your website, including the colors, typography, layout, and responsiveness.
To style your website, you need to create a separate CSS file and link it to your HTML file. Inside the CSS file, you can define various styles for different HTML elements, such as font styles, colours, margins, and padding.
You can use CSS frameworks like Bootstrap or Materialize to get started quickly. These frameworks provide pre-built CSS styles and components that you can use to style your website.
Step 4: Make your website responsive
With the increasing use of mobile devices, it’s essential to make your website responsive. A responsive website adapts to different screen sizes and resolutions, ensuring that your website looks good on any device.
To make your website responsive, you can use media queries in your CSS file. Media queries allow you to define different styles for different screen sizes. You can also use a responsive framework like Bootstrap or Foundation to create a responsive website quickly.
Source code
If you like this website design, then feel free to use it. Copy the code by clicking on Copy button provided below. First, you have to create two files. One of them is HTML, and the other is CSS after creating these files, paste the code provided below.
HTML 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>Modern Web UI Design | By Code Info</title>
<link rel="stylesheet" href="style.css">
<!-- Font Awesome Cdn Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<header class="header">
<div class="header_logo">
<a href="#">Developer</a>
</div>
<div class="menu_list">
<a href="#">Designing</a>
<a class="active" href="#">Courses</a>
<a href="#">Pakages</a>
<a href="#">Github</a>
</div>
<div class="header_profile">
<div class="profile">
<h3>Code Info</h3>
<img src="./pic/logo.jpg" alt="">
</div>
</div>
</header>
<!-- Mian Body Section -->
<div class="main_body">
<div class="container">
<div class="cover">
<img src="./pic/t1.jpg" alt="">
</div>
<div class="main_details">
<div class="c_title">
<h2>Web Development Course</h2>
<span>Price: <b>$300</b></span>
</div>
</div>
<div class="course_outline">
<div class="course">
<i class="fab fa-html5"></i>
<h5>html & css</h5>
</div>
<div class="course">
<i class="fab fa-js-square"></i>
<h5>javascript</h5>
</div>
<div class="course">
<i class="fab fa-react"></i>
<h5>react.js</h5>
</div>
<div class="course">
<i class="fab fa-node"></i>
<h5>node.js</h5>
</div>
<div class="course">
<i class="fas fa-code"></i>
<h5>.net</h5>
</div>
</div>
<div class="description">
<h5>Description</h5>
<div class="des_para">
<p>Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. <br> <br> Web developers create and maintain websites. They are also responsible for the site's technical aspects, such as its performance and capacity, which are measures of a website's speed and how much traffic the site can handle. In addition, web developers may create content for the site</p>
<img src="./pic/img3.jpg" alt="">
</div>
</div>
<div class="buttons">
<button class="btn1">Enrol Now</button>
<button class="btn2"> <i class="fas fa-heart"></i>Add to favourite</button>
</div>
</div>
<!-- Sidebar Reviews Section -->
<div class="sidebar">
<div class="row">
<h2>Reviews</h2>
<a href="#">See all</a>
</div>
<div class="review">
<div class="details">
<div class="logo">
<img src="./pic/img1.jpg" alt="">
</div>
<div class="title">
<h2>Smith David</h2>
<span>1 day ago</span>
</div>
</div>
<div class="review_post">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore harum vero consectetur expedita numquam accusantium necessitatibus. Sit accusantium nobis assumenda.</p>
</div>
</div>
<div class="review">
<div class="details">
<div class="logo">
<img src="./pic/img2.jpg" alt="">
</div>
<div class="title">
<h2>Elyana Gomiz</h2>
<span>1 day ago</span>
</div>
</div>
<div class="review_post">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore harum vero consectetur expedita numquam accusantium necessitatibus. Sit accusantium nobis assumenda.</p>
</div>
</div>
<div class="review">
<div class="details">
<div class="logo">
<img src="./pic/img3.jpg" alt="">
</div>
<div class="title">
<h2>Sam Jhon</h2>
<span>1 day ago</span>
</div>
</div>
<div class="review_post">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore harum vero consectetur expedita numquam accusantium necessitatibus. Sit accusantium nobis assumenda.</p>
</div>
</div>
<div class="review">
<div class="details">
<div class="logo">
<img src="./pic/img4.jpg" alt="">
</div>
<div class="title">
<h2>Salina David</h2>
<span>1 day ago</span>
</div>
</div>
<div class="review_post">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore harum vero consectetur expedita numquam accusantium necessitatibus. Sit accusantium nobis assumenda.</p>
</div>
</div>
<div class="review">
<div class="details">
<div class="logo">
<img src="./pic/img1.jpg" alt="">
</div>
<div class="title">
<h2>Smith David</h2>
<span>1 day ago</span>
</div>
</div>
<div class="review_post">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore harum vero consectetur expedita numquam accusantium necessitatibus. Sit accusantium nobis assumenda.</p>
</div>
</div>
<div class="review">
<div class="details">
<div class="logo">
<img src="./pic/img2.jpg" alt="">
</div>
<div class="title">
<h2>Elyana Gomiz</h2>
<span>1 day ago</span>
</div>
</div>
<div class="review_post">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore harum vero consectetur expedita numquam accusantium necessitatibus. Sit accusantium nobis assumenda.</p>
</div>
</div>
</div>
</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 have to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.header{
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
padding: 15px;
}
.header_logo{
display: flex;
align-items: center;
margin-left: 2rem;
}
.header_logo a{
color: #000;
font-size: 1.3rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
}
.menu_list a{
margin: 2rem;
font-weight: 500;
color: rgb(87, 86, 86);
text-decoration: none;
}
.active{
color: #000 !important;
font-weight: 700 !important;
}
.profile{
width: 170px;
display: flex;
cursor: pointer;
align-items: center;
border-radius: 120px;
border: 1px solid rgb(209, 209, 209);
}
.profile img{
width: 40px;
position: relative;
left: 8px;
border-radius: 50%;
}
.profile h3{
margin: 0 15px;
color: #b9068c;
}
/* Main Body Section */
.main_body{
height: calc(100vh - 70px);
display: flex;
overflow: hidden;
}
.container{
width: 100%;
height: 100%;
padding: 25px;
overflow-y: scroll;
border-top: 1px solid #ddd;
background: #f9f9f9;
}
.cover img{
width: 100%;
border-radius: 10px;
}
.main_details{
padding: 10px;
}
.main_details .c_title{
display: flex;
align-items: center;
justify-content: space-between;
}
.c_title span{
color: #000;
font-size: 14px;
}
.course_outline{
display: flex;
margin-top: 1rem;
padding: 10px 4rem;
align-items: center;
justify-content: space-between;
}
.course{
display: flex;
align-items: center;
text-transform: uppercase;
}
.course i{
padding: 10px;
font-size: 16px;
color: #b9068c;
border-radius: 50%;
margin-right: 1.2rem;
background: rgb(238, 153, 212);
}
.description{
margin-top: 20px;
}
.description h5{
font-size: 16px;
margin-bottom: 10px;
}
.description .des_para{
display: flex;
justify-content: space-between;
}
.des_para p{
color: rgb(119, 119, 119);
}
.des_para img{
width: 200px;
border-radius: 10px;
}
.buttons{
display: flex;
}
.buttons .btn1{
width: 200px;
background: #c71616;
margin-right: 10px;
color: #fff;
border-radius: 8px;
cursor: pointer;
padding: 10px;
}
.buttons .btn2{
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
}
.btn2 i{
margin-right: 10px;
}
/* Side Review bar */
.sidebar{
width: 400px;
height: 100%;
padding: 15px;
overflow-y: scroll;
border-top-left-radius: 15px;
background: rgb(219, 219, 219);
}
.sidebar::-webkit-scrollbar, .container::-webkit-scrollbar{
display: none;
}
.row{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.3rem;
}
.row h2{
font-size: 20px;
}
.row a{
font-size: 12px;
text-decoration: none;
color: rgb(96, 96, 96);
}
.review{
width: 100%;
padding: 10px;
background: #fff;
border-radius: 10px;
margin-bottom: 12px;
}
.review .details{
display: flex;
}
.details .logo img{
height: 40px;
width: 40px;
border-radius: 10px;
margin-right: 10px;
}
.details .title{
display: flex;
flex-direction: column;
}
.details .title h2{
font-size: 14px;
line-height: 18px;
margin-bottom: 4px;
}
.details .title span{
font-size: 11px;
color: rgb(96, 96, 96);
}
.review_post{
margin-top: 10px;
}
.review_post p{
font-size: 11px;
word-spacing: 3px;
color: rgb(119, 119, 119);
}
I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.
