Are you looking to create a landing page or website? Well, look no further. In this guide we’re going to be using HTML, and CSS. However, we do include no-code options near the end of this guide as well. Feel free to keep those in mind if you don’t feel like learning how to code.
Before we continue, we assume you have very little to no knowledge of how to create a landing page in HTML. If you do, then you’ll likely be able to skip most of this guide and download a template we provide. With that being said, let’s dive into the guide.
While we do try to explain HTML and how it works briefly in this guide. For the best results, we highly recommend that you read books or videos about HTML & CSS itself. One of our favorite books to learn from is HTML and CSS: Design and Build Websites by Jon Duckett. If you’re a visual learner then I recommend Codecademy or Treehouse. However, you can also learn by building which is what I personally find the most helpful.
HTML is the basic building blocks of a website. It uses markup to display text, images, videos, and more. A website is made up of special elements such as a body, div, p tag, and many others. Let’s start off by making a basic landing page with a call to action. Inside Visual Studio Code, I’m going to make a project with the following structure.
index.html
▼ assets
▼ css
- index.css
► imgs
► js
You’ll want to open and begin editing index.html . You’ll paste in the following code snippet which creates a basic structure to work off of for our website.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Landing Page</title> </head> <body> </body> </html>
From here on out the rest of the code will be inside the opening and closing body tags. For example, we will create a heading element that says “Discover the leading guide for Cryptocurrency”. This will be done by using a h1 tag.
... <body> <h1>Discover the leading guide for Cryptocurrency</h1> </body> </html>
If we are to save changes and then open index.html in our browser we will be presented with the following.
Pretty simple so far, right? We just created a title. Let’s go ahead and add a paragraph below the title and then a link with a call to action to download our eBook through a content locker.
... <body> <h1>Discover the leading guide for Cryptocurrency</h1> <p>The top guide for earning with cryptocurrency. Covering crypto collectibles (NFTs) and day trading.</p> <a href="https://unlockcontent.net/cl/i/vo58pd">Download</a> </body> </html>
If we save changes and view the page in our browser it will look like the following.
Now, let’s add one more element. In this case, it will be an image. Inside the folder assets/imgs add an image you would like to display. In our case, this will be an SVG file called book.svg.
... <img src="/assets/imgs/book.svg" alt="cryptocurrency ebook"> ...
The src for the image represents the file path. Then alt describes what the image is, you’ll want to describe your image yourself. Once you save the changes and look at your browser it should look something like this.
We are done with the basics for our hero section of the website. Now, this is great that we got it working but it doesn’t look great… This is because HTML is solely used for the structure of a website and its content. In order to style the website we need to use something called CSS.
CSS also known as Cascading Style Sheets describes how elements should be rendered on the screen, on paper, in speech, or in other media such as images or videos. Typically when making a website you use plain CSS or something called a framework. Some examples of frameworks are listed below. You’re able to use any of these frameworks or vanilla CSS but we want to give some examples of each one and the advantages.
CSS can be done by inline styling by adding style to an element, or you can create a file and import it. For our landing page as an example, we are going to edit index.css which is located under assets/css. We can import it by adding the following line inside the opening and closing head tags.
<link href="assets/css/index.css" rel="stylesheet" />
Right now because this file is empty nothing will change. Inside the CSS file add a class selector with the name .my-button and the following styles.
.my-button {
padding: 10px 25px;
background-color: rgb(236, 77, 29);
color: white;
border-radius: 2px;
text-decoration: none;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 1.24px;
}
If we save changes and check our landing page we can see still nothing has changed. This is because we need to apply the selector to an element. In our case, we want to apply this to the anchor tag with the text “Download”. We do this by changing the anchor tag to the following.
<a class="my-button" href="https://unlockcontent.net/cl/i/vo58pd">Download</a>
If we save changes and go back to the page you’ll see the following.
Excellent! The anchor tag has styling and now looks like a button which when we click on it will take us to our content locker. You can continue writing the styling from scratch. However, this can be time-consuming and requires a lot more knowledge. If you’re wanting to continue coding things from scratch you can find more information on CSS here. Want to save time and have ready-made components? This is where a CSS framework comes in.
Bootstrap is one of the most popular frameworks for developing responsive, mobile-first projects on the web. This is how we’re going to create the rest of our landing page.
To start, let’s undo everything we did previously via CSS. Then we will go to the Bootstrap website and find the introduction settings under the docs located here. You’ll add the stylesheet link and then the included script tags. Your code will end up looking like the following.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Landing Page</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <h1>Discover the leading guide for Cryptocurrency</h1> <p>The top guide for earning with cryptocurrency. Covering crypto collectibles (NFTs) and day trading.</p> <a href="https://unlockcontent.net/cl/i/vo58pd">Download</a> <img src="/assets/imgs/book.svg" alt="cryptocurrency ebook"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html>
If you save changes and go back to the landing page you’ll see the following.
It almost looks exactly the same as it did before we applied any styling! Let’s see the power of bootstrap now. On our link, we will apply the class btn and btn-primary and then save changes and view the landing page.
Awesome! Did you notice how easy that was? We don’t have to manually create the CSS styling for the button. We just apply the classes to an element and Bootstrap takes care of the CSS. We can find more of the components available on the docs for Bootstrap. You can find a full example of this landing page CryptoStacks created with Bootstrap on GitHub.
Some other alternatives are Tailwind and Bulma. Our personal favourite is Tailwind and it was used to build the OGAds website. It’s a utility-first framework and you’ll have to build the components yourself. Bulma on the other hand is a modern CSS framework based on Flexbox. It includes ready-to-use components that you can easily combine to build a website in record time.
Don’t want to build a website by hand but still want the output to be in HTML? No problem. One tool you can use for this is Mobirise. You’re able to download the software on Mac and Windows and then export the website as HTML including your assets. This is a handy way to make a website that you can still upload onto shared hosting or manually make changes in HTML if necessary.
Don’t care if the website is made with solely HTML? Look at WordPress and the theme Kadence with the Kadence Blocks plugin. This is also a drag-and-drop builder that enables you to build websites or landing pages in record time.
We hope this guide on how to create a landing page in HTML was helpful! You’ll need to spend the time being creative when making your own site. Along the journey, you will need to learn CSS, HTML, and possibly a framework. It all depends on how you want to make your landing page. If you’re ready for the next step we highly recommend the series how to make a website on our learning platform. This includes instructions on how to host a website that was made with HTML.