Hello everyone👋!!
In this article, we are going to make a website layout with the use of HTML & CSS only so that anyone who needs can modify and use it as per their preference. This saves a lot of time.🚀
Follow these steps:
Step 1. Create an empty folder in the directory you want and name it "Website Layout Template".
Step 2. Create two files named index.html & style.css.
Step 3. Create a basic layout as given below by writing HTML code in the index.html file.
If you don't know the code, don't worry. You can always look into the code given below:
index.html file code:
<html>
<head>
<title>Website Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="col-1">Nav</nav>
<div class="col-2">
<header>Header</header>
<main class="content">
<article>Article</article>
</main>
<footer>Footer</footer>
</div>
</body>
</html>
"Now it's the time to get your hands dirty with the styling of the layout😄."
Step 4. Now style your page by adding a certain amount of CSS, very basic properties of CSS are required for this as I have explained in my previous blog. If you haven't read it, check it right now: CSS Guide
Well if you don't know how to code, you can take hints from the below code:
style.css file code:
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: row;
margin: 0;
}
.col-1 {
background: #ff7;
flex: 1;
}
.col-2 {
display: flex;
flex-direction: column;
flex: 5;
}
.content {
display: flex;
flex-direction: row;
}
.content > article {
flex: 4;
min-height: 60vh;
}
header, footer {
background: #ff0;
height: 20vh;
}
header, footer, article, nav {
padding: 1em;
}
Step 5. And it's done you will get the output as given below:
Note: You can further modify it by adding background, graphics, images, and content🤗. This was just the basic layout for the website so that you can code with ease and save time. You can always play around with the code and make your website look more good🤩.
⭐Feel free to ask your queries:)
⭐You can also get code on codepen: Get Code
Hope you find this article helpful⭐. If yes, then please share it with your friends too.😇
⭐Connect with me👩💻-
Check out my more articles below.