Getting Started

Build Your First KitFront Project

Create one home page and one reusable inner page, then use them to build the rest of your website.

Before you begin

Complete the Starter Kit setup and learn how to preview and copy a section.

The complete workflow

Use this order to create the shared page structure before filling the website with additional sections.

Step 1

Home page

Add a Home Hero and Footer.

Step 2

Inner page

Duplicate and change the page hero.

Step 3

Add sections

Add sections between hero and footer.

Step 4

Test

Customize content and check every device.

Home page and inner page structure

The home page uses a Home Hero with its header. Inner pages reuse that header and footer, but replace the Home Hero with a Page Hero.

Home page · index.html

Header + Home Hero

Page sections

Footer

Inner page · about.html

HeaderRemove the is-home class

Page Hero

Page sections

Footer

Build the project step by step

Step 01

Create the home page foundation

Open index.html, then choose a Home Hero and a Footer.

Preview and copy the Home Hero. It includes the header and home-page hero.
Paste it at the top of the page.
Preview and copy the Footer, then paste it at the end.

Step 02

Create your reusable inner page

Duplicate the home page and rename it, for example about.html. This keeps the same header and footer.

Keep the header, but remove the Home Hero content.
Remove the is-home class from the header.
Choose a Page Hero and paste it after the header.

Step 03

Add the remaining page sections

Add the sections required by each page between its hero and footer.

On the home page, add sections after the Home Hero and before the Footer.
On inner pages, add sections after the Page Hero and before the Footer.
Duplicate the completed inner-page foundation whenever you need another inner page.

Step 04

Customize and test the complete website

Replace the demo content, then test the complete website.

Update page titles, text, images, buttons, links, and navigation URLs.
Confirm that each section has its required CSS and optional JavaScript.
Test the home page and inner pages at desktop, tablet, and mobile sizes.
Check menus, sliders, accordions, forms, and other interactive sections.

Your project foundation is ready

Continue using the inner-page foundation for About, Services, Contact, and other pages. Keep the shared header and footer consistent, replace the Page Hero and middle sections as needed, and customize the content for each page.

Browse the Section Library

Preview

Brand Colors