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.
