Scribd
Upload
4 views3 pages

Web Blog HTML Css

The document provides instructions for creating a beginner-friendly blog website using only HTML and CSS, emphasizing the use of semantic HTML elements. It includes a sample structure for the index.html file and a style.css file for basic styling. The website features a header, navigation, main content with blog articles, and a footer.

Uploaded by

elumalaishaun
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views3 pages

Web Blog HTML Css

The document provides instructions for creating a beginner-friendly blog website using only HTML and CSS, emphasizing the use of semantic HTML elements. It includes a sample structure for the index.html file and a style.css file for basic styling. The website features a header, navigation, main content with blog articles, and a footer.

Uploaded by

elumalaishaun
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

WEB APPLICATION DEVELOPMENT

Beginner-Friendly Blog Website using HTML & CSS

Instructions:

Create a simple blog website using only HTML and CSS. Use semantic HTML elements. No
JavaScript or frameworks should be used.
[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Simple Blog</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<header>
<h1>My Blog</h1>
<p>Sharing thoughts and ideas</p>
</header>

<nav>
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>

<main>
<article>
<h2>My First Blog Post</h2>
<p class="date">Posted on September 10, 2025</p>
<p>
This is my first blog post. Blogging helps share knowledge, ideas,
and experiences with people around the world.
</p>
</article>

<article>
<h2>Why I Like Web Development</h2>
<p class="date">Posted on September 12, 2025</p>
<p>
Web development allows me to create websites using HTML and CSS.
It is creative, logical, and fun to learn.
</p>
</article>
</main>

<footer>
<p>© 2025 My Blog. All rights reserved.</p>
</footer>

</body>
</html>
[Link]

body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}

nav {
background-color: #555;
padding: 10px;
text-align: center;
}

nav a {
color: white;
margin: 10px;
text-decoration: none;
font-weight: bold;
}

nav a:hover {
text-decoration: underline;
}

main {
padding: 20px;
}

article {
background-color: white;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
}

.date {
color: gray;
font-size: 14px;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}

You might also like