Search The Hostwinds Guides Knowledge Base

How to create a custom landing page using HTML and CSS

Share This Article

In this guide, you will learn how to create the basic ‘under construction’ landing page below using HTML and CSS.

In order to create a landing page, you will need to have a text editor, either the one provided in your cPanel file manager, Notepad++ or any text editor of your choice will work fine to follow along in this guide.  If you are using a control panel such as cPanel you will add these files to either your public_html directory or the document root for your domain name. If you are not using a control panel you would most likely add these files to your /var/www/html  although the location of your domain’s document root may vary.

Creating Your Site File

Let’s start by creating an index.html file and open it in your text editor.

why index?
The way Apache is set up, in your domain folder (or public_html) it reads your DirectoryIndex such as index.htm, index.html or index.php if these files exist and serve this file as the homepage of your folder. If there is not one of these files then it will show an index listing. You can change your directory index through your .htaccess file

Your HTML is essentially the structure of your website page, so you will need to make sure it’s set up properly.

For this example you will need to  identify the HTML script, header, and the body, you can do this by using the following  “tags”

Tags are how we identify different elements in our HTML document and will generally come in pairs. Most tags will have a start<>  and an end</> , some tags will not have the second tag and will end with a />  this is called an ’empty element’, mainly seen on links and images

The head  Tag

This is where you would store the data that is not content, such as site metadata, the document title, character set, inline styles, and scripts links,  and other meta information. We will use two different tags in our head section:

<title>  – This tag will change what is displayed in the tab

<link>  – this is where you would attach any external style or scripts, we will be using this to add a stylesheet to our website

The body  Tag

This is where your site content will go, If we wanted to we would be able to add test directly.  For example, if we add “Hello World!”  in our HTML, it will look like this:

Here is what the web page will look like after adding this code and visiting your domain name with your browser:

Next, let’s connect the stylesheet in your HTML. As we mentioned above, you can attach a stylesheet by adding linking your stylesheet in the head  your HTML document. After you are done, it should look like this:

Add Containers And Content

To help better organize your content you can use tags to specify different objects such as containers, images, headers, etc. you will call these different tags in later in your stylesheet.

For this example, I will be using a div container as well as the <h1>  and <p>  tags

Here is what the web page will look like before we add in the stylesheet:

Adding Style to Your Site

Create and edit your stylesheet ‘css.css’

Now, let’s create a .css file, this should match the file name you above so our example is css.css. In your stylesheet, you can call of the different elements that you labeled via tags in your HTML document.

In this example, we have 4 different elements we are calling: body , div , h1 , and p . Below, we can see how you can use these tags to change the background, center it and change the sizing of the text. We will also demonstrate how to add a text shadow to help with clarity.

Here is our CSS.css file:

There are a lot of different attributes you can add through your stylesheet,  in this article we just covered a few basic options.

Many different properties require a slightly different structure depending on what its changing

Test your site

Now you can check out your new landing page! If you haven’t already pointed your domain to your hosting, you can use a testing site such as hosts.cx or your Dedicated IP address to view your site.

Related Articles: