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 https://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:

.
├── assets
│   ├── css
│   └── sass
├── images
│   ├── background.jpg
│   ├── favicon.png
│   ├── logo.png
│   └── social.jpg
└── 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.