Photo by Sincerely Media on Unsplash
Creating a simple blog website using basic knowledge of html and css
Table of contents
No headings in the article.
To get rid of the overwhelming feeling of not doing enough, I've decided to curate an article weekly, explaining in detail what new thing i discovered, realised or learnt in the course of my study for the week.
This week I worked on my personal blog, putting into use basic knowledge of html and css.
INDEX.HTML
HTML means Hypertext Markup Language and it is the standard markup language for creating Web pages.
It describes the structure of a web page and tells the browser how to display the content.
Every html should begin with a <!DOCTYPE html> declaration which basically defines that this document is an HTML5 (fifth and final major HTML version) document.
Let's break this down into three section; The head, the body and the footer.
THE HEAD
In this section we have The "head" element, which is a container for metadata (data about data) and it is placed between the "html" tag and the "body" tag.
Metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width", initial-scale="1.0" />
<title>Didi's Blog</title>
<link href="./resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="/resources/images/favicon.ico" type="image/gif" sizes="16x16">
</head>
The "header" element represents a container for introductory content or a set of navigational links.
A "header" element typically contains:
- one or more heading elements ("h1" - "h6")
- logo or icon
- authorship information
<header>
<h1> Didi's Blog</h1>
<nav id="navbar">
<ul>
<li><a href="http://twitter.com/didimukhtar" class="fa fa-twitter"></a></li>
<li><a href="http://instagram.com/didimukhtar" class="fa fa-instagram"></a></li>
<li><a href="http://github.com/didimukhtar" class="fa fa-github"></a></li>
<li><a href="http://linkedin.com/in/jamilat-al-mukhtar-b0a2551b5" class="fa fa-linkedin"></a></li>
</ul>
</nav>
</header>
The Body
The "body" tag defines the document's body. The "body" element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<body>
<section class="about">
<div class="container">
<img src="resources/images/pexels-sebastian-arie-voortman-189349.jpg" height=”400” width=”400” alt=”Sunset”/>
<p>Welcome to Didi's blog,<br> Come explore with me</p>
<div>
<br>
<h1>My Blog Posts</h1>
<br>
</div>
<div class="blogs">
<div class="column">
<div class="card">
<a href="index.html">
<img src="" alt="image" height="300" width="400"/></a>
<h3>Blog title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia provident voluptatem.</p>
</div>
</div>
<div class="column">
<div class="card">
<img src="" alt="image" height="300" width="400"/>
<h3>Blog title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia provident voluptatem.</p>
</div>
</div>
<div class="column">
<div class="card">
<img src="" alt="image" height="300" width="400"/>
<h3>Blog title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia provident voluptatem.</p>
</div>
</div>
<div class="column">
<div class="card">
<img src="" alt="image" height="300" width="400"/>
<h3>Blog title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia provident voluptatem.</p>
</div>
</div>
<div class="column">
<div class="card">
<img src="" alt="image" height="300" width="400"/>
<h3>Blog title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia provident voluptatem.</p>
</div>
</div>
<div class="column">
<div class="card">
<img src="" alt="image" height="300" width="400"/>
<h3>Blog title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia provident voluptatem.</p>
</div>
</div>
</div>
<div>
<br>
<h1>About Me</h1>
<br>
<img src="resources/images/Didi.JPG" height=”400” width=”400” alt="MY pic" id="mypic">
<p id="about">Hello! I'm Jamila Ladidi Al-Mukhtar <br> In time, i'll give you a view of all i've learnt so far! </p>
</div>
<br>
<blockquote>In the words of Maya Angelou, "I love to see a young girl go out and grab the world by the lapels.<br>
Life's a bitch, You have to go out and kick ass."</blockquote>
The footer
The "footer" tag defines a footer for a document or section.
A "footer" element typically contains:
- authorship information
- copyright information
- contact information
- sitemap
- back to top links
- related documents
<footer>
<p>Copyright © 2022 All Rights Reserved by Didi Mukhtar</p>
<p>Contact me on my <a href="#navbar">socials</a></p>
</footer>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
NOTE:
> 1. The footer tag is used within the body tag.
> 2. Below the "footer" elements are closing tags of "div" elements in the body.
> 3. "Html" closing tag signify the end of the html document.
INDEX.CSS
CSS means Cascading styles sheet.
It is the language we use to style an HTML document.
It also describes how HTML elements should be displayed
* {
box-sizing: border-box;
}
h1 {
color: brown;
text-align: center;
font-family: 'Papyrus','Times New Roman';
font-size: 20px;
padding-top: 10px;
}
header {
background-color: antiquewhite;
width: auto;
height: 70px;
padding: 0.8em 0;
box-shadow: 2px 2px 10px #f1f6f9;
}
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
#navbar {
position: fixed;
top: 0px;
left: 0px;
width: 130px;
height: 45%;
background-color: antiquewhite;
padding: 0.8em 0;
box-shadow: 2px 2px 10px #f1f6f9;
}
nav ul {
display: flex;
list-style-type: none;
justify-content: space-between;
flex-direction: column;
}
nav li {
float: right;
padding: 30px;
}
#about{
text-align: center;
font-size: large;
}
.blogs{
margin-top: 5px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
background-color: #f1f1f1;
overflow: auto;
}
.column {
float: left;
width: 33%;
padding: 5px 5px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
}
.blog:after {
content: "";
display: table;
clear: both;
}
h2 {
text-align: center;
margin-left: 50px;
font-family: papyrus;
color: brown;
margin-bottom: 20px;
padding-top: 20px;
}
p {
font-size: 14px;
font-family: 'Times New Roman';
text-align: center;
color: gray;
font-weight: bold;
}
img {
padding-top: 10px;
height: 600px;
width: 800px;
padding-left: 250px;
}
blockquote {
background-color: antiquewhite;
text-align: center;
height: 300px;
width: 400px;
padding: 60px 40px 95px 50px;
margin-left: 400px;
font-family: papyrus;
font-size: 24px;
}
footer {
background-color: antiquewhite;
height: 70px;
text-align: center;
padding-top: 5px;
}
#mypic{
border-radius: 50%;
margin-bottom: 30px;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
img{
height:auto;
width: auto;
}
}
SUMMARY
During the course of curating this blog i learnt the following:
- How to create a fonticon.
- How to work in sections.
- Media query
- Importance of a framework.
- The major bug i encountered was a margin collapse between two div containers. The solution to this is to set the overflow property of either of the divs involved to auto.
i.e
overflow: auto;
- Lastly, the research that goes into writing an article is most informative.
To view blog website kindly visit: Didi's Blog
Thanks for reading.
Feel free to send in any corrections.
I'm totally up for learning.