How to create a simple Blog website using HTML and CSS only
This article is all about front end designing of a blog website using HTML and CSS. Here I’ll explain about creating the main page of the blog with blog posts preview, and how a blog page looks like. Then we will create a blog post page template, using which we can add our blog posts and link them with main page. This is for novice web developers and not for advanced web designers.
Let’s start setting up the environment. We can use any editor like Notepad, Notepad++, Visual Studio Code, Sublime Text, Atom etc… and any browser of latest version is needed to view the output.
As a bonus I’ll also explain about hosting website using github.
Now we will start coding our index.html
We will start with the header part of the website.
<html>
<head>
<title>My-Blog</title>
<link rel="icon" href="https://image.flaticon.com/icons/svg/13/13706.svg" type="image/gif" sizes="16x16">
<link rel="stylesheet" href="main.css" ><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css"></head><body><div class="intro"><p id="name" name="intro">Hello Friends Welcome to my Food Blog Site</p></div></body>
</html>
Here we have just added a title, favicon for the browser tab and linked the css stylesheet and the favicon. Then we have added an image and a tag line or a welcome message which reperesents the theme of our blog.
Next we will add the blog previews as a card component alligned in columns, which will have an image,title and a short description about the blog posts. Importantly this part will link the blog posts to our main page , the image here is the link to the main post.
<div>
<br>
<center>
<h1>My Blog Posts</h1>
</center>
<br>
</div>
<div class="blogs">
<div class="column">
<div class="card">
<a href="post1.html">
<img src="https://www.indianhealthyrecipes.com/wp- content/uploads/2019/02/chicken-biryani-recipe-500x500.jpg" alt="image" height="300" width="400"/></a>
<h3>Heading</h3>
<p>Some text</p>
</div>
</div><div class="column"><div class="card"><img src="https://www.indianhealthyrecipes.com/wp-content/uploads/2019/02/chicken-biryani-recipe-500x500.jpg" alt="image" height="300" width="400"/><h3>Heading</h3><p>Some text</p></div></div><div class="column"><div class="card"><img src="https://www.indianhealthyrecipes.com/wp-content/uploads/2019/02/chicken-biryani-recipe-500x500.jpg" alt="image" height="300" width="400"/><h3>Heading</h3><p>Some text</p></div></div></div><div class="blogs"><div class="column"><div class="card"><img src="" height="300" width="400"/><h3>Heading</h3><p>Some text</p></div></div><div class="column"><div class="card"><img src="" height="300" width="400"/><h3>Heading</h3><p>Some text</p></div></div><div class="column"><div class="card"><img src="" height="300" width="400"/><h3>Heading</h3><p>Some text</p></div></div></div>
Next we will add the About part, which will explain about author (You). We will add an image and some description about the author.
<div><center><h1>About Me</h1><div><img src="https://images.unsplash.com/photo-1577219491135-ce391730fb2c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="MY pic" height="400" width="400" id="mypic"></div></center><br><p id="about">I am a Foodie...</p><br></div>
We have reached the end of the main page and finally we are going to code the footer part which contains copyrights details and contact information
<footer><center><div><p>Copyright © 2020 All Rights Reserved by Your Name </p><p>Contact me by</p><a href="#" class="fa fa-facebook"></a><a href="#" class="fa fa-instagram"></a></div></center></footer>
Don’t worry about the CSS styles, in my next post I have given the styles and the template for the blog posts. Hope all who read this , understood the code. Will see in my next post
