Welcome to a template design tutorial, here we will learn how to create a one page website from scratch. It will help you to understand the basics of template design, and will clear your basics on Html and CSS as well. If you are not familiar with Html or CSS, then some knowledge or learn along with this tutorial.
Look at the above picture, this is a web page which we will learn in our template design tutorial. Let’s divide our work into parts so that we could understand it more clearly.
Steps in Template Design
Step1 – What is in our mind?
We will first layout what we want to do?, and then will see how to implement in our template design.
- We need a rough layout to go for it.
- We will divide it into parts to understand the coding work.
Step2 – What we will require for template design or website design?
- Simple text editor
- Header image, footer image and content.
- Html knowledge
- CSS knowledge
Step3 -How we will implement it
- Html code
- CSS code
Step4 –Your template design is ready
- View and we are done
- Source code
- Tutorial (ask for it)
Let us start with the first step, and it is a rough layout design, because we need to implement what we have planned, for that we have to make rough sketch or design to go solid.
Step1
Look at the picture below and tell me, did you get a rough idea on how we will plan our work?, if not then I am here to explain you in more detail. If you could see the image, then see numbers and value associated with them. In our template design we will put everything intact to make it perfect design. Let’s see what we have at the numbers:
- At 1– We have header, and it is important for web design. Search in the google, you will get results where you will see the header part in every website.
- At 2 – Here we will see menu item, which will help a visitor to understand the entry ways. Like in the menu, we will have, home, sharplesson, buy it, and about us.
- At 3 – We will put heading for our content which will work as a eye catcher for visitors
- At 4 – Paragraphs or can say content for our heading.
- At 5 – Footer part at the end, and see we are done with our tutorial
Now with each moving paragraph we will fill the blanks and will see the final result then.
Now we will see what is there in a step 2, It is a simple check for the requirement, we already mentioned and need not to elaborate, that’s what we will require for this content and do move step by step with us. Because practice is something you cannot ignore, so are you ready?
Step 3 – Coding for Html and CSS
Let us start step 3, this part is very important for beginner, so don’t miss anything. This step will have more sub steps and may be sub-steps will have parts as well.
Part 1
Let’s see how many container we need? If you could see the rough layout, then you will see we have header, menu, heading, content, and footer. It means, we require one big container to have a small container for header, menu, content (it will have both heading and content) and footer.
<html> <head> </head> <body> <div id = “container”> <div id=”header”> </div> <div id=”navigation”> </div> <div id=”content”> </div> <div id=”footer”> </div> </div> </body> </html>
Let’s call it Html code layout, and step by step we will fill in the blanks. This is the important part in our template design tutorial, and just practice along with me. We will start with header part as it will come first in a web page, header is used for logo or bold Text name.
Header
Header is an important part of a template design, It will catch your visitor’s eye. We will use h1 element to highlight our SharpLesson, and that’s it. Just put the code in Html code layout, and we are done with header part.
<div id=”header”> <h1> SharpLesson – Learn and Earn</h1> </div>
Navigation or Menu
Now let’s move to the navigation container of our template design, we will fill Navigation container with a simple code, and you can put the same code in the html code layout.
<div id=”navigation”> <ul> <li> <a href=”#”> Home</a></li> <li> <a href=”#”> About</a></li> <li> <a href=”#”> SharpLesson</a></li> <li> <a href=”#”> Buy it</a></li> </ul> </div>
If you do not know <div>, <ul>, <a> , and <li> then check it first. Don’t move ahead without checking it, else you will mess up in complex design.
Let’s understand the code in steps:
- We have created a menu item with the use of ul and li.
- We used anchor element to make it hyperlink.
- Now closed the div container and you are done.
Content
We are at important part of the template design, and it is called content. It should be well organized and a eye catcher for a visitor. Our website template doesn’t have a complex design, so we will create a simple code for it and will place it in the Html code layout.
<div id=”content” > <h2> Learn Template design </h2> <p> Here, we will learn about basics of html and how we will create web page template. Let’s learn template design tutorial and see how easy it is to do design and earn from the same. You want more practice? Then do get this solution at just $15 dollor. You will get 5 website template design and that to with ease. But before that just learn this free tutorial, because we believe easy education and a way for it. </p> </div>
If you don’t know what is <p> or <h2> element, then clear your basics first else it will bother you later. Now let us see what the code says:
- We use <div> as a container, which will have a code for content part.
- H2 elements have our Content heading.
- <p> used to handle our paragraph.
Footer
It is our last part, and we are done with coding for html and will check the result. Again, put the code in html code layout and complete the Html coding.
<div id=”footer”> Copyright© SharpLesson, 2022 </div>
Now let us understand the code in short.
- We use <div> element as a container for a footer.
- Added simple copyright text there.
Now it’s time to check the result, and let us see our first result.
Hey, wait a minute, we did not get our expected result, and why it happened so? You have any idea? Well check our code, can you see any extra code for image, style or color? Then how you will get a web page with this template design?
To give your template design a proper look like we shown above, we will use CSS to decorate our content and get the final result. Let’s create a code for containers and its element one by one and do check result as well.
Part 2 – CSS Code for Template design
To make coding easier, we will first create a CSS code layout, and we will fill the blanks with relevant codes. Now in this part of template design, we will create a CSS code for containers and their elements. To understand the container and its uses, let’s take a practical example:
You have gone to a shopping and bought fruits, vegetables and dress from different shops and vendors gave you a carry bag for relevant products. Now you want to put fruits, vegetables and dress in a one large carry bag so that it will be easy for you to reach home.
Small carrier bags are a small container and a big carry bag is a main container, in which we will arrange our small containers. Now, I hope things are clear regarding the use of a container in our html template design.
CSS code Layout for template design
Let’s create a CSS code layout and we will fill it step by step.
#container
{
}
#header
{
}
#header h1 { }
#navigation
{
}
#navigation ul
{
}
#navigation ul li
{
}
#navigation li a
{
}
#navigation li a:hover { }
#content
{
}
#footer
{
}
Let’s talk about the code for CSS in detail and place it in the appropriate CSS code.
CSS code for Main container
For main container, we need not to do anything special, just set the margin, width for the container and background color.
#container
{
margin: auto;
width: 700px;
background:#FFFFFF;
}
Now just fill in the blanks, put this code in CSS code layout.
CSS code for Header
Here we will set the background color for header, which is black and will set padding for the same.
#header
{
background:#000000;
padding: 20px;
}
CSS code for H1
Now we will set a code for our heading in a header part, remember? No worries go and see the website template, a very first picture in this tutorial.
#header h1 {
margin: 0;
color: #FFFFFF;
}
We set the margin to zero and color to a white, because our header background is black. Now put this code in the CSS code layout, and you are done with heading part. If you want to test your template design, then do it.
CSS code for Navigation
Here we will give style to a navigation part, but we will do in different steps. Now what we will do is, we will set the background color for the menu, width for the menu, and will float it to left.
Outline the Menu
#navigation
{
float: left;
width: 700px;
background:#DCDCDC;
}
Put the above code in CSS code layout.
Let’s remove the margin and padding from the navigation area and a simple code is:
#navigation ul
{
margin: 0;
padding: 0;
}
Put this code in the same empty CSS code layout.
Style the menu items
In this part of template design, we will give a look to a menu item like home, about, sharplesson and buy it. We want it in a simple horizontal line and without any bullets or marking. That is why we have set the list-style-type to none and display to inline.
#navigation ul li
{
list-style-type: none;
display: inline;
}
Decorate your Anchor
The next CSS code is for the anchor tag, we will use display, float, padding, color, text-decoration and border-right to style our tag.
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #00008B;
text-decoration: none;
border-right: 1px solid #FFFAFA;
}
Below is the one line CSS code for a mouse hover, if you will put mouse cursor to any of the menu item. It will change the background of that menu item.
#navigation li a:hover { background :#B8860B;}
CSS code for Content
This area will cover the code for the content of our page, and we will not do anything to it. Just use clear and padding, and if you are not familiar with it then refer CSS Tutorial.
#content
{
clear: left;
padding: 20px;
}
CSS code for Footer
This is the last section of our template design tutorial, and we will style our footer for the web page. Here we will color the footer, align text to a left, padding and will set the height for that footer.
#footer
{
background:#DCDCDC;
text-align: left;
padding: 20px;
height: 1%;
}
Step 4 – Now, we are done with our template design, and we will test our result. Hey, what did you get? Well, I got the result, which we want. If you want a source code, then write to us: info@sharplesson.com or like us and download it.
Conclusion
We have learned how to design a template with ease. If you want to learn more complex template design, then get your solution.
If you enjoyed our content, then like us or share with others on your network. We believe sharing is humanity, and we are doing the same.