Build Your Own Beautiful Landing Page Using Only HTML & CSS (Beginners)

Building a basic static website using just HTML and CSS is a great way to get started with web development. A static website is simply a web page that doesn’t require server-side code or a database. It’s easy to set up, fast to load, and perfect for small businesses, portfolios, or landing pages. In this tutorial, I'll walk you through building a basic static landing page from scratch using HTML and CSS.

This guide will help you create a simple but effective landing page and show you how to properly structure and comment on your code. You can follow along, copy the code, and make your adjustments to suit your specific needs.

Step 1: Structuring Your HTML

Let’s start by setting up the basic structure of your HTML file. This will act as the skeleton of your webpage, defining sections such as the header, hero section, features, and footer. Below is the basic structure of an HTML page, which we’ll later style using CSS.


<!DOCTYPE html> <!-- Declares the document as an HTML5 document -->
<html lang="en"> <!-- Specifies the language of the webpage -->
<head> <!-- Metadata and links to resources like stylesheets go inside the head -->
    <meta charset="UTF-8"> <!-- Sets the character encoding to UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures responsive behavior on mobile devices -->
    <title>Simple Landing Page</title> <!-- Sets the title of the page that appears in the browser tab -->
    <link rel="stylesheet" href="styles.css"> <!-- Links to an external CSS file to style the page -->
</head>
<body> <!-- Body section where visible content on the webpage goes -->

    <!-- Header Section -->
    <header> <!-- This section is the header of the webpage -->
        <nav> <!-- The navigation menu for the site -->
            <h1>Your Business</h1> <!-- Displays the site's name or logo -->
            <ul> <!-- Creates an unordered list of navigation links -->
                <li><a href="#home">Home</a></li> <!-- Link to the home section -->
                <li><a href="#features">Features</a></li> <!-- Link to the features section -->
                <li><a href="#contact">Contact</a></li> <!-- Link to the contact section -->
            </ul>
        </nav>
    </header>

The <head> section contains essential information like the character set and viewport settings. The <body> holds the content visible to users. Here, we added a basic header with a navigation menu using a list of links.

Step 2: Adding the Hero Section

The hero section is usually the first thing visitors see on your page. It should be visually appealing and contain important information about your business. We’ll add a simple banner with a call to action (CTA).


    <!-- Hero Section -->
    <section id="home" class="hero"> <!-- Hero section with a full-page banner -->
        <div class="hero-content"> <!-- Container for the hero section content -->
            <h2>Welcome to Our Website</h2> <!-- Hero heading for the introduction -->
            <p>We provide top-quality services to help your business grow.</p> <!-- Brief description of the site -->
            <a href="#contact" class="cta-button">Get Started</a> <!-- Call-to-action button linking to contact -->
        </div>
    </section>

The hero section is defined by the <section> tag. Inside it, we placed a heading, a short paragraph, and a call-to-action button to encourage users to interact with the site. We'll style this in the next steps.

Step 3: Adding the Features Section

In this section, we highlight the features of the business. It’s a simple three-column layout where each column represents a different feature. Here’s the HTML structure:


    <!-- Features Section -->
    <section id="features"> <!-- Section showcasing the website’s features -->
        <h2>Our Features</h2> <!-- Heading for the features section -->
        <div class="features-container"> <!-- Container to hold feature boxes -->
            <div class="feature"> <!-- Individual feature box -->
                <h3>Feature 1</h3> <!-- Title for feature 1 -->
                <p>High-quality service tailored to your needs.</p> <!-- Description of feature 1 -->
            </div>
            <div class="feature"> <!-- Individual feature box -->
                <h3>Feature 2</h3> <!-- Title for feature 2 -->
                <p>Custom solutions to help you achieve your goals.</p> <!-- Description of feature 2 -->
            </div>
            <div class="feature"> <!-- Individual feature box -->
                <h3>Feature 3</h3> <!-- Title for feature 3 -->
                <p>Affordable pricing to suit any budget.</p> <!-- Description of feature 3 -->
            </div>
        </div>
    </section>

This section is flexible, allowing you to add or remove features as necessary. Each feature is represented by a <div> with a heading and a short paragraph explaining the feature.

Step 4: Adding the Footer

The footer will contain some basic information such as copyright details. This can easily be customized to include social media links or additional navigation items.


    <!-- Footer Section -->
    <footer> <!-- Footer of the webpage -->
        <p>© 2024 Your Business. All rights reserved.</p> <!-- Copyright notice in the footer -->
    </footer>
</body>
</html>

Now that we have the structure in place, let's move on to the styling to make everything look more professional and modern.

Step 5: Adding CSS for Styling

Next, we’ll style the page using CSS. Create a new file called styles.css and add the following CSS code:


/* General Styles */
body { 
    font-family: Arial, sans-serif; /* Sets the font for the entire page */
    margin: 0; /* Removes default margin from the body */
    padding: 0; /* Removes default padding from the body */
    box-sizing: border-box; /* Ensures that padding and borders are included in the element's total width and height */
}

h1, h2, h3 { 
    color: #333; /* Sets the color of headings */
}

p { 
    color: #555; /* Sets the color of paragraph text */
}

ul { 
    list-style: none; /* Removes the bullet points from list items */
    padding: 0; /* Removes default padding from the list */
}

a { 
    text-decoration: none; /* Removes underlining from links */
    color: #007bff; /* Sets the color of links to blue */
}

/* Header Styles */
header { 
    background-color: #333; /* Sets the background color of the header */
    color: white; /* Sets the text color in the header */
    padding: 20px; /* Adds padding inside the header */
}

nav { 
    display: flex; /* Displays the nav items in a row */
    justify-content: space-between; /* Spaces items out evenly in the navigation */
    align-items: center; /* Vertically centers the items in the header */
}

nav ul { 
    display: flex; /* Displays the list items in a row */
    gap: 20px; /* Adds space between each list item */
}

nav ul li a { 
    color: white; /* Makes the navigation links white */
    font-weight: bold; /* Makes the navigation links bold */
}

/* Hero Section Styles */
.hero { 
    background: url('https://via.placeholder.com/1200x600') no-repeat center center/cover; /* Adds a background image and centers it */
    height: 100vh; /* Sets the height of the hero section to the full height of the viewport */
    display: flex; /* Uses flexbox for alignment */
    align-items: center; /* Vertically centers the content */
    justify-content: center; /* Horizontally centers the content */
    color: white; /* Sets text color to white */
}

.hero-content { 
    text-align: center; /* Centers the text in the hero section */
}

.cta-button { 
    background-color: #007bff; /* Sets the background color for the button */
    color: white; /* Sets the text color for the button */
    padding: 10px 20px; /* Adds padding inside the button */
    border-radius: 5px; /* Rounds the corners of the button */
    display: inline-block; /* Makes the button inline */
    margin-top: 20px; /* Adds space above the button */
}

/* Features Section Styles */
#features { 
    padding: 50px; /* Adds padding around the features section */
    background-color: #f9f9f9; /* Sets the background color for the features section */
    text-align: center; /* Centers the text */
}

.features-container { 
    display: flex; /* Uses flexbox for layout */
    justify-content: space-around; /* Spaces out the feature boxes evenly */
    gap: 20px; /* Adds space between the feature boxes */
}

.feature { 
    background-color: white; /* Sets the background color of the feature boxes to white */
    padding: 20px; /* Adds padding inside the feature boxes */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow to the feature boxes */
    border-radius: 5px; /* Rounds the corners of the feature boxes */
    width: 30%; /* Sets the width of the feature boxes */
}

/* Footer Styles */
footer { 
    background-color: #333; /* Sets the background color of the footer */
    color: white; /* Sets the text color in the footer */
    text-align: center; /* Centers the text in the footer */
    padding: 20px; /* Adds padding inside the footer */
}

This CSS will style your landing page to give it a modern, clean look. Let’s break down each part of the CSS:

General Styles: Basic styling applies to the body, headings, and lists. We’ve removed the default padding and margin and set a clean font.
Header Styles: The header has a dark background with white text and a simple, horizontally aligned navigation menu.
Hero Section: The hero section takes up the full viewport height and includes a background image with centered text and a call-to-action button.
Features Section: We use flexbox here to display three feature boxes in a row, with each box having a shadow effect to make it stand out.
Footer Styles: The footer is simple, with a dark background and white text, centered at the bottom of the page.

Step 6: Testing Your Landing Page

Once you’ve added both the HTML and CSS, open the HTML file in your browser, and you’ll see your landing page in action. Here’s how you can test and improve it:

Cross-browser testing: Open the landing page in different browsers (Chrome, Firefox, Safari) to ensure everything displays correctly.
Mobile responsiveness: Resize the browser window or view the page on a mobile device to ensure the layout adjusts well on smaller screens.
Customizing: You can easily change the background image, fonts, or colors to match your brand’s identity.

Step 7: Enhancing the Page with Interactivity (Optional)

If you want to take it a step further and add interactivity, you can introduce JavaScript. For example, you could add smooth scrolling when a user clicks on one of the navigation links, or implement a form in the contact section to allow users to reach out to you. However, for a basic static landing page, what you have now is a solid foundation.

Conclusion

By following this tutorial, you have created a basic static landing page using HTML and CSS. This is an excellent starting point for anyone learning web development or looking to create a simple website for their business. With the knowledge you've gained, you can now expand on this, add more sections, or even integrate a CMS to manage your content in the future.

Remember, the key to great web design is simplicity, clarity, and responsiveness. With a well-structured static page, you can create a beautiful and functional web presence with minimal effort. Keep experimenting and refining your skills!

← Back to Blog

Get Started Today

Get started now