Well, you have been learning HTML and CSS for many days. But its time to move on and have a simple project on it.
It’s very essential to do multiple types of projects regularly. It can help you to get better depth of the languages and inspire you to do more jobs.
After leaning simple basic of the HTML and CSS, now you need to move for a simple project.
So, We have a simple project from you with all the Codes.
But try to do it at first at your own. It will help you to understand better about your knowledge.
We are going to create a simple website called example.com.
It’s an example site from google. It does not do any jobs. But google refers to it when they need to provide some hyperlink.
Hope you have done it on your own.
But if not then try these code and find where you need to improve on your code.
Step 1: Create a folder anywhere on your machine
Step 2: Create 2 files name index.html and style.css [You can choose any name]
Step 3: Paste This HTML code in index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Example Domain</title>
<link rel="stylesheet" href="style.css"> /* External CSS */
</head>
<body>
<div class="exampleBody">
<h1>example domain</h1>
<p>This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.</p>
<p><a href="#">More information...</a> </p>
</div>
</body>
</html>
Step 4: Paste This CSS code in style.css
body{
background-color: #F0F0F2
}
h1{
text-transform: capitalize;
font-family: "open sans", sans-serif;
}
a{
text-decoration: none;
color: #38488f
}
.exampleBody{
background-color: white;
max-width: 600px;
margin: 80px auto;
padding: 50px;
border-radius: 16px
}
p{
font-family: "helvetica", sans-serif;
}Step 5: Open the index.html file
It’s done.
It is one of the easiest HTML and CSS project. But its for very beginner.
If you want to watch it on a video the check the video bellow
