Landing pages are like the entrance to a website. They’re the first thing you see when you visit a site. They contain important information and links to other pages on the site.
Creating a good landing page is important because it can make visitors want to explore more of your website. In this article, we’ll show you how to make a landing page using HTML and CSS.
We’ll be using Sublime Text, a popular text editor, for this demonstration. Other text editors like Brackets, Notepad ++, and work similarly.
A great landing page has all the info a visitor needs to decide if they want to stay on the site or not. It usually includes:
- The logo
- Title
- Navigation bar with links to other pages
- Forms for visitors to fill out
- Call-to-action buttons to encourage visitors to take action.
Let’s Get Started:
To start creating a website, first, make an HTML file. In your text editor, create a new folder and name it. Then, choose your programming language and type in HTML. Save the file with a .html extension, like index.html.
Don’t forget to save your work (Ctrl+S) to avoid losing progress.
The HTML file should have all the text you want on your website. Start with the heading, which is the first thing visitors see. Make it clear, catchy, and easy to understand. It could be your business name or the main message of your site.
In the text editor, use tags to represent HTML elements and enclose your text within them. For example, use <h1></h1> tags for headings.
Here’s an example from a sample website to show how tags are used:
<h1>Welcome to My Website</h1>
html file:
<!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="basic.css">
<title>JS 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 JS Bookshop!</h1>
<img src="C:\Users\Swarna Khushbu\Desktop\Coding\shelves.png" alt="Bookstore">
<h2>
<p>The JS Bookshop believes in the magic of books, which have the unique ability to transport you to unreachable places.
<br><br>
While our physical stores are spread across various suburbs, we prioritize our online community, ensuring those without access to our stores can still enjoy our offerings.
<br><br>
Feel free to browse our shelves at your leisure; you're bound to discover something that suits your taste.
<br><br>
We care about our customers and their reading preferences. That's why we offer a wide range of books in different genres and by various authors, all at affordable prices!
</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="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<label for="subject">Additional</label>
<textarea id="subject" name="subject" placeholder="Additional" style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</h2>
</div>
</body>
</html>
</head>
</html>The above code represents a basic HTML document for a website called “The Little Bookshop.” Here’s an explanation of the different parts:
<!DOCTYPE html>: This declaration specifies the document type and version of HTML being used (HTML5 in this case).<html>: This tag represents the root element of the HTML document.<head>: This section contains meta-information about the document, such as its title, character set, and links to external resources like stylesheets.<meta charset="UTF-8">: Specifies the character encoding for the document (UTF-8, which supports most characters).<meta http-equiv="X-UA-Compatible" content="IE=edge">: Instructs Internet Explorer to use its latest rendering engine.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the website is responsive and adjusts to different screen sizes.<link rel="stylesheet" href="style.css">: Links an external CSS stylesheet to the HTML document to style the content.<title>The Little Bookshop</title>: Sets the title of the webpage, which is displayed in the browser tab.<body>: This tag contains the main content of the webpage that is visible to users.<div class="nav">: Defines a navigation bar for the website with links to different sections (Home, About Us, Shop, Cart, My Account, Book Reviews, Contact Us).<h1>Welcome to The Little Bookshop!</h1>: Displays a heading at the top of the webpage.<img src="shelves.jpg" alt="Bookstore">: Inserts an image of bookstore shelves with an alt attribute for accessibility.<h2>: Starts a new heading level for the main content of the webpage.<p>: Contains paragraphs of text describing The Little Bookshop’s philosophy and offerings.<div class="container">: Defines a container for the feedback form.<form action>: Starts a form for users to submit feedback.<label>,<input>,<select>,<option>,<textarea>,<submit>: These elements are used to create form fields for users to input their first name, last name, country, and feedback.
Overall, this code sets up the structure and content for a basic webpage for “The Little Bookshop,” including navigation, a welcome message, an image, and a feedback form.
now once you have saved this html file open the webpage(with .html extension) and see how the structure looks like
Output: (It should look like this don’t forget to add your own path to image)
Now Let’s add CSS
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;
}Now Let’s style 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;Now you will only be able to see the output of CSS when you place your css file name in the html file like this below
<link rel="stylesheet" href="style.css">
Now check the output :
CSS Whole Code (in my case basic.css):
/* 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;
Creating a landing page for a website can be challenging if you’re new to coding, but don’t worry, just follow these steps carefully. Begin by outlining your page’s basic layout using HTML, then add style with CSS. You can customize the page to match your vision by drawing inspiration from online resources. Create something incredible!
Leave a Reply