Landing pages can be found on every website on the internet. Learn how to make one for your website with this article!
When a website is opened on the internet, the first interface shown is the landing page. It contains vital information the user needs and links to access other pages owned by the website.
Developers aim to create a website that induces visitor use and attracts organic growth. This can be achieved by building a unique, landing page optimized for a good user experience.
At the end of this article, you should be able to create a landing page with HTML and CSS.
The text editor used for illustration in this article is VS Code. Other text editors and IDEs perform similar tasks. Examples include Bracket, Notepad ++, Sublime Text, and others. This is what a VS Code interface looks like.
An excellent landing page houses the information needed by the internet user to determine if it suits their needs or not. The items that can be found on a landing page include:
the logo
title
the navigation bar that bears links to access other embedded pages
forms to be filled by the site visitors.
and CTAs (call-to-action).
Below is an example that explains the illustration given above.
Why the Need to Start with HTML?
HTML, Hypertext Markup Language, is the bedrock of any website, and so it will provide the website structure. This tutorial will help ease the difficulties of comprehending it.
Getting Started with HTML.
Start by creating an HTML file. This is done by creating a new folder in your text editor and giving it a name of your choice. After that, you are to choose the programming language of your choice.
Type in HTML and Click Enter. This file is to be saved with a name ending with .html. index.html was used here.
Remember to save your file, by using ctrl+S as your work progress may disappear if you don't.
The HTML file should contain all of the raw text needed for the website.
We will start with the heading. It is the first item the website visitor will get to see, so it should be conspicuous, eye-catchy, and easy to understand. This can be the name of your business, the title of a paper, or the overall leading text of the information you wish to divulge.
On the text editor, the HTML elements are represented with tags, and the texts are embedded within them. A glance at this guide from w3 schools will provide more insight on tags in HTML and their uses.
Headings are written in the text editor using the <h1></h1> tags.
This is an example from the sample website illustrating how tags can be used.
<h1>Welcome to The Little Bookshop!</h1>
A quick trick to getting the layout for the document is typing HTML: 5. It supplies the layout of the webpage as shown below.
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>The Little Bookshop!</title>
</head>
<body>
</body>
</html>
The main text is written in the <body>.
The next step to add is the navigation bar. It holds other links that lead the site visitors to other pages hosted on the website. This is included in the body of the page. A navigation bar should look like this in the HTML document.
<div class="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about us">About Us</a></li>
<li><a href="shop">Shop</a></li>
<li><a href="cart">Cart</a></li>
<li><a href="my account">My Account</a></li>
<li><a href="book reviews">Book Reviews</a></li>
<li><a href="contact us">Contact Us</a></li>
</ul>
</div>
The body of the website comes next. This is where the main information to be shared with the site visitors is put in. The illustration used in this article is the website of a bookshop, and so the text will come from there.
<h1>Welcome to The Little Bookshop!</h1>
<img src="shelves.jpg" alt="Bookstore">
<h2>
<p>The Little Bookshop believes in the power of books, and the ability they have to transport
you to places that seem impossible to reach.
<br><br>
Although we have store outlets located in
different surbubs of the country, we pay special attention to our online community that do
not have access to these spaces.
<br><br>
Take your time and scour our shelves, you'll be sure
to find something that is to your liking.
<br><br>
We are deeply interested in the welfare of our
customers, and their literary tastes, which is why we stock up books of all genres and
authors at affordable prices for you!
</p>
For your website, you can add other perks you feel are necessary, like a flash sales tag, discount, or announcement. In the website used, for example, a feedback form was included for the bookshop visitors to drop their comments and feedback, like this.
<div class="container">
<h3>Feedback Form</h3>
<form action>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="First Name">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Last Name">
<label for="country">Country</label>
<select id="country" name="country">
<option value="nigeria">Nigeria</option>
<option value="ghana">Ghana</option>
<option value="rwanda">Rwanda</option>
</select>
<label for="subject">Say Something</label>
<textarea id="subject" name="subject" placeholder="say something" style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
At the end of writing your HTML page, the text should be similar to this.
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>The Little Bookshop</title>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about us">About Us</a></li>
<li><a href="shop">Shop</a></li>
<li><a href="cart">Cart</a></li>
<li><a href="my account">My Account</a></li>
<li><a href="book reviews">Book Reviews</a></li>
<li><a href="contact us">Contact Us</a></li>
</ul>
</div>
<div>
<h1>Welcome to The Little Bookshop!</h1>
<img src="shelves.jpg" alt="Bookstore">
<h2>
<p>The Little Bookshop believes in the power of books, and the ability they have to transport
you to places that seem impossible to reach.
<br><br>
Although we have store outlets located in
different surbubs of the country, we pay special attention to our online community that do
not have access to these spaces.
<br><br>
Take your time and scour our shelves, you'll be sure
to find something that is to your liking.
<br><br>
We are deeply interested in the welfare of our
customers, and their literary tastes, which is why we stock up books of all genres and
authors at affordable prices for you!
</p>
<br><br>
<div class="container">
<h3>Feedback Form</h3>
<form action>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="First Name">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Last Name">
<label for="country">Country</label>
<select id="country" name="country">
<option value="nigeria">Nigeria</option>
<option value="ghana">Ghana</option>
<option value="rwanda">Rwanda</option>
</select>
<label for="subject">Say Something</label>
<textarea id="subject" name="subject" placeholder="say something" style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</h2>
</div>
</body>
</html>
</head>
</html>
Result:
Styling With CSS
Since HTML provides the basic structure of the website, it is imperative to add some style to the page to make it unique and outstanding.
The website used here is that of an online bookshop, so we would style it to look like one.
There are different ways of styling a website: inline CSS, internal CSS, and external CSS.
External CSS has proven over time to be the most efficient as it makes your source code more organized and prevents the site from lagging. As the name implies, it is written on a separate interface from the HTML file, saved as style.css, and contains all the styling for the website. It is added to the HTML file with a link.
<link rel="stylesheet" href="style.css">
It is put in between the <meta name> and the <title> of the document.
The page is styled in segments, from the navigation bar down to the feedback form. Some of the stylings affects the whole document, such as the addition of background color or image.
background-image {
}
This was used in the styling of the sample website, although in a peculiar fashion.
In this case, it was embedded in the HTML document.
<h1>Welcome to The Little Bookshop!</h1>
<img src="shelves.jpg" alt="Bookstore">
<h2>
This led to the landing page having the image of a bookstore as the background image.
Other images can be used to replace this too.
Styling the navbar;
/* Add a black background colour to the navigation bar */
ul {
list-style-type:none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {display: inline;
float: right;
}
a {display: block;
padding: 8px;
color: white;
font-family: Helvetica;
text-align: center;
text-decoration: none;
}
Styling the image;
img{
width:1250px; height:450px; object-fit:cover;
}
Styling the text and body of the landing page;
h1, h3 {
font-family:'Times New Roman';
font-size: 72px;
font-weight: bolder;
text-align: center;
color: darkred;
}
h2 {
text-align: center;
font-size: medium;
font-weight: 100;
font-size: 20px;
}
p {
text-align: left;
font-family: Helvetica;
}
Styling the feedback form;
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Black border */
border-bottom: solid black 2px;
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a black color */
input[type=submit]:hover {
background-color: #010e01;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
The results of the feedback form:
The css.style text should be similar to this:
/* Add a black background colour to the navigation bar */
h1, h3 {
font-family:'Times New Roman';
font-size: 72px;
font-weight: bolder;
text-align: center;
color: darkred;
}
h2 {
text-align: center;
font-size: medium;
font-weight: 100;
font-size: 20px;
}
p {
text-align: left;
font-family: Helvetica;
}
img{
width:1250px; height:450px; object-fit:cover;
}
ul {
list-style-type:none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {display: inline;
float: right;
}
a {display: block;
padding: 8px;
color: white;
font-family: Helvetica;
text-align: center;
text-decoration: none;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Black border */
border-bottom: solid black 2px;
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a black color */
input[type=submit]:hover {
background-color: #010e01;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
Conclusion
Building a landing page for a website can prove to be tricky if you have no coding experience, so be sure to follow the instructions closely.
Start out by creating a draft of what you want with the basic structure of the page using HTMl, then style with CSS.
The page can be tweaked to suit your needs and preferences, by pulling ideas from the various resources on the internet.
Build something amazing!
Top comments (3)
Wow, great post! Very useful! Here is also a good post for beginners "build a landing page". The article has an excellent explanation of the main functions of landing pages and the practice of creating them.
Excellent step by step layout. Thank you
I'm glad it helped you. You're welcome.