DEV Community

Cover image for How to Create a Landing Page with HTML and CSS
iribama
iribama

Posted on

How to Create a Landing Page with HTML and CSS

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.

VS Code Interface

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.

Website Example

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>       
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Result:

HTML text

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">
Enter fullscreen mode Exit fullscreen mode

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 {
}
Enter fullscreen mode Exit fullscreen mode

This was used in the styling of the sample website, although in a peculiar fashion.

vscode html document In this case, it was embedded in the HTML document.

 <h1>Welcome to The Little Bookshop!</h1>
                <img src="shelves.jpg" alt="Bookstore"> 
                <h2>
Enter fullscreen mode Exit fullscreen mode

This led to the landing page having the image of a bookstore as the background image.
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;
}
Enter fullscreen mode Exit fullscreen mode

Styling the image;

img{
    width:1250px; height:450px; object-fit:cover;
}
Enter fullscreen mode Exit fullscreen mode

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;

}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

The results of the feedback form:

feedback form
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;



Enter fullscreen mode Exit fullscreen mode

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!

Latest comments (3)

Collapse
 
ilyamarkin profile image
Ilya Markin

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.

Collapse
 
msiame1 profile image
msiame1

Excellent step by step layout. Thank you

Collapse
 
rejoice profile image
iribama

I'm glad it helped you. You're welcome.