Build Landing Page with Fire-UI
Tags: tutorial, portfolio, html, css
Published: 2021-01-01 13:03:20

#### _Do you want to generate leads, starting with a qualification process and into new customers? Let's start with a Landing Page_

Here's what we are going to build today!!! A Landing Page built using Fire-UI :
![Landing Pages](https://dev-to-uploads.s3.amazonaws.com/i/yjb6vk3ik7xq6thvmuu0.jpg)

>For live demo, you can visit the pages here : [https://fire-ui.github.io/landing-page-template/](https://fire-ui.github.io/landing-page-template/)

Looks pretty **awesome** right? How about let's us start the journey!
![Let's Start](https://dev-to-uploads.s3.amazonaws.com/i/fhjvp1gfk0evor1oi8b1.jpg)

# **Table of Contents**
1. Gather Resources
2. Getting Started with Fire-UI
3. Start building your Landing Page
   * Setup Fire-UI
   * Create Navigation Bar (Navbar)
   * Create Introduction (About Us)
   * Create Main Part (Our Products)
   * Finishing (Contact Us)

## **1. Gather Resources**
Before we continue further, some resources you might need before we start coding 👩‍💻👩‍💻 :
* Basic knowledge of HTML
* Text Editor (Either [Visual Studio Code](https://code.visualstudio.com/download) or [Sublime Text](https://www.sublimetext.com/3) is recommended)
* A Search Engine ([Google](https://www.google.com/chrome/), [Mozilla](https://www.mozilla.org/en-US/firefox/new/), etc will be fine)

So that's all for our resources, and I believed that you have downloaded all these resources. If haven't, you can open the link provided above.

## **2. Getting Started with Fire-UI**
Fire-UI is a CSS Library allowing for easier and more standards-compliant web design.

You can read the following blog to know more about Fire-UI
{% link https://dev.to/stanleyowen/fire-ui-a-user-friendly-and-reliable-css-framework-229d %}

To keep it simple and fast, we will move on to the next part.
![Move On](https://dev-to-uploads.s3.amazonaws.com/i/kjy5ikq051c5t9rv8kdz.jpg)

## **3. Start building your Landing Page**
### **a. Setup Fire-UI**
Now open your text editor and type the basic of HTML:
```html
<!DOCTYPE html>
<html>
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Landing Page with Fire-UI</title>
</head>
<body>
	<h1>Hello World</h1>
</body>
</html>
```

Save the following files with `index.html`, then we will start setting up Fire-UI. There are some methods to config and connect Fire-UI. But in this tutorial, we will use the simplest way to save our time, which is using CDN through unpkg.

```html
<!-- Fire UI CSS -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fire-ui/fire-ui@0.1.1/FireUI.css">
<!-- Fire UI Javascript -->
<script src="https://unpkg.com/@fire-ui/fire-ui@0.1.1/FireUI.js"></script>
```

Thus, your `index.html` will now look like this:
```html
<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Fire UI CSS -->
	<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fire-ui/fire-ui@0.1.1/FireUI.css">
	<!-- Fire UI Javascript -->
	<script src="https://unpkg.com/@fire-ui/fire-ui@0.1.1/FireUI.js"></script>
	<title>Landing Page with Fire-UI</title>
</head>
<body>
	<h1>Hello World!</h1>
</body>
</html>
```

After that, save the files as `.html` extension like the picture below:
![HTML Extension](https://dev-to-uploads.s3.amazonaws.com/i/bocwnzfkazxs3ih2gkio.jpg)

Find the file that you have just save it recently, run it with your default browser and you will see the result like this:
![Result](https://dev-to-uploads.s3.amazonaws.com/i/gu76i5t40sno2ryou0r7.jpg)

We have completed the most basic of configuring Fire-UI, let's give applause 👏👏.

### **b. Create Navigation Bar**
>Before continue further, you can access our full code in the following link: [https://github.com/fire-ui/landing-page-template/blob/master/index.html](https://github.com/fire-ui/landing-page-template/blob/master/index.html)

Now what we are going to to is to **create navigation bar (navbar)**. If you didn't sure what is navbar, here is how navbar look like:
![Navbar](https://dev-to-uploads.s3.amazonaws.com/i/84zwv20gjndtf9i0uycj.jpg)

So what we need is:
1. **Remove the content of** `body`
2. Add the attribute `theme = 'light'` in the `body` element
3. Copy and paste the Navbar code
```html
 <div class="topnav theme-reverse topnav-shadow">
    <span class="topnav-brand">Product name</span>
    <span class="topnav-hamburger-menu" data-target = "myTopnav">&#x2630;</span>
    <div class="topnav-right" id="myTopnav">
        <a class="topnav-item" href="">Home</a>
        <a class="topnav-item" href="#aboutUs">About us</a>
        <a class="topnav-item" href="#products">Products</a>
        <a class="topnav-item" href="#contacts">Contacts</a>
        <span switch-theme class="topnav-item">Switch theme</span>
    </div>
</div>
```

At last, your code will look like this:
```html
<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Fire UI CSS -->
	<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fire-ui/fire-ui@0.1.1/FireUI.css">
	<!-- Fire UI Javascript -->
	<script src="https://unpkg.com/@fire-ui/fire-ui@0.1.1/FireUI.js"></script>
	<title>Landing Page with Fire-UI</title>
</head>
<body theme='light'>
	<div class="topnav theme-reverse topnav-shadow">
		<span class="topnav-brand">Product name</span>
		<span class="topnav-hamburger-menu" data-target = "myTopnav">&#x2630;</span>
	<div class="topnav-right" id="myTopnav">
		<a class="topnav-item" href="">Home</a>
		<a class="topnav-item" href="#aboutUs">About us</a>
		<a class="topnav-item" href="#products">Products</a>
		<a class="topnav-item" href="#contacts">Contacts</a>
		<span switch-theme class="topnav-item">Switch theme</span>
    </div>
</div>
</body>
</html>
```

4. Save it and ... Voila! You are done with our navigation bar

### **c. Create About Us**
Before we create About Us section, we need to implement some CSS to make sure our page works perfectly. Firstly, create `style.css` and paste the code:
```css
img{
    width: 100% !important;
}

.heading-title{
    font-size: 2.5rem;
}

@media only screen and (max-width: 600px){
    .intro-image{
        display: none;
    }
}
```

As a note, make sure that your directory look at least like this:
```
Landing Page/
├── index.html
├── style.html
```

Again, save `style.css` and add a line of code inside the `head` to connect it with our HTML code:
```html
<link rel="stylesheet" href="style.css">
```

Also, we will need to download an image for our pages, you can download it through the following link: [https://github.com/fire-ui/landing-page-template/raw/master/product.png](https://github.com/fire-ui/landing-page-template/raw/master/product.png)

Copy and past the following content inside the `body` element **after** `navbar` code:
```html
<div class="row theme-adjust my-5">
    <div class="col-6">
        <img src="product.png" alt="Product image" class="intro-image">
    </div>
    <div class="col-6">
        <div class="m-5">
            <h1 class="heading-title">Product name</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam. </p>
        </div>
    </div>
</div>

<div class="theme-reverse" id="aboutUs">
    <div class="container my-5 py-3">
        <h1 class="heading-title">About us</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam. Cras tempor ipsum ut ex tristique, ac eleifend nibh congue. Praesent imperdiet, lorem quis accumsan efficitur, eros augue finibus nisl, et blandit odio ipsum nec metus. Cras varius, dui luctus eleifend euismod, nunc metus molestie augue, nec posuere tellus urna sit amet purus. Sed ut sem bibendum, lacinia nisl in, vehicula mi. Phasellus vel odio in nulla mattis lobortis. In accumsan tincidunt lectus nec accumsan. Quisque congue arcu vel ante commodo pretium. Pellentesque pellentesque leo vitae eros efficitur scelerisque. Aliquam sit amet facilisis leo, vehicula cursus arcu.</p>
        <p>Nam sed dictum arcu. In hac habitasse platea dictumst. Cras vulputate a felis a eleifend. Nunc sit amet mi iaculis, tempor ex non, ultricies orci. Suspendisse mollis venenatis augue, sit amet sollicitudin tortor maximus ac. Ut scelerisque nisl sed orci ultricies bibendum. In a tortor ut ligula interdum mattis. Ut commodo gravida odio, quis condimentum quam sagittis at. In rhoncus felis sit amet finibus vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet mi nec nisl rhoncus, nec accumsan dui pellentesque.</p>
    </div>
</div>
```

Again, save it and now your page will be previewed like this:
![About Us](https://dev-to-uploads.s3.amazonaws.com/i/fygy8b98nbr9rzv66ycs.jpg)

We're done with our with our **About Us** section, and lets move one step further!

###c. Create Main Part (Our Products)
In this part, we will introduce our recent products to our customer, so paste the following code after the About Us section:
```html
<div class="theme-adjust" id="products">
    <div class="container py-3">
        <h1 class="heading-title">Our Products</h1>
        <div class="row">
            <div class="col-4">
                <div class="box box-shadow m-3">
                    <img src="product.png" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam</p>
                </div>
            </div>
            <div class="col-4">
                <div class="box box-shadow m-3">
                    <img src="product.png" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam</p>
                </div>
            </div>
            <div class="col-4">
                <div class="box box-shadow m-3">
                    <img src="product.png" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam</p>
                </div>
            </div>
        </div>
    </div>
</div>
```
Now, the main product section similar to the picture below:
![Our Products](https://dev-to-uploads.s3.amazonaws.com/i/fu4tps7zwehbmf3gtsxt.jpg)

### **Finishing (Contact Us)**
We are almost done with our page and we are now in the last part, which is creating a contact section.

Copy the following code and paste it after the main part (Our Products):
```html
 <div class="theme-reverse" id="contacts">
    <div class="container mt-5 py-3">
        <h1 class="box-title">Contact Us</h1>
        <div class="row">
            <div class="col-4">
                <div class="box box-shadow m-3">
                    <h3 class="box-title">Address</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="col-4">
                <div class="box box-shadow m-3">
                    <h3 class="box-title">Phone</h3>
                    <p>+0000000000</p>
                    <p>+1234567890</p>
                </div>
            </div>
            <div class="col-4">
                <div class="box box-shadow m-3">
                    <h3 class="box-title">Email</h3>
                    <p>hello@mail.com</p>
                    <p>world@mail.com</p>
                </div>
            </div>
        </div>
    </div>
</div>
```

Try refresh your browser and you will see the contact section:
![Contact Section](https://dev-to-uploads.s3.amazonaws.com/i/ld25wi0n3rx6erup9jak.jpg)

> As a note, you can visit the full code on [https://github.com/fire-ui/landing-page-template/blob/master/index.html](https://github.com/fire-ui/landing-page-template/blob/master/index.html)

Well Done 👏👏👏~ You have just created your website with Fire-UI.

Some articles you might like:
{% post https://dev.to/stanleyowen/create-your-profile-page-from-scratch-with-fire-ui-35cn %}
{% link https://dev.to/stanleyowen/build-a-responsive-todo-app-with-mern-stack-mongodb-express-react-node-12nf %}

If you are interested in this tutorial, don't forget to give a star in https://github.com/fire-ui/fire-ui.

Happy Coding!