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.
Table Of Contents
- Gather all the Resources We Might Need
- Download and Setup Fire-UI
- Create a Navigation Bar (Navbar)
- Design Your Content
- 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>
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 :
- Open your command prompt (For Windows User, you can press Win+R and type cmd)
- Change the directory to the destination folder you want to code
- Type the following command :
npm install @fire-ui/fire-ui
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
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
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>
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>
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>
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:
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">☰</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>
Tadaaa!! We have done with our navigation bar.
4. Design Your Content
In this part what we will create:
- About Me
- Achievements, and
- Contact Form
So first lets add the following code after the navbar code:
<div class="container mt-5"></div>
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;
}
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>
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>
Now your achievement section will look like this:
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>
And now your contact form will look like this:
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">
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">☰</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>
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">☰</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>
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)
sweet. i love it. thank you.
Thankyou :D