Welcome to Doolot’s complete guide to creating your first simple web page with HTML and CSS. If you’re a beginner in web design, this tutorial will introduce you to the core concepts of building a well-structured and visually appealing web page. By the end, you’ll have a solid understanding of how to use HTML to structure content and CSS to style and layout your page, all while making it responsive for different screen sizes.
In this tutorial, we’ll use a CSS grid layout to arrange content in a clean and organized manner. Grid layouts are essential for creating modern, responsive websites as they allow you to define rows and columns that adjust to different screen sizes. Alongside the grid, we’ll cover other web design elements, including responsive design, HTML structure, CSS styling, and basic navigation.
Key Elements in Our Tutorial
- HTML Basics – Understanding HTML is fundamental to web design. We’ll cover essential HTML tags and structure.
- CSS Styling – Learn to use CSS properties for styling text, backgrounds, and borders.
- CSS Grid Layout – Set up a responsive grid layout that adapts seamlessly to mobile, tablet, and desktop screens.
- Header, Sidebar, and Footer – Structure your page with headers, footers, and sidebars for an organized and professional look.
- Responsive Design – Make sure your page looks great on all devices by using CSS to adjust layouts for different screen sizes.
This web design guide is ideal for beginners and offers everything you need to create a simple, structured, and visually engaging web page.
source codes:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title> 1st website </title>
<style type=”text/css”>
body{
font-family: sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid-container{
height: 100vh;
width: 90%;
margin: 0 auto;
gap:10px;
display: grid;
grid-template-areas:
‘header header header’
‘nav nav nav’
‘sidebar container container’
‘footer footer footer’;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto auto 1fr auto;
}
img{
width:300px;
height:auto;
}
header{
grid-area: header;
background-color:#4CAF50 ;
color: white;
text-align: right;
padding: 0px 15px;
font-size: 24px;
}
nav{
grid-area: nav;
background-color: #4caf50;
padding: 0 15px;
text-align: left;
display: ruby;
}
h1{
padding: 10px;
background-color: white;
color: #135d08;
border-radius: 15px;
}
.container {
grid-area: container;
background-color: #ffffff;
padding: 15px;
}
.sidebar {
grid-area: sidebar;
background-color: #f4f4f4;
padding: 15px;
}
footer{
grid-area: footer;
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
}
nav, .container, .sidebar {
border: 1px solid #ddd;
}
nav ul li{
text-decoration: none;
display: inline-grid;
}
nav ul li a{
display: block;
text-decoration: none;
padding: 10px;
background-color: #135d08;
color: white;
border-radius: 10px;
}
nav ul li a:hover{
background-color: white;
color: #135d08;
}
</style>
</head>
<body>
<div class=”grid-container”>
<header>
Hoteline: 01234567890
</header>
<nav>
<h1> Website name </h1>
<ul>
<li> <a href=”#”> Home </a> </li>
<li> <a href=”#”> About </a> </li>
<li> <a href=”#”> services </a> </li>
<li> <a href=”#”> Contact </a> </li>
</ul>
</nav>
<aside class=”sidebar”>
<h2>Sidebar</h2>
<p> This is the sidebar. You can put links, ads, or other additional information here. </p>
</aside>
<div class=”container”>
<h2>Main Content</h2>
<p> This is the main content area. You can place your articles, blog posts, or other important information here. </p>
<img src=”image.jpg”>
</div>
<footer> Footer information </footer>
</div>
</body>
</html>
Video:
https://www.youtube.com/watch?v=DhYiccDEz-Y
