7

Create a Blog Website Layout using HTML and CSS

 9 months ago
source link: https://www.geeksforgeeks.org/create-a-blog-website-layout-using-html-and-css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Create a Blog Website Layout using HTML and CSS

Discuss
Courses

The Blog layout consists of a header, navigation menu, main content area, and footer. The header contains the website logo, name, and its tagline. The navigation menu is used to allow users to easily navigate through the different sections of the blog. The main content area contains the list of blog posts with title, author name, published date, and content. Also, there is an archive section, that contains recently published articles list. The footer section contains additional information such as links to the blog’s social media profiles and a copyright notice.

Create a Blog Website Layout

In this article, we will create a simple blog website layout using HTML and CSS. HTML creates the structure of the blog website, and CSS adds styles to make the UI better.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #ffffff;
color: #000000;
text-align: center;
}
nav {
background-color: #242424;
padding: 10px;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
margin-right: 10px;
display: inline-block;
}
.container {
display: flex;
justify-content: space-between;
max-width: 95%;
margin: 0 auto;
padding: 20px;
}
article p {
text-align: justify;
}
main {
flex: 2;
}
article {
margin-bottom: 20px;
padding: 10px 20px;
border: 1px solid rgb(145, 145, 145);
margin-right: 10px;
}
aside {
flex: 1;
background-color: #c9c9c9;
padding: 10px;
}
footer {
background-color: #242424;
color: #fff;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
<title>Blogging Website Layout</title>
</head>
<body>
<header>
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">ReactJS</a>
</nav>
<div class="container">
<main>
<article>
<h2>HTML</h2>
<p class="post-meta">
Published on December 11, 2023 by GeeksforGeeks
</p>
<p>
HTML stands for HyperText Markup Language. It is 
used to design the web pages. With the help of HTML, 
you can create a complete website structure. HTML 
is the combination of Hypertext and Markup language.
Hypertext defines the link between the web pages 
and markup language defines the text document within 
the tag that define the structure of web pages.
</p>
</article>
<article>
<h2>CSS</h2>
<p class="post-meta">
Published on December 10, 2023 by GeeksforGeeks
</p>
<p>
CSS (Cascading Style Sheets) is used to styles web 
pages. Cascading Style Sheets are fondly referred 
to as CSS. The reason for using this is to simplify 
the process of making web pages presentable. It allows 
you to apply styles on web pages. More importantly, 
it enables you to do this independently of the HTML 
that makes up each web page.
</p>
</article>
<article>
<h2>JavaScript</h2>
<p class="post-meta">
Published on December 09, 2023 by GeeksforGeeks
</p>
<p>
JavaScript (JS) is the most popular lightweight, 
interpreted compiled programming language. It can 
be used for both Client-side as well as Server-side 
developments. JavaScript also known as a scripting 
language for web pages. This JavaScript Tutorial is 
designed to help both beginners and experienced 
professionals master the fundamentals of JavaScript 
and unleash their creativity to build powerful web 
applications. From basic syntax and data types to 
advanced topics such as object-oriented programming 
and DOM manipulation.
</p>
</article>
<article>
<h2>ReactJS</h2>
<p class="post-meta">
Published on December 08, 2023 by GeeksforGeeks
</p>
<p>
ReactJS is a declarative, efficient, and flexible 
JavaScript library for building user interfaces. 
It is an open-source, component-based front-end 
library that is responsible only for the view layer 
of the application. ReactJS is not a framework, it 
is just a library developed by Facebook to solve 
some problems that we were facing earlier.
</p>
</article>
</main>
<aside>
<h2>Recent Posts</h2>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">ReactJS</a></li>
</ul>
</aside>
</div>
<footer>
<p>© 2023 Your Blog Name. All rights reserved.</p>
</footer>
</body>
</html>

Output:

blog-layout
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!
Last Updated : 13 Dec, 2023
Like Article
Save Article

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK