Build and Publish a Landing Page

In this tutorial, we'll build a simple landing page from scratch.

We'll walk through the entire process: writing code, seeing your changes instantly with Live Preview, and publishing your finished website online. Even if you've never built a website before, you'll be able to follow along with ease!

🎯 What you'll build

A Hero section
A Call-to-Action (CTA) button
A Features section
A mobile-friendly responsive layout
A published website on the internet

Before You Start

First, create a new project using the Blank template.

Once created, you'll see a single file in your project structure:

/public
 └── +page.essepage

The +page.essepage file inside the /public folder is the default file that serves as your site's homepage.

Now, let's open +page.essepage in the editor and get started!

Step 1. Create your first webpage

Delete everything in the file, replace it with the following code, and save (Ctrl + S or Cmd + S).

<div id="_main">

    <h1>Turn Your Ideas Into Reality</h1>

    <p>
       We provide simple and efficient solutions to help you build better services.
    </p>

    <a href="#">
        Learn More
    </a>
    
</div>

Did you notice the Preview screen on the right change?
Here’s a cool feature unique to Essepage: the <div id="_main"> part.

Starting an element's ID with an underscore (_) enables Essepage's Live Preview mode.
From now on, in addition to refreshing when you save, the screen on the right will update instantly as you type.

Step 2. Add some styling (CSS)

Now let's make it look good. Add the following code below what you just wrote.

<style id="_css">
body {
    font-family: system-ui;
    padding: 20px;
}

h1 {
    font-size: 64px;
    margin-bottom: 20px;
}

p {
    line-height: 1.7;
}

a {
    display: inline-block;
    margin-top: 32px;
    padding: 14px 28px;
    background: #111;
    color: white;
    text-decoration: none;
    border-radius: 999px;
}
</style>

See how the button's color and shape change in real-time as you type?
Because we used <style id="_css">, your styling is also hooked into Live Preview. This makes designing so much easier!

💡 Tip:
In Essepage, you can place your <style> tags anywhere in the file. It will automatically move them to the <head> section to comply with web standards. There's no need to create separate CSS files and link them in the <head>—you can comfortably code everything in one file.

Step 3. Center everything

Let's make this look like a proper landing page hero.
Find the body block in your CSS and replace it with the following:

body {
    font-family: system-ui;
    padding: 20px;
    margin: 0;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

Your content is now perfectly centered. Starting to feel like a real landing page, right?

Step 4. Add a Features section

Most landing pages need an area to highlight the product or service's benefits.
Add the following code just below your Learn More button in the HTML section.

<section>

    <h2>Our Strengths</h2>

    <ul>
        <li>Fast and intuitive experience</li>
        <li>Fully responsive on all devices</li>
        <li>Reliable customer support</li>
    </ul>

</section>

With these added, it looks much more like a complete landing page.

Step 5. Improve the spacing

The list we just added looks a bit cramped. Let's adjust the spacing to make it look cleaner.

Add this code below your existing <style> block.

section {
    margin-top: 80px;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    margin: 16px 0;
}

As you can see, even small CSS tweaks can significantly boost the quality of your page.

Step 6. Make it responsive for mobile

Large headings look great on a desktop monitor, but they can be too overwhelming on a smartphone.

Add the following code at the very bottom of your styles.

@media (max-width: 640px) {
    h1 {
        font-size: 42px;
    }
}

Now, try resizing your browser window. You'll see the font size naturally scale down as the screen gets narrower.

Step 7. Publish your website

Once you're happy with how your page looks, press Ctrl + S (or Cmd + S) to safely save all your changes.

Now it's time to share your awesome website with the world.
In the file explorer on the left, right-click the +page.essepage file, and select Apply Changes from the menu.

🎉 Congratulations!

You've just built your very own landing page with Essepage and successfully published it live on the internet!

To see the actual website, choose Page → Open Homepage from the menu.

Languages

On this page

Title