DEV Community

Stanley Owen
Stanley Owen

Posted on • Edited on

Create Your Profile Page From Scratch with Fire-UI

#tutorial #portfolio #html #css

Wonder how to build a website with HTML, CSS, and JavaScript from 0?

Then you're in a right place. In this tutorial, we will learn how to create a static website - Profile Page, and you will see a blank page to a well-designed and optimized website.

For a live demo, you can visit here : https://fire-ui.github.io/Profile-Page-Template/

Well, so before we started our tutorial, you may give a star by supporting our Fire-UI Framework : https://github.com/fire-ui/fire-ui.

Overview

So well in this tutorial, we will use a CSS Framework, which is Fire-UI, a free and user-friendly CSS Framework.

You can visit the blog below to learn more about Fire-UI.

stanleyowen

Fire-UI : A User-Friendly and Reliable CSS Framework

Stanley Owen ・ Dec 19 '20

#css #javascript #opensource

Table Of Contents

  1. Gather all the Resources We Might Need
  2. Download and Setup Fire-UI
  3. Create a Navigation Bar (Navbar)
  4. Design Your Content
  5. Finishing

1. Gather all the Resources We Might Need

Well all what we need to build a basic website is:

  • Text Editor (Either Sublime Text or Visual Studio Code is recommended)
  • A Search Engine (Chrome, Google, Mozilla, etc will be fine)

That's pretty simple right? Now let's move apart!

2. Download and Setup Fire-UI

Alright before we started to code, we need to download Fire-UI CSS Framework, a CSS library that allowing for easier and more standards-compliant web design.

Note : To download the file, you need to go online / connected to the Internet

There are 3 methods to download Fire-UI Framework:
1. Download via unpkg (recommended)
I recommend to use this method because it is easier and practical, BUT you need to know that Fire-UI will not be available when you are offline.

Firstly, open your file editor and create a file. Next, save it with the name index.html in the folder where you download the framework.
Then, you just need to copy these code inside your index.html file:

<!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>Hello, world!</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Note: If you are using method 1, you are all done! You can just simply just to the next part, which is Create a Navigation Bar

2. Download via NPM
Fire-UI is also available in NPM. You can follow the following step to download it :

  1. Open your command prompt (For Windows User, you can press Win+R and type cmd)
  2. Change the directory to the destination folder you want to code
  3. Type the following command : 
npm install @fire-ui/fire-ui
Enter fullscreen mode Exit fullscreen mode

For Fire-UI Documentation, you can visit here : https://fire-ui.github.io/

3. Download Through GitHub

You can visit the following link to download it through GitHub: https://github.com/fire-ui/fire-ui

Fire-UI GitHub Code

If you have clicked the link, the appearance will the same as above. After that, click on the Code > Download ZIP. Then you will need to extract it.

Now we have successfully configure the Fire-UI Frameworks, and before start to code, give yourself applause 👏👏👏.

Now, it's time to code!!!
Firstly, open your file editor and create a file. Next, save it with the name index.html in the folder where you download the framework.

If you are using either Method 2 or Method 3, make sure your directory will look at least like this:

fire-ui/
├── Fire-UI.js
├── Fire-UI.css
├── index.html (The file you created)
├── src/
|   ├── fonts/
|       ├── Noto/
|           ├── NotoSans-Regular.ttf
|       ├── Roboto
|           ├── Roboto-Regular.ttf
|       ├── Work
|           ├── WorkSans-Medium.ttf
Enter fullscreen mode Exit fullscreen mode

Then you will need add some basic HTML. Here is the code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Profile Page</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

After that, add the following code to link it with Fire-UI.

<!-- Fire UI CSS -->
<link rel="stylesheet" type="text/css" href="FireUI.css">
<!-- Fire UI Javascript -->
<script src="FireUI.js"></script>
Enter fullscreen mode Exit fullscreen mode

Now, your code in index.html will look like this :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/FireUI.css">
    <script src="FireUI.js"></script>
    <title>Profile Page</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Again, save it and run it on your default browser by double-click index.html file in your File Manager and you will see the result like in the picture below:

Result

So, that's all for the configuration 😆. Let's move on to the next part!

3. Create a Navigation Bar (Navbar)

Before we continue further, note that you can access the full code on GitHub : https://github.com/fire-ui/Profile-Page-Template

Now we'll create a navigation bar (or often called as navbar). Before that, you need to remove the content of body. After that, copy and paste the following code in the body section:

<div class="topnav topnav-shadow">
    <span class="topnav-brand">My 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="#achievement">Achievements</a>
        <a class="topnav-item" href="#contact">Contact</a>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Tadaaa!! We have done with our navigation bar.

4. Design Your Content

In this part what we will create:

  1. About Me
  2. Achievements, and
  3. Contact Form

So first lets add the following code after the navbar code:

<div class="container mt-5"></div>
Enter fullscreen mode Exit fullscreen mode

We need to create a style.css file too to make sure the website works perfectly. Copy the following code and paste them inside style.css:

img{
    width: 100% !important;
}

.intro-title{
    font-size: 3rem;
}

.intro-text{
    text-align: justify;
}
Enter fullscreen mode Exit fullscreen mode

1. About Me

In About Me section, we will use grid to create a simple pages.

If you didn't understand what is grid, you can visit here : https://fire-ui.github.io/Layout/grid.html

In this tutorial, we will use this profile picture: https://github.com/fire-ui/Profile-Page-Template/blob/master/profile-picture.png?raw=true

Now copy and paste the following code inside <div class="container mt-5"></div>:

