DEV Community: Stanley Owen

I Wrote A Lo-Fi Player, Loofi with Typescript

Stanley Owen — Wed, 10 Aug 2022 11:37:00 +0000

After working for a quite long period of time, I am glad to introduce Loofi, a Lo-Fi player which is aimed to create a chill atmosphere for developers while coding, students while studying, and more 🥳

Features:

Fluent UI
Open Source Project
Small App Size (~ 5mb)
Have a collection of 50+ Lo-Fi Music
Multiple themes
Available in Web and App (Currently Support for Windows Platform)

About:

Loofi is an open source programs built using React, Typescript (for a more secure environment), CSS, and Firebase.

Links:

GitHub: https://github.com/stanleyowen/loofi
App: https://loofi.vercel.app/

Happy coding! 🎉

Introducing Otlio, a Powerful Todo List 🚀

Stanley Owen — Fri, 11 Jun 2021 09:44:50 +0000

Hello World! 🙋‍♂️👋
I would like to introduce Otlio, a powerful Todo List 🚀, which also supports drag and drop🤩.

Website Link: https://otlio.netlify.app/

Features

Support for Google and GitHub OAuth 🔥 Login
Support for 2FA (Two Factor Authentication) 🔑
Support for Drag and Drop Feature ✊
Heavy focus on security 🔐
Customer Support 🙌
Available in Dark Mode 🌓

Otlio is also an open source project 👐, which is hosted on: https://github.com/stanleyowen/otlio

If you find this project useful, leave a 🌟 on GitHub to keep a beginner motivated. 😊

Any comments will be appreciated and everyone is welcome to contribute to this project (＾Ｕ＾)ノ

Happy Coding! 🎉

✨Build a Login and Register Form with HTML and CSS✨

Stanley Owen ・ Mar 3 '21

#tutorial #html #css #webdev

Todo Application - An Open Source and Easy to Use Web Application

Stanley Owen ・ Feb 7 '21

#showdev #javascript #webdev #productivity

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

Stanley Owen ・ Dec 19 '20

#css #javascript #opensource

✨Build a Login and Register Form with HTML and CSS✨

Stanley Owen — Wed, 03 Mar 2021 13:05:09 +0000

Photo By unsplash.com

In this article, today we will learn how to build a simple but aesthetic Login and Register Form.

You can access the full code here and the demo page here!

