Create a Blog Website Layout using HTML and CSS
Last Updated : 31 Jul, 2024
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:
HTML <!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:
Similar Reads
How to Create a Website Using HTML and CSS? Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu
5 min read
Bootcamp Website Template using HTML and CSS We will explore how to design a simple BootCamp website template using HTML and CSS. Creating an attractive template can be challenging for those who are not proficient in CSS. Without CSS, enhancing the visual appeal of a web page is difficult. Therefore, to create a compelling web page, knowledge
6 min read
Create a Split layout template using HTML and CSS In this article, we will design a Split Layout Template that provides a responsive HTML and CSS webpage layout with a split-screen design, accommodating content in distinct left and right sections. The layout adapts to different screen sizes and features contrasting colors and subtle hover effects f
2 min read
How to create a Blog Archive using HTML and CSS? In this article, we will see the process for creating a simple yet effective blog archive using HTML and CSS. A Blog Archive is a crucial feature for any blog website, as it provides an organized way for users. One essential element for any blog or content-driven website is a blog archive. A blog ar
6 min read
Create a Tiles Layout Template using HTML and CSS In this article, we will create a responsive Tiles layout template using HTML and CSS by structuring the HTML with headers, main content, and a footer. Utilize flexbox for a dynamic tiles container with individual tiles styled for responsiveness and hover effects.Tiles Layout refers to a web design
2 min read