<div class="row">
    <div class="col-6">
        <img src="profile-picture.png" alt="My profile picture">
    </div>
    <div class="col-6">
        <div class="p-3">
            <h1 class="intro-title">Hello world!</h1>
            <p class="intro-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
            <a href="#achievement" class="btn theme-reverse">My achievement</a>
            <a href="#contact" class="btn theme-adjust">Contact me</a>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Note that you can just change the value inside <p class="intro-text">.

2. Achievements

In achievements part, we need to download images in the following link: https://github.com/fire-ui/Profile-Page-Template/blob/master/achievements.jpg?raw=true

If you have downloaded them, copy these code after the about me section :

<div class="my-5" id="achievement">
    <h1 class="heading-title">Achievements</h1>
    <div class="row">
        <div class="col-4">
            <div class="box m-2">
                <img src="achievements.jpg" alt="My achievement">
                <h2 class="box-title">First achievement</h2>
                <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
            </div>
        </div>
        <div class="col-4">
            <div class="box m-2">
                <img src="achievements.jpg" alt="My achievement">
                <h2 class="box-title">Second achievement</h2>
                <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
            </div>
        </div>
        <div class="col-4">
            <div class="box m-2">
                <img src="achievements.jpg" alt="My achievement">
                <h2 class="box-title">Third achievement</h2>
                <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
            </div>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Now your achievement section will look like this:
Achievements Section

3. Contact Form

In this section, we will use form and input as the basic of a form. Type the following code under the achievement section, but make sure it is still inside <div class="container mt-5">:

<div class="my-5" id="contact">
    <form action="#" class="box p-3 box-shadow theme-adjust">
        <div class="form-group">
            <h1 class="heading-title">Contact</h1>
        </div>
        <div class="form-group">
            <p class="form-label">Email:</p>
            <input type="email" class="form-control">
        </div>
        <div class="form-group">
            <p class="form-label">Message:</p>
            <textarea class="form-control"></textarea>
        </div>
        <div class="form-group">
            <input type="submit" value="Submit" class="btn theme-reverse form-control">
        </div>
    </form>
</div>
Enter fullscreen mode Exit fullscreen mode

And now your contact form will look like this:
Contact Form

Congrats! We are almost till the end of this tutorial!

Finishing

At last, we will add dark-mode (optional). Firstly, your code scroll up to the body section and add the value theme="dark" inside the body section and now your code body section will look like this:

<body theme="dark">
Enter fullscreen mode Exit fullscreen mode

Later, change the navbar section became:

<div class="topnav theme-reverse topnav-shadow">
    <span class="topnav-brand">My 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="#achievement">Achievements</a>
        <a class="topnav-item" href="#contact">Contact</a>
        <p class="topnav-item" switch-theme>Switch theme</p>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Now your index.html will look like:

<!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="FireUI.min.css">
    <!-- Additional CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- Fire UI Javascript -->
    <script src="FireUI.min.js"></script>
    <link rel="shortcut icon" href="profile-picture.png" type="image/x-icon">
    <title>Hello, world!</title>
</head>
<body theme="dark">
    <div class="topnav theme-reverse topnav-shadow">
        <span class="topnav-brand">My 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="#achievement">Achievements</a>
            <a class="topnav-item" href="#contact">Contact</a>
            <p class="topnav-item" switch-theme>Switch theme</p>
        </div>
    </div>
    <div class="container mt-5">
        <div class="row">
            <div class="col-6">
                <img src="profile-picture.png" alt="My profile picture">
            </div>
            <div class="col-6">
                <div class="p-3">
                    <h1 class="intro-title">Hello world!</h1>
                    <p class="intro-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
                    <a href="#achievement" class="btn theme-reverse">My achievement</a>
                    <a href="#contact" class="btn theme-adjust">Contact me</a>
                </div>
            </div>
        </div>
        <div class="my-5" id="achievement">
            <h1 class="heading-title">Achievements</h1>
            <div class="row">
                <div class="col-4">
                    <div class="box m-2">
                        <img src="achievements.jpg" alt="My achievement">
                        <h2 class="box-title">First achievement</h2>
                        <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
                    </div>
                </div>
                <div class="col-4">
                    <div class="box m-2">
                        <img src="achievements.jpg" alt="My achievement">
                        <h2 class="box-title">Second achievement</h2>
                        <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
                    </div>
                </div>
                <div class="col-4">
                    <div class="box m-2">
                        <img src="achievements.jpg" alt="My achievement">
                        <h2 class="box-title">Third achievement</h2>
                        <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="my-5" id="contact">
            <form action="#" class="box p-3 box-shadow theme-adjust">
                <div class="form-group">
                    <h1 class="heading-title">Contact</h1>
                </div>
                <div class="form-group">
                    <p class="form-label">Email:</p>
                    <input type="email" class="form-control">
                </div>
                <div class="form-group">
                    <p class="form-label">Message:</p>
                    <textarea class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <input type="submit" value="Submit" class="btn theme-reverse form-control">
                </div>
            </form>
        </div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Try refresh your browser and you will see the Switch Theme button.

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

Don't forget to give a star in https://github.com/fire-ui/fire-ui if you like it.

Happy Coding!

Top comments (2)

Collapse
 
mansa profile image
Mansa_Forever •

sweet. i love it. thank you.

Collapse
 
stanleyowen profile image
Stanley Owen •

Thankyou :D

Read next

shieldstring profile image

Adapter and Composite Design Patterns

Agbo, Daniel Onuoha -

code42cate profile image

Day 10: Docker Networking

Jonas Scholz -

shofol profile image

Create Eye-Catching Button Effect with Rotating Glow Animation

Anower Jahan Shofol -

hana_lee profile image

How I Increased Engagement by 40% in My Health Content Using These Practical Video Production Steps

Hana -