How to create a landing page on the fly without the need to develop

- **meta-title**: *How to create a landing page on the fly without the need to develop*
- **meta-description**: *In this article, we will learn how to use Strapi's content management feature to create a landing page from scratch using dynamic zone components.*
- **Figma images**:
-

-

- **Publish date**:
- **Reviewers**:

## Outline

- Introduction
-Understanding Strapi as a Headless CMS
-A non-technical approach to using Strapi for a landing page
- Goal
- Prerequisites
- Step 1: Scaffolding a Strapi Project
- Step 2: Build the Stri-Fitness Collection.
- Step 3: Understanding components and dynamic zones in a non-technical term
- Step 4: Application of repeatable components and dynamic zones in the Str-Fitness landing page
- Step 5: Populate Content for the landing Page
- Step 6: Preview your home page with an option to deploy to Netlify in a non-technical explanation.
- Conclusion
## Introduction
[Strapi ](https://strapi.io/) is a developer-oriented content management system(CMS). It is open-source because anyone can contribute to enhancing features and resolving bugs. Additionally, it is a self-hosted product whose deployment and hosting depend entirely on your technical requirements. Its ability to be customized is an extremely important non-technical feature. The admin interfaces can be customized and tweaked to meet the needs of the team.

## Goal

In this article, we will learn how to use Strapi's content management feature to create a landing page from scratch using dynamic zone components. This is a non-technical approach to using Strapi's components and features without requiring the assistance of a developer. We would develop a homepage for Stri-Fitness, a fitness company.
## Prerequisites
To build this project,

1. You must download and install Node.js (Strapi recommends version 14).
2. You need to have npm (version 6 only) or yarn to run the CLI installation scripts.

## Content
### Step 1: Scaffolding a Strapi Project
The first step is to start a new Strapi project. There are several ways to start a new Strapi project, such as the starter CLI, but the quickest way is to install it via the Strapi Command Line Interface (CLI).

npx create-strapi-app landing-page --quickstart

#OR

yarn create-strapi-app landing-page --quickstart

The code snippets above will scaffold a new Strapi project. It should also open in your browser automatically. If it does not, you can start the admin panel on your browser by typing the following command into your terminal.

npm run develop

# OR

yarn run develop

This should launch a new browser window with the address http://localhost:1337/admin/auth/register-admin. You can register as an administrator here to gain access to the admin panel.

Fill out the admin registration form with accurate information.


After clicking the "Let’s Start" button, you will be able to access the Strapi Admin Dashboard.


### Step 2: Build the Stri-Fitness Collection.
We will navigate to the *Content-Type builder* under plugins and click the *Create new collection* link.


A form will appear, and we will use **Stri-Fitness** as the display name. We click the *Continue* button and fill out the fields that will be required for the landing page.


We would need text fields for short text called **Title** and long text called **Description**.

To add the title, click on text and enter **Title** into the name input with short text as the type, then click on *Add another field* to do the same for the description with long text as the type. Save your changes, and the **Stri-Fitness** collection should be accessible.


## Step 3: Understanding components and dynamic zones in a non-technical term
Components consist of multiple fields grouped together. Multiple independent fields may be grouped together to create a component. There are two types of components:
Non-repeatable components are, as their name suggests, groups of fields that can only be utilized once.
Repeatable components are components that can be used to generate multiple entries.

To learn more about components, it can be found in the official [Strapi documentation](https://docs.strapi.io/user-docs/content-manager/writing-content#components)

Dynamic zones are a more advanced application of components. It is a collection of components, each of which is made up of several independent fields.

In simplier terms, it is safe to say components are made up of fields and dynamic zones consists of components.

## Step 4: Application of repeatable components and dynamic zones in the Stri-Fitness landing page

For our landing page project, we would need the following dynamic zones:
1. Hero section,
2. Features,
3. Time schedule,
4. Pricing,
5. Frequently Asked Questions,
6. CTA and
7. Footer.

This is a screenshot of the wireframe design of the Stri-Fitness landing page.

An important advantage of building components is to avoid repetition of fields while creating a collection. So in our website, we would need to to build components that are reusable across all pages/feature of the landing page.

We would require the following components:
- Image component, which will include an image and a caption.
- Text component, which will include both short text (title) and long text (description).

To create the image component, go to the *Content-Type builder* and click the *Create new component* button.


A new form appears to create a new component.


Create a new category called *stri-fitness* and enter *Image* as the display name. A new prompt will appear to select the fields for the component, as well as the media and text for the image and caption, respectively.

Save these changes while the app restarts to take effect.

Perform similar operations to create a text component that will include both short and long texts.
The final component should look like the image shown below.


The subsequent step is to add dynamic zones to our website. As shown below, navigate to the stri-fitness collection and add another field.


Here, the dynamic zone will be selected as a new field.

The Hero section will be the first dynamic zone created. Enter HeroSection in the display name field and then click the button that adds a component to the zone.
A new pop-up will prompt you to choose an existing component. These components have been created previously. For the HeroSection, only the Image component is required.

The procedure is repeated for other features of the application that will be created utilizing dynamic zones.

After including all dynamic zones, the stri-fitness collection should resemble the one displayed below.


## Step 5: Populate Content for the landing page

The final step is to add content to the landing page. Create a new entry for the Stri-fitness collection within *Content-Manager*.


Each components will be populated accordingly. After including content across all fields in the component, we should have a view similar to this.


At this step, we have succeeded in creating a landing page from scratch without the assistance of a technical person. It is important to note that the layout and order of the page can be rearranged from the strapi admin panel.
In order to see this page on the client side, a technical person or a developer needs to consume the Strapi endpoints.

Clicking on the **Publish** button at the top right side of the admin panel enables the developer to consume the endpoint and show on the client side for the users.

## Conclusion
Using Strapi Dynamic Zones, this article creates a fitness landing page on the fly without the need for a developer. Developers are not required to modify the front end if changes are made to the content in the dynamic zone.

In an instance where you want to include a testimonial feature in the form of an image and description. You can click on the add component to features button and include content for a testimonial feature.

To read more about how this can be easily consumed by a technical person, check out the [official documentation](https://docs.strapi.io/dev-docs/api/rest).