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 >w3wiki</ 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 w3wiki </ 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 w3wiki </ 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 w3wiki </ 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 w3wiki </ 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:
Create a Blog Website Layout using HTML and CSS
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.