Creating a personal blogging website from scratch might seem daunting at first, but with a basic understanding of HTML and CSS, you can design a blog that is not only visually appealing but also easy to navigate. In this guide, we will walk through the process of building a simple, yet elegant personal blog using HTML for structure and CSS for style.
Demo Link Here : https://reeteshghimire.com.np/blog/
Follow this video for complete guidance :
Step 1: Structuring Your Website with HTML
The foundation of your blog lies in how well the structure is defined in HTML. Let’s start by breaking down two core pages for your personal blog: the homepage (index.html) and a detailed post page (detail.html).
index.html
This is the homepage of your blog, where all your blog posts are listed. It’s simple and clean, allowing visitors to quickly view and access individual posts.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Personal Blog</title> <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" /> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="header py-3"> <h1 class="logo text-center">Ritesh's Blog</h1> </div> <div class="container mt-5"> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-6"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/silence.jpg" class="w-100" alt=""> <div class="title"> The Language of Silence: What Words Don’t Say </div> </figure> </div> </a> </div> <div class="col-md-6"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/moments.jpg" class="w-100" alt=""> <div class="title"> Moments that Matter </div> </figure> </div> </a> </div> <div class="col-md-6"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/the-life.jpg" class="w-100" alt=""> <div class="title"> Life in Bits and Pieces </div> </figure> </div> </a> </div> <div class="col-md-6"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/silence.jpg" class="w-100" alt=""> <div class="title"> The Language of Silence: What Words Don’t Say </div> </figure> </div> </a> </div> <div class="col-md-6"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/moments.jpg" class="w-100" alt=""> <div class="title"> Moments that Matter </div> </figure> </div> </a> </div> <div class="col-md-6"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/the-life.jpg" class="w-100" alt=""> <div class="title"> Life in Bits and Pieces </div> </figure> </div> </a> </div> <div class="col-md-6"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/silence.jpg" class="w-100" alt=""> <div class="title"> The Language of Silence: What Words Don’t Say </div> </figure> </div> </a> </div> <div class="col-md-6"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/moments.jpg" class="w-100" alt=""> <div class="title"> Moments that Matter </div> </figure> </div> </a> </div> <div class="col-md-6"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/the-life.jpg" class="w-100" alt=""> <div class="title"> Life in Bits and Pieces </div> </figure> </div> </a> </div> </div> </div> <div class="col-md-4"> <div class="card py-4 sticky"> <div class="profile text-center p-4"> <img width="150" class="rounded-circle" src="https://youthsforum.com/ritesh1.png"> <h3 class="mt-3">Ritesh Ghimire</h3> <p>Tech-driven, sports-inspired. Engineer, traveler, player, writer—coding, playing, traveling, opining. A life of exploration and expression in technology and sports.</p> <hr> <ul class="social-list align-items-center justify-content-center list-unstyled d-flex"> <li class="facebook"> <a href="https://facebook.com/reeteshjee" target="_blank"> <i class="fab fa-facebook-f"></i> </a> </li> <li class="twitter"> <a href="https://twitter.com/reeteshjee" target="_blank"> <i class="fab fa-twitter"></i> </a> </li> <li class="instagram"> <a href="https://instagram.com/reeteshjee" target="_blank"> <i class="fab fa-instagram"></i> </a> </li> <li class="linkedin"> <a href="https://linkedin.com/in/reeteshjee" target="_blank"> <i class="fab fa-linkedin"></i> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="footer text-center py-4"> <span>© Ritesh Ghimire 2024</span> </div> </body> </html>
This HTML is simple yet functional. The header section welcomes visitors with a title and a short description. The main section houses blog posts listed under blog-list, with each blog post represented by an article tag. Each post includes a title, a snippet, and a link to its full content.
detail.html
This page presents the full content of an individual blog post when a user clicks on one from the homepage.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Personal Blog</title> <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" /> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="header py-3"> <h1 class="logo text-center">Ritesh's Blog</h1> </div> <div class="container my-5"> <div class="card p-3 mb-4"> <h1 class="text-center mb-4">Moments That Matter</h1> <div class="story"> <div class="frame"> <img src="https://reeteshghimire.com.np/blog/uploads/moments.jpg"> </div> <p>Life, when you break it down, is composed of countless fleeting moments—some we forget, others that shape us forever. It’s easy to get lost in the ordinary, in the routine of daily life. But every so often, we encounter a moment that stands out, that lingers in our hearts and minds long after it has passed. These moments, though brief, carry immense meaning. They shape who we are and who we become.</p> <p>Some moments are loud and obvious. The birth of a child, a wedding day, or a graduation ceremony—these are life’s milestones. They are filled with joy and celebration, and we mark them in grand ways. Photographs are taken, speeches are made, and memories are cemented in the company of loved ones. These are the moments people expect to be important. We anticipate them, sometimes plan for them for years. They’re the moments that make up the highlight reels of our lives.</p> <p>But not all meaningful moments come with fanfare. Some sneak up on us in quiet, subtle ways, often in the most unexpected places. It could be the moment you pause on a walk to watch the sunset, the sky painted in hues of gold and pink, and feel a sudden sense of peace. It’s the moment a stranger offers a kind word when you’re having a tough day, restoring your faith in humanity. Or perhaps it’s the quiet evening when you sit with a loved one in comfortable silence, feeling the depth of connection without needing to speak.</p> <p>These quieter moments can be just as transformative as the loud, celebratory ones. They remind us of the beauty in simplicity, in just being present. The world moves fast, and it's easy to overlook the significance of these smaller instances. Yet, when we slow down and pay attention, we realize that these are the moments that often leave the deepest imprints on our hearts.</p> <p>In many ways, life is like a mosaic—a collection of small, seemingly unimportant pieces that come together to create something beautiful. Each moment, no matter how insignificant it may feel at the time, contributes to the larger picture of who we are. Even the hard moments—the ones filled with pain, loss, or confusion—hold their own kind of value. They teach us lessons, build our resilience, and make us appreciate the moments of joy and peace that follow.</p> <p>Think back to a moment that has stayed with you. Maybe it’s a conversation you had with a friend years ago, one that shifted your perspective. Or perhaps it’s a brief encounter that left a lasting impression. These moments don’t just happen by chance. They are part of the intricate web of human experience, shaping our thoughts, feelings, and choices.</p> <p>What makes these moments so powerful is their ability to evoke emotion. They make us feel alive, connected, and part of something bigger than ourselves. Whether it's the rush of love you feel when holding someone close, the sense of accomplishment after reaching a personal goal, or the quiet contentment of a peaceful afternoon, these moments remind us of what it means to truly live.</p> <p>Of course, not all moments are happy or comfortable. But even in the midst of struggle, we find moments that matter. A hand extended in friendship, a word of encouragement, or the realization that we have the strength to keep going—these moments remind us of our resilience. They give us hope, even when the path ahead seems uncertain.</p> </div> </div> <div class="card p-3"> <h4>More Blogs</h4> <hr> <div class="row"> <div class="col-md-4"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/moments.jpg" class="w-100" alt=""> <div class="title"> Moments that Matter </div> </figure> </div> </a> </div> <div class="col-md-4"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/moments.jpg" class="w-100" alt=""> <div class="title"> Moments that Matter </div> </figure> </div> </a> </div> <div class="col-md-4"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/moments.jpg" class="w-100" alt=""> <div class="title"> Moments that Matter </div> </figure> </div> </a> </div> <div class="col-md-4"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/moments.jpg" class="w-100" alt=""> <div class="title"> Moments that Matter </div> </figure> </div> </a> </div> <div class="col-md-4"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/moments.jpg" class="w-100" alt=""> <div class="title"> Moments that Matter </div> </figure> </div> </a> </div> <div class="col-md-4"> <a href="detail.html"> <div class="box"> <figure> <img src="https://reeteshghimire.com.np/blog/uploads/moments.jpg" class="w-100" alt=""> <div class="title"> Moments that Matter </div> </figure> </div> </a> </div> </div> </div> </div> <div class="footer text-center py-4"> <span>© Ritesh Ghimire 2024</span> </div> </body> </html>
In the detail.html file, the header still retains the blog title but shifts focus to the specific post’s title and publication date. The main section, this time, houses the full article, letting readers dive deep into your content.
Step 2: Styling Your Blog with CSS
Now that the structure is set, let’s give your blog a clean and beautiful look with some CSS.
style.css
*{
font-family: Barlow Condensed,sans-serif;
}
body{
background: #f2f2f2;
}
.container{
max-width: 1000px;
}
.header{
background: #fff;
border-bottom: 1px solid #ddd;
}
.header .logo{
font-size: 3em;
font-weight: bold;
letter-spacing: 4px;
font-family: cursive,sans-serif;
}
figure{
height: 220px;
overflow: hidden;
background: red;
position: relative;
border-radius: 10px;
}
figure .title{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 10;
color:#fff;
padding: 10px 20px;
font-size: 20px;
}
.box{
margin-bottom: 30px;
}
.box figure::after{
content:'';
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%);
cursor: pointer;
}
figure img{
height:100%;
width:100%;
object-fit: cover;
transition: .5s ease-in;
}
figure:hover img{
transform: scale(1.1);
}
.social-list li{
margin-right:10px;
}
.social-list li a{
color:#fff;
display: block;
padding: 10px 20px;
font-size: 18px;
}
.social-list li.facebook{
background: #39599f;
}
.social-list li.instagram{
background: #e1306c;
}
.social-list li.twitter{
background: #55acee;
}
.social-list li.linkedin{
background: #0a66c2;
}
.sticky{
position: sticky;
top:2rem;
}
.footer{
background: #fff;
font-size: 20px;
}
.frame img{
width: 100%;
height: 100%;
object-fit: cover;
}
.frame{
width:44%;
height: 280px;
display: inline-block;
float: left;
margin-right: 20px;
}
.story{
font-size: 20px;
}
@media (max-width: 575px) {
.frame{
width: 100%;
height: unset;
margin-right: 0;
float: none;
display: block;
margin-bottom:10px;
}
}
This stylesheet keeps the design clean and minimal, focusing on simplicity:
- The header is styled with a dark background and white text, ensuring it stands out.
- The blog posts on the homepage have a card-like design, using border-radius and box-shadow to create a subtle depth effect.
- Ample padding and margins ensure enough white space, enhancing readability and the overall aesthetic.
- The footer maintains a consistent look across the site, and the link color is matched to the white text for clarity.
By structuring your blog with simple, semantic HTML and styling it with clean CSS, you can create a personal blogging website that looks beautiful and performs smoothly. Remember, the goal is to keep the design minimalistic, letting your content take center stage. With a few custom touches, you’ll have a professional blog that reflects your personal style and keeps your readers engaged.