Gather Resources
Getting Started with Fire-UI
Start building your Landing Page
- Setup Fire-UI
- Create Navigation Bar (Navbar)
- Create Login and Register Form

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 or Sublime Text is recommended)
A Search Engine (Google, Mozilla, 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

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

Stanley Owen ・ Dec 19 '20

#css #javascript #opensource

To keep it simple and fast, we will move on to the next part.

3. Start building your Landing Page

a. Setup Fire-UI

Now open your text editor and type the basic of HTML:

<!DOCTYPE html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login and Register Template</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 configure and connect Fire-UI. But in this tutorial, we will keep it simple, which is using CDN through jsdelivr:

<!-- Fire UI CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.4/FireUI.min.css">

<!-- Fire UI Javascript -->
<script src="https://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.4/FireUI.min.js"></script>

Thus, your index.html will now look like this:

<!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://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.4/FireUI.min.css">
    <!-- Fire UI Javascript -->
    <script src="https://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.4/FireUI.min.js"></script>
    <title>Login and Register Template</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

After that, save the file as .html extension like the picture below:

Find the file that you have just save it recently, run it with your default browser and you will see the result like this:

Before continuing further, you can access our full code in the following link: here

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:

So what we need is:

Remove the content of body
Add the attribute theme = 'light' in the body element
Copy and paste the Navbar code

<div class="topnav theme-reverse topnav-shadow">
    <span class="topnav-brand">Navbar</span>
    <span class="topnav-hamburger-menu" data-target = "myTopnav">&#x2630;</span>
    <div class="topnav-right" id="myTopnav">
        <a class="topnav-item" data-switch-theme="light, dark, aqua, sky, phoenix, indigo, teal">Switch theme</a>
    </div>
</div>

b. Create Login and Register Form
Then we come to the challenging part, which is building the login and register form.

Copy these code to your text editor:

<div id="form">
    <div className="centeredForm">
        <div class="box theme-reverse">
            <div class="box">
                <!-- Create a Tab that contain Login and Register Tab -->
                <div class="tab" data-tab="formTab">
                    <button class="tab-btn btn-dark" data-content="login">Login</button>
                    <button class="tab-btn btn-light" data-content="register">Register</button>
                </div>
                <div class="tab-contents" id="formTab">
                    <!-- Login Tab -->
                    <div id="login" class="tab-content tab-content-active">
                        <form action="#" method="POST">
                            <div class="form-group form-animate">
                                <label for="login-username" class="form-label">Username</label>
                                <input type="text" class="input-animate" id="login-username" required autocomplete="username">
                            </div>
                            <div class="form-group form-animate">
                                <label for="login-password" class="form-label">Password</label>
                                <input type="password" class="input-animate" id="login-password" required autocomplete="current-password">
                            </div>
                            <div class="form-group">
                                <button class="btn form-control theme-adjust">Login</button>
                            </div>
                        </form>
                    </div>
                    <!-- Register Tab -->
                    <div id="register" class="tab-content">
                        <div id="helloWorld" class="tab-content tab-content-active">
                            <form action="#" method="POST">
                                <div class="form-group form-animate">
                                    <label for="reg-username" class="form-label">Username</label>
                                    <input type="text" class="input-animate" id="reg-username" required autocomplete="username">
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group form-animate">
                                            <label for="reg-password" class="form-label">Password</label>
                                            <input type="password" class="input-animate" id="reg-password" required autocomplete="new-password">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group form-animate">
                                            <label for="confirm-password" class="form-label">Confirm Password</label>
                                            <input type="password" class="input-animate" id="confirm-password" required autocomplete="new-password">
                                        </div>
                                    </div>
                                    <input type="checkbox" id="label" required>
                                    <label for="label">By signing up, you agree to our <a href="#">Terms and Condition</a> and our <a href="#">Privacy Policy</a></label>
                                </div>
                                <div class="form-group">
                                    <button class="btn form-control theme-adjust">Register</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mb-5"></div>
    </div>
</div>

Well, we are not done yet, we will create a custom CSS to make it more aesthetic. Now we will create a index.css file which contains the following code:

#form {
    width: 60%; /* Only set the width to 60% so it would be centered vertically */
    padding-top: 100px;
    margin-left: auto;
    margin-right: auto; /* Items will be centered vertically when margin-top and margin-left is set to auto */
    transition: all .4s;
}

.centeredForm {
    margin: 20px;
    margin-bottom: 40px;
    padding: 40px 10px;
    border-radius: 10px;
    transition: all .4s;
    background-color: #F0F0F0;
}

/* This will transform the form width into full width when device width is smaller than 768px */
@media only screen and (max-width: 768px) {
    #form { width: auto; margin-left: 10px; margin-right: 10px; }
}

And we are done with our simple login and register template!

Don't forget to give a star on GitHub if you like this article!

Happy Coding! 🎉

Todo Application - An Open Source and Easy to Use Web Application

Stanley Owen ・ Feb 7 '21

#showdev #javascript #webdev #productivity

AbstractMark, the modern markdown language.

Justin Maximillian Kimlim ・ Feb 15 '21

#javascript #markdown #abstractmark

Build an Awesome Profile Page with Fire-UI

Stanley Owen ・ Jan 19 '21

#tutorial #portfolio #html #css

Todo Application - An Open Source and Easy to Use Web Application

Stanley Owen — Sun, 07 Feb 2021 04:00:34 +0000

Organizing Easier, Improve Your Productivity

Todo Application is an open source project distributed under MIT License which is easy to use and easy to organize!

Todo Application is built using MERN Stack:

MongoDB
Express JS
React JS
Node JS

stanleyowen / otlio

An open source project of Todo which is easy to use and easy to organize!

🚀 Otlio - A Powerful Todo List

Otlio is an open source project of web app built with MERN Stack (MongoDB, Express, React, Node JS).

Feature

Support for Google and GitHub OAuth 🚀 Login
Support for 2FA (Two Factor Authentication) 🔑
Support for Drag and Drop Feature ✊
Heavy focus on security 🔐
Customer Support 🙌
Available in Dark Mode 🌓

Building Otlio Source

Install Visual Studio Code, NodeJS, and Nodemon
Clone the repository and configure the .env files located in server folder in VSCode
Open Terminal and type yarn in client and server folder to install all missing dependencies
To run the app:
- Client: yarn start
- Server: nodemon

Contributing Guidelines

Before that, we would like to say thank you for your willing to contribute to Otlio! Please take a minute to read contributing guide. Have an idea, found a bug or an issues? Please visit…

