Setting up a landing page

Introduction

A landing page is just a simple webpage that typically has a background image and some information. Here are some examples to get you started.

• dev.to
• onepagelove.com

Lets use the free template onepagelove.com/download/me as an example page to get up and running.

Working with the example Landing Page

As you might expect the most of the work has been done for you. A live preview shows what the template looks like. If you do not like what you see, keep searching the templates. If you do like what you see ...

• Download the template zip file onto your development machine
• Unzip the zip
• Explore the zip folder

Test access

Now you have access to the zip contents, you can run the contents on your development machine.

• Open the index.html file in your browser

That's it - you now have an example landing page available to customise!

Customizing the template

Most templates follow the same hierarchy. The general layout of html content is as follows:

 1.
 2├── assets
 3│   ├── css
 4│   └── sass
 5├── images
 6│   ├── background.jpg
 7│   ├── favicon.png
 8│   ├── logo.png
 9│   └── social.jpg
10└── index.html

To customize the template, you can replace images or text. If you become familiar with the location of items, it helps to make amendments quickly and easily.