View on GitHub

GitHub Code: https://github.com/stanleyowen/todo-application
Website: https://todoapp-task.netlify.app/

If you like this project, be sure to drop a star on GitHub 🌟!

Happy coding! ❤️

Build an Awesome Profile Page with Fire-UI

Stanley Owen — Tue, 19 Jan 2021 10:17:52 +0000

Overview

Why should we have our own Profile Page? Is it Important?

Yes! The importance of having a professional online presence is more important than ever, and an online portfolio will certainly increase your visibility and presence. Creating your portfolio website allows you to share and showcase your work easily with the employers you'd like to work for.

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

Gathering Resources
Getting Started with Fire-UI
Start building your Profile Page
- Setup Fire-UI
- Create Navigation Bar (Navbar)
- Create Marquee
- Design Our Page
- Create Achievements
- 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 or Sublime Text is recommended)
A Search Engine (Google, Mozilla, 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

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

Stanley Owen ・ Dec 19 '20

#css #javascript #opensource

Start creating your website using Fire UI, a user-friendly and reliable CSS framework.

Justin Maximillian Kimlim ・ Jan 4 '21

#css #framework #showdev #contributorswanted

3. Start building your Profile Page

Now it's time to code 😍
First, what we need to do is setup Fire-UI. Now open your text editor and type the basic of HTML:

<!DOCTYPE html>
<html>
<head>
    <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 with file named index.html index.html, then we will start setting up Fire-UI. There are some methods to configure and connect Fire-UI. But in this tutorial, we will keep it fast, which is using CDN through jsdelivr.

Now, add the following code in the head section:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.2/FireUI.min.css">
<!-- Additional CSS -->
<link rel="stylesheet" href="style.css">
<!-- Fire UI Javascript -->
<script src="https://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.2/FireUI.min.js"></script>

Thus, your index.html will now 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="https://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.2/FireUI.min.css">
    <!-- Additional CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- Fire UI Javascript -->
    <script src="https://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.2/FireUI.min.js"></script>
    <title>Landing Page with Fire-UI</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

After that, save the index.html file and run it by only simply click on the file in File Explorer (For Windows User). Find the file that you have just save it recently, run it with your default browser and you will see the result like this:

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

Now, we are going to create Navigation Bar. Before that, make sure to clear the content of the body and paste the Navigation Bar code:

<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>
        <a class="topnav-item" data-switch-theme="light, dark, aqua, sky, phoenix, indigo, teal">Switch theme</a>
    </div>
</div>

This navbar will change the theme of the website when you click on Switch Theme. Now, we are going to build marquee. Marquee is an animation text with certain direction. We can config them by adding marquee-direction inside the marquee tag. For marquee section, we just need to type one line of code:

<div class="box bold"><marquee direction="right" data-speed="7">Welcome to my Profile Page</marquee></div>

It is easy, isn't it? Now let's get into the more challenging part, which is the Welcome Page.

For welcome page, we need to use grid which divides it to a certain width. In this page, we will use col-6, which will divide the screen-width into two parts in desktop view, and full screen on mobile view.

These are the codes for our welcome page:

<div class="container mt-5">
<div class="row">
    <div class="col-6">
        <div class="slideshow-container">
            <div class="slideshow">
                <img src="https://cdn.spacetelescope.org/archives/images/wallpaper2/heic2007a.jpg">
                <span class="slideshow-caption">Caption One</span>
            </div>

            <div class="slideshow slideshow-none">
                <img src="https://images.ctfassets.net/hrltx12pl8hq/4plHDVeTkWuFMihxQnzBSb/aea2f06d675c3d710d095306e377382f/shutterstock_554314555_copy.jpg">
                <span class="slideshow-caption">Caption Two</span>
            </div>

            <div class="slideshow slideshow-none">
                <img src="https://wallpaperaccess.com/full/235804.jpg">
                <span class="slideshow-caption">Caption Three</span>
            </div>

            <a class="slideshow-prevBtn" onclick="btnSlide(-1)">&#10094;</a>
            <a class="slideshow-nextBtn" onclick="btnSlide(1)">&#10095;</a>
        </div>
        <br>

        <div class="slideshow-info">
            <span class="slideshow-dot" onclick="currentSlide(1)"></span>
            <span class="slideshow-dot" onclick="currentSlide(2)"></span>
            <span class="slideshow-dot" onclick="currentSlide(3)"></span>
        </div>
    </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, <span class="tooltip">consectetur<span class="tooltip-data tooltip-top">Hello World</span></span> 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 <span class="tooltip">consectetur<span class="tooltip-data tooltip-top">Hello World</span></span> ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula <span class="tooltip">consectetur<span class="tooltip-data tooltip-top">Hello World</span></span>. 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>

Now our Welcome Page will look like these:

We have done with our welcome part, now let's take a look with our Achievements part. In this part, we will:

Download Some Images (via GitHub)
Create 3 Main Achievements
Create Additional Achievements with CSS Accordion

Firstly, we will need to download an image for our pages. You can visit the link through GitHub : (https://github.com/fire-ui/Profile-Page-Template/raw/v0.2.2/achievements.jpg)[https://github.com/fire-ui/Profile-Page-Template/raw/v0.2.2/achievements.jpg]

Ater that, here are the codes for Achievements part:

<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 <span class="tooltip">adipiscing<span class="tooltip-data tooltip-top">Hello World</span></span> 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 class="accordion btn btn-dark" data-panel = "Section1">Fourth Achievements</div>
    <div class="accordion-panel" id="Section1">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="accordion btn btn-dark" data-panel = "Section2">Fifth Achievements</div>
    <div class="accordion-panel" id="Section2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

Now our Main Achievements' part will look like:

And for our Additional Achievements' will like:

Before continuing further, note that you can access the full code here https://github.com/fire-ui/Profile-Page-Template/

Now we are done with our main part, and we are going to build a contact form. A contact form is a list of information where others can get connected with you. Our simple Contact Form page will look like this:

Copy and paste the following code under the achievement section:

<div class="my-5 py-5" id="contact">
    <div class="box theme-reverse">
        <div class="tab theme-adjust" data-tab = "exampleTab">
            <button class="tab-btn" data-content="contactform">Contact Form</button>
            <button class="tab-btn" data-content= "contactemail">Email</button>
        </div>
        <div class="tab-contents" id="exampleTab">
            <div id="contactform" class="tab-content tab-content-active">
                <p>
                    <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>
                </p>
            </div>
            <div id="contactemail" class="tab-content">
                <h1>Lorem ipsum</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id metus ligula. 
                    Ut neque tortor, vulputate ut placerat id, molestie at risus. Curabitur velit augue, facilisis eu nisi et, 
                    placerat dapibus dui. Etiam tempor nulla mi, a porta nisl sagittis ut. Aenean ullamcorper maximus nulla, rutrum sodales ligula. 
                    Nulla urna dui, efficitur in rutrum a, viverra eu nunc. Ut non rhoncus turpis, at vulputate mauris. Suspendisse et efficitur massa, in aliquam justo.
                </p>
            </div>
        </div>
    </div>
</div>

Now your index.html will now 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="https://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.2/FireUI.min.css">
    <!-- Additional CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- Fire UI Javascript -->
    <script src="https://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.2/FireUI.min.js"></script>
    <link rel="shortcut icon" href="profile-picture.png" type="image/x-icon">
    <title>Hello World!</title>
</head>
<body data-theme="light">
    <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>
            <a class="topnav-item" data-switch-theme="light, dark, aqua, sky, phoenix, indigo, teal">Switch theme</a>
        </div>
    </div>
    <div class="box bold"><marquee direction="right" data-speed="7">Welcome to my Profile Page</marquee></div>
    <div class="container mt-5">
        <div class="row">
            <div class="col-6">
                <div class="slideshow-container">
                    <div class="slideshow">
                        <img src="https://cdn.spacetelescope.org/archives/images/wallpaper2/heic2007a.jpg">
                        <span class="slideshow-caption">Caption One</span>
                    </div>

                    <div class="slideshow slideshow-none">
                        <img src="https://images.ctfassets.net/hrltx12pl8hq/4plHDVeTkWuFMihxQnzBSb/aea2f06d675c3d710d095306e377382f/shutterstock_554314555_copy.jpg">
                        <span class="slideshow-caption">Caption Two</span>
                    </div>

                    <div class="slideshow slideshow-none">
                        <img src="https://wallpaperaccess.com/full/235804.jpg">
                        <span class="slideshow-caption">Caption Three</span>
                    </div>

                    <a class="slideshow-prevBtn" onclick="btnSlide(-1)">&#10094;</a>
                    <a class="slideshow-nextBtn" onclick="btnSlide(1)">&#10095;</a>
                </div>
                <br>

                <div class="slideshow-info">
                    <span class="slideshow-dot" onclick="currentSlide(1)"></span>
                    <span class="slideshow-dot" onclick="currentSlide(2)"></span>
                    <span class="slideshow-dot" onclick="currentSlide(3)"></span>
                </div>
            </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, <span class="tooltip">consectetur<span class="tooltip-data tooltip-top">Hello World</span></span> 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 <span class="tooltip">consectetur<span class="tooltip-data tooltip-top">Hello World</span></span> ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula <span class="tooltip">consectetur<span class="tooltip-data tooltip-top">Hello World</span></span>. 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 <span class="tooltip">adipiscing<span class="tooltip-data tooltip-top">Hello World</span></span> 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 class="accordion btn btn-dark" data-panel = "Section1">Fourth Achievements</div>
            <div class="accordion-panel" id="Section1">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="accordion btn btn-dark" data-panel = "Section2">Fifth Achievements</div>
            <div class="accordion-panel" id="Section2">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>
        <div class="my-5 py-5" id="contact">
            <div class="box theme-reverse">
                <div class="tab theme-adjust" data-tab = "exampleTab">
                    <button class="tab-btn" data-content="contactform">Contact Form</button>
                    <button class="tab-btn" data-content= "contactemail">Email</button>
                </div>
                <div class="tab-contents" id="exampleTab">
                    <div id="contactform" class="tab-content tab-content-active">
                        <p>
                            <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>
                        </p>
                    </div>
                    <div id="contactemail" class="tab-content">
                        <h1>Lorem ipsum</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id metus ligula. 
                            Ut neque tortor, vulputate ut placerat id, molestie at risus. Curabitur velit augue, facilisis eu nisi et, 
                            placerat dapibus dui. Etiam tempor nulla mi, a porta nisl sagittis ut. Aenean ullamcorper maximus nulla, rutrum sodales ligula. 
                            Nulla urna dui, efficitur in rutrum a, viverra eu nunc. Ut non rhoncus turpis, at vulputate mauris. Suspendisse et efficitur massa, in aliquam justo.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Save the index.html and we are almost there! We just need to add some additional CSS for our page.

So let us create a file name with style.css and type the this code:

img{ width: 100% !important; }
.intro-title{ font-size: 3rem; }
.intro-text{ text-align: justify; }
.bold { font-weight: bold; }

Then save it, and ... Tadaa! You have just created your website with Fire-UI. You did it 👏👏.

Some articles you might like:

Create Your Profile Page From Scratch with Fire-UI

Stanley Owen ・ Dec 23 '20

#tutorial #portfolio #html #css

Todo App with MERN Stack (MongoDB, Express, React, Node)

Stanley Owen ・ Nov 15 '20

#javascript #mongodb #react #showdev

Build Landing Page with Fire-UI

Stanley Owen ・ Jan 1 '21

#tutorial #portfolio #html #css

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

I am happy to hear any comments nor feedbacks and Happy Coding !!!

Build Landing Page with Fire-UI

Stanley Owen — Fri, 01 Jan 2021 13:03:20 +0000

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 :

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

Looks pretty awesome right? How about let's us start the journey!

Gather Resources
Getting Started with Fire-UI
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 or Sublime Text is recommended)
A Search Engine (Google, Mozilla, 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

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

Stanley Owen ・ Dec 19 '20

#css #javascript #opensource

To keep it simple and fast, we will move on to the next part.

3. Start building your Landing Page

a. Setup Fire-UI

Now open your text editor and type the basic of 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.

<!-- 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:

<!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:

Find the file that you have just save it recently, run it with your default browser and you will see the result like this:

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

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:

So what we need is:

Remove the content of body
Add the attribute theme = 'light' in the body element
Copy and paste the Navbar code

 <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:

<!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>

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:

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:

<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

Copy and past the following content inside the body element after navbar code:

<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:

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:

<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:

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):

 <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:

As a note, you can visit the full code on 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:

Create Your Profile Page From Scratch with Fire-UI

Stanley Owen ・ Dec 23 '20

#tutorial #portfolio #html #css

Todo App with MERN Stack (MongoDB, Express, React, Node)

Stanley Owen ・ Nov 15 '20

#javascript #mongodb #react #showdev

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

Happy Coding!

Create Your Profile Page From Scratch with Fire-UI

Stanley Owen — Wed, 23 Dec 2020 08:51:03 +0000

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.

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

Stanley Owen ・ Dec 19 '20

#css #javascript #opensource

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">&#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>

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">&#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>

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>

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!

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

Stanley Owen — Sat, 19 Dec 2020 12:35:20 +0000

Quickly design your website with Fire-UI, a FREE, User-Friendly, and RELIABLE CSS Framework. Fire-UI is an open source project aimed to cope with any difficulties usually found by developers on Frontend.

"Built by everyone, for everyone."

Fire-UI is created under MIT LICENSE. For Docs (Documentation), you can visit https://fire-ui.github.io/index.html

Code on GitHub : https://github.com/fire-ui/fire-ui
How to Contribute : https://github.com/fire-ui/fire-ui#contributing-guidelines
Support us on GitHub By Giving A Star : https://github.com/fire-ui/fire-ui

For Complete Guide, you can click the following link : https://github.com/fire-ui/fire-ui#readme

I appreciate any comments, contributions, even a star (≧∇≦)ﾉ.
Have a Nice Day (^▽^)┛.

Todo App with MERN Stack (MongoDB, Express, React, Node)

Stanley Owen — Sun, 15 Nov 2020 09:37:08 +0000

Hello World, this is my first project for MERN Stack, TodoApp. Although it is simple, it is an appreciation to leave any suggestion or comment to improve this apps.

If you like the article, don't forget to give a star on https://github.com/stanleyowen/TodoApp

Happy Coding!

Todo Application - An Open Source and Easy to Use Web Application

Stanley Owen ・ Feb 7 '21

#showdev #javascript #webdev #productivity

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

Stanley Owen ・ Dec 19 '20

#css #javascript #opensource

DEV Community: Stanley Owen

I Wrote A Lo-Fi Player, Loofi with Typescript

Features:

About:

Links:

Introducing Otlio, a Powerful Todo List 🚀

Features

Happy Coding! 🎉

✨Build a Login and Register Form with HTML and CSS✨

Stanley Owen ・ Mar 3 '21

Todo Application - An Open Source and Easy to Use Web Application

Stanley Owen ・ Feb 7 '21

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

Stanley Owen ・ Dec 19 '20

✨Build a Login and Register Form with HTML and CSS✨

Table of Contents

1. Gather Resources

2. Getting Started with Fire-UI

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

Stanley Owen ・ Dec 19 '20

3. Start building your Landing Page

a. Setup Fire-UI

Happy Coding! 🎉

Todo Application - An Open Source and Easy to Use Web Application

Stanley Owen ・ Feb 7 '21

AbstractMark, the modern markdown language.

Justin Maximillian Kimlim ・ Feb 15 '21

Build an Awesome Profile Page with Fire-UI

Stanley Owen ・ Jan 19 '21

Todo Application - An Open Source and Easy to Use Web Application

stanleyowen / otlio

An open source project of Todo which is easy to use and easy to organize!

🚀 Otlio - A Powerful Todo List

Feature

Building Otlio Source

Contributing Guidelines

If you like this project, be sure to drop a star on GitHub 🌟!

Happy coding! ❤️

Build an Awesome Profile Page with Fire-UI

Overview

Table of Contents

1. Gather Resources

2. Getting Started with Fire-UI

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

Stanley Owen ・ Dec 19 '20

Start creating your website using Fire UI, a user-friendly and reliable CSS framework.

Justin Maximillian Kimlim ・ Jan 4 '21

3. Start building your Profile Page

Create Your Profile Page From Scratch with Fire-UI

Stanley Owen ・ Dec 23 '20

Todo App with MERN Stack (MongoDB, Express, React, Node)

Stanley Owen ・ Nov 15 '20

Build Landing Page with Fire-UI

Stanley Owen ・ Jan 1 '21

Build Landing Page with Fire-UI

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

Table of Contents

1. Gather Resources

2. Getting Started with Fire-UI

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

Stanley Owen ・ Dec 19 '20

3. Start building your Landing Page

a. Setup Fire-UI

b. Create Navigation Bar

c. Create About Us

c. Create Main Part (Our Products)

Finishing (Contact Us)

Create Your Profile Page From Scratch with Fire-UI

Stanley Owen ・ Dec 23 '20

Todo App with MERN Stack (MongoDB, Express, React, Node)

Stanley Owen ・ Nov 15 '20

Create Your Profile Page From Scratch with Fire-UI

Overview

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

Stanley Owen ・ Dec 19 '20

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