Frontend Development – CodingNepal

Create Website with Login & Registration Form in HTML CSS and JavaScript

CodingNepal — Thu, 31 Aug 2023 18:33:30 +0000

If you’re new to web development, creating a website with login and registration forms is an excellent way to learn and practice basic skills like designing a navigation menu bar, creating a website homepage, and building login and registration forms.

In this blog post, I’ll guide you through the process of creating a responsive website with login and registration forms using HTML, CSS, and JavaScript. By completing this project, you’ll gain practical experience and learn essential web development concepts like DOM manipulation, event handling, conditional statements, and more.

In this project, the website’s homepage features a navigation bar and a login button. When you click on the button, a login form will popup with a cool blurred background effect. The form has an image on the left and input fields on the right side. If you want to sign up instead, simply click on the sign-up link and you’ll be taken to the registration form.

The website’s navigation bar and forms are completely responsive. This means that the content will adjust to fit any screen size. On a smaller screen, the navigation bar will pop up from the right side when the hamburger button is clicked and in the forms the left image section will remain hidden.

Video Tutorial of Website with Login & Registration Form

If you enjoy learning through video tutorials, the above YouTube video is an excellent resource. In this video, I’ve explained each line of code and included informative comments to make the process of creating your own website with login and registration forms beginner-friendly and easy to follow.

However, if you like reading blog posts or want a step-by-step guide for this project, you can continue reading this post. By the end of this post, you’ll have your own website with forms that are simple to customize and implement into your other projects.

Steps to Create Website with Login & Registration Form

To create a responsive website with login and registration forms using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:

First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css to hold the CSS code.
Create a file called script.js to hold the JavaScript code.
Finally, download the Images folder and place it in your project directory. This folder contains all the images you’ll need for this project.

To start, add the following HTML codes to your index.html file. These codes include all essential HTML elements, such as header, nav, ul, form, and more for the project.





    
    
    Website with Login and Registration Form | CodingNepal
    
    
    
    


    
        
            menu
            
                
                CodingNepal
            
            
                close
                Home
                Portfolio
                Courses
                About us
                Contact us
            
            
        
    

    
    
        close
        
            
                Welcome Back
                Please log in using your personal information to stay connected with us.
            
            
                LOGIN
                
                    
                        
                        Email
                    
                    
                        
                        Password
                    
                    Forgot password?
                    
                
                
                    Don't have an account?
                    Signup
                
            
        
        
            
                Create Account
                To become a part of our community, please sign up using your personal information.
            
            
                SIGNUP
                
                    
                        
                        Enter your email
                    
                    
                        
                        Create password
                    
                    
                        
                        
                            I agree the
                            Terms & Conditions
                        
                    
                    
                
                
                    Already have an account? 
                    Login

Next, add the following CSS codes to your style.css file to apply visual styling to your website and forms. You can experiment with different CSS properties like colors, fonts, and backgrounds to give a unique touch to your website.

/* Importing Google font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

body {
    height: 100vh;
    width: 100%;
    background: url("images/hero-bg.jpg") center/cover no-repeat;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 0 10px;
}

.navbar {
    display: flex;
    padding: 22px 0;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
}

.navbar .hamburger-btn {
    display: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
}

.navbar .logo {
    gap: 10px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar .logo img {
    width: 40px;
    border-radius: 50%;
}

.navbar .logo h2 {
    color: #fff;
    font-weight: 600;
    font-size: 1.7rem;
}

.navbar .links {
    display: flex;
    gap: 35px;
    list-style: none;
    align-items: center;
}

.navbar .close-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    display: none;
    color: #000;
    cursor: pointer;
}

.navbar .links a {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.1s ease;
}

.navbar .links a:hover {
    color: #19e8ff;
}

.navbar .login-btn {
    border: none;
    outline: none;
    background: #fff;
    color: #275360;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.15s ease;
}

.navbar .login-btn:hover {
    background: #ddd;
}

.form-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    max-width: 720px;
    background: #fff;
    border: 2px solid #fff;
    transform: translate(-50%, -70%);
}

.show-popup .form-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.1s;
}

.form-popup .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #878484;
    cursor: pointer;
}

.blur-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.1s ease;
}

.show-popup .blur-bg-overlay {
    opacity: 1;
    pointer-events: auto;
}

.form-popup .form-box {
    display: flex;
}

.form-box .form-details {
    width: 100%;
    color: #fff;
    max-width: 330px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login .form-details {
    padding: 0 40px;
    background: url("images/login-img.jpg");
    background-position: center;
    background-size: cover;
}

.signup .form-details {
    padding: 0 20px;
    background: url("images/signup-img.jpg");
    background-position: center;
    background-size: cover;
}

.form-box .form-content {
    width: 100%;
    padding: 35px;
}

.form-box h2 {
    text-align: center;
    margin-bottom: 29px;
}

form .input-field {
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: 20px;
}

.input-field input {
    height: 100%;
    width: 100%;
    background: none;
    outline: none;
    font-size: 0.95rem;
    padding: 0 15px;
    border: 1px solid #717171;
    border-radius: 3px;
}

.input-field input:focus {
    border: 1px solid #00bcd4;
}

.input-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #4a4646;
    pointer-events: none;
    transition: 0.2s ease;
}

.input-field input:is(:focus, :valid) {
    padding: 16px 15px 0;
}

.input-field input:is(:focus, :valid)~label {
    transform: translateY(-120%);
    color: #00bcd4;
    font-size: 0.75rem;
}

.form-box a {
    color: #00bcd4;
    text-decoration: none;
}

.form-box a:hover {
    text-decoration: underline;
}

form :where(.forgot-pass-link, .policy-text) {
    display: inline-flex;
    margin-top: 13px;
    font-size: 0.95rem;
}

form button {
    width: 100%;
    color: #fff;
    border: none;
    outline: none;
    padding: 14px 0;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    margin: 25px 0;
    background: #00bcd4;
    transition: 0.2s ease;
}

form button:hover {
    background: #0097a7;
}

.form-content .bottom-link {
    text-align: center;
}

.form-popup .signup,
.form-popup.show-signup .login {
    display: none;
}

.form-popup.show-signup .signup {
    display: flex;
}

.signup .policy-text {
    display: flex;
    margin-top: 14px;
    align-items: center;
}

.signup .policy-text input {
    width: 14px;
    height: 14px;
    margin-right: 7px;
}

@media (max-width: 950px) {
    .navbar :is(.hamburger-btn, .close-btn) {
        display: block;
    }

    .navbar {
        padding: 15px 0;
    }

    .navbar .logo img {
        display: none;
    }

    .navbar .logo h2 {
        font-size: 1.4rem;
    }

    .navbar .links {
        position: fixed;
        top: 0;
        z-index: 10;
        left: -100%;
        display: block;
        height: 100vh;
        width: 100%;
        padding-top: 60px;
        text-align: center;
        background: #fff;
        transition: 0.2s ease;
    }

    .navbar .links.show-menu {
        left: 0;
    }

    .navbar .links a {
        display: inline-flex;
        margin: 20px 0;
        font-size: 1.2rem;
        color: #000;
    }

    .navbar .links a:hover {
        color: #00BCD4;
    }

    .navbar .login-btn {
        font-size: 0.9rem;
        padding: 7px 10px;
    }
}

@media (max-width: 760px) {
    .form-popup {
        width: 95%;
    }

    .form-box .form-details {
        display: none;
    }

    .form-box .form-content {
        padding: 30px 20px;
    }
}

After applying the styles, load the webpage in your browser to view your website. The forms are currently hidden and will only appear later using JavaScript. Now, you will only see the website with the navigation bar and hero image.

Finally, add the following JavaScript code to your script.js file. The code contains click event listeners which can toggle classes on various HTML elements. Although the code is simple and easy to understand, it is recommended to watch the video tutorial above, pay attention to the code comments, and experiment with the code for better understanding.

const navbarMenu = document.querySelector(".navbar .links");
const hamburgerBtn = document.querySelector(".hamburger-btn");
const hideMenuBtn = navbarMenu.querySelector(".close-btn");
const showPopupBtn = document.querySelector(".login-btn");
const formPopup = document.querySelector(".form-popup");
const hidePopupBtn = formPopup.querySelector(".close-btn");
const signupLoginLink = formPopup.querySelectorAll(".bottom-link a");

// Show mobile menu
hamburgerBtn.addEventListener("click", () => {
    navbarMenu.classList.toggle("show-menu");
});

// Hide mobile menu
hideMenuBtn.addEventListener("click", () =>  hamburgerBtn.click());

// Show login popup
showPopupBtn.addEventListener("click", () => {
    document.body.classList.toggle("show-popup");
});

// Hide login popup
hidePopupBtn.addEventListener("click", () => showPopupBtn.click());

// Show or hide signup form
signupLoginLink.forEach(link => {
    link.addEventListener("click", (e) => {
        e.preventDefault();
        formPopup.classList[link.id === 'signup-link' ? 'add' : 'remove']("show-signup");
    });
});

Conclusion and Final words

In conclusion, creating a website’s homepage that features forms is a hands-on experience to learn various website components and fundamental web development concepts. I believe that by following the steps outlined in this blog post, you’ve successfully created your own website with login and registration forms using HTML, CSS, and JavaScript.

To further improve your web development skills, I recommend you try recreating other websites and login form projects available on this website. This will give you a better understanding of how HTML, CSS, and JavaScript are used to create unique website components.

If you encounter any problems while creating your website with forms, you can download the source code files for this project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.

Create Text Typing Effect in HTML CSS and Vanilla JavaScript

CodingNepal — Thu, 03 Aug 2023 07:10:59 +0000

Have you ever come across that cool text typing effect on different websites where the words appear as if they’re being typed out? If you’re a beginner web developer, you might wonder how to create such an eye-catching animation on your own. Well, it’s a simple yet impressive effect that can be achieved using just HTML, CSS, and JavaScript.

In this blog post, I’ll guide you through the steps of creating this text-typing animation using HTML, CSS, and Vanilla JavaScript. This means we don’t rely on any external JavaScript libraries like typed.js. So you’ll gain a deep understanding of how this type of typing animation is created and how you can apply your skills to real-world web projects.

In this typing animation, each letter of the word appears after the other, creating a typewriter effect. There is also a blinking caret animation at the end of the word to make the effect more attractive. To know more about what our typing text animation looks like, you can watch the given YouTube video.

Video Tutorial of Text Typing Effect HTML & JavaScript

If you enjoy learning through video tutorials, the above YouTube video is an excellent resource. In the video, I’ve explained each line of code and provided informative comments to make the process of creating your own text-typing animation beginner-friendly and easy to follow.

However, if you like reading blog posts or want a step-by-step guide for creating this effect, you can continue reading this post. By the end of this post, you’ll have your own customizable text typing effect that you can easily use on your other projects.

Steps to Create Text Typing Animation in HTML & JavaScript

To create a custom text typing effect using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file. This code includes essential HTML markup with

and tags, which we’ll use for the typing effect. Currently, the element is empty, but using JavaScript, we’ll dynamically add the custom typing word.





    
    
    Typing Text Effect | CodingNepal
    
    


    Coding is

Next, add the following CSS codes to your style.css file to apply visual styling to your text like color, font, border, background, etc. Now, if you load the web page in your browser, you will see styled static text with blinking caret animation.

/* Importing Google font - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

body {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background: #1D1E23;
}

h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
}

h1 span {
    color: #BD53ED;
    position: relative;
}

h1 span::before {
    content: "";
    height: 30px;
    width: 2px;
    position: absolute;
    top: 50%;
    right: -8px;
    background: #BD53ED;
    transform: translateY(-45%);
    animation: blink 0.7s infinite;
}

h1 span.stop-blinking::before {
    animation: none;
}

@keyframes blink {
    50% { opacity: 0 }
}

Finally, add the following JavaScript code to your script.js file. These scripts include different JavaScript functions, variables, methods, and others that are responsible for creating the text-typing effect.

const dynamicText = document.querySelector("h1 span");
const words = ["Love", "like Art", "the Future", "Everything"];

// Variables to track the position and deletion status of the word
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;

const typeEffect = () => {
    const currentWord = words[wordIndex];
    const currentChar = currentWord.substring(0, charIndex);
    dynamicText.textContent = currentChar;
    dynamicText.classList.add("stop-blinking");

    if (!isDeleting && charIndex < currentWord.length) {
        // If condition is true, type the next character
        charIndex++;
        setTimeout(typeEffect, 200);
    } else if (isDeleting && charIndex > 0) {
        // If condition is true, remove the previous character
        charIndex--;
        setTimeout(typeEffect, 100);
    } else {
        // If word is deleted then switch to the next word
        isDeleting = !isDeleting;
        dynamicText.classList.remove("stop-blinking");
        wordIndex = !isDeleting ? (wordIndex + 1) % words.length : wordIndex;
        setTimeout(typeEffect, 1200);
    }
}

typeEffect();

In the above code, you can see there is a “words” array that contains a list of phrases used for the typing animation, some global variables used to track typing status, and a function with an if/else condition to initiate the typing and erasing effects. To understand JavaScript code better, I recommend watching the above video tutorial, paying close attention to the code comments, and experimenting with the code.

Conclusion and Final words

In conclusion, creating a text typing animation is a valuable and useful web project. I believe that by following the steps outlined in this blog post, you’ve successfully created your own text-typing effect using HTML, CSS, and JavaScript.

To further improve your web development skills, I recommend you try recreating the same text-typing animation using only HTML and CSS. By creating this effect, you’ll gain a better understanding of how CSS properties and animations are used to create cool text typing effects.

If you encounter any problems while creating your text-typing effect, you can download the source code files for this project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

React vs Angular: Which is best for Frontend Development?

CodingNepal — Fri, 09 Dec 2022 14:06:06 +0000

There are numerous JavaScript frameworks and libraries on the market. But choosing the right one for your application can be a critical decision that can significantly impact your application’s success. On the other hand, choosing the wrong framework can lead to problems and limitations for your application.

So, if you’re confused between React and Angular, which can be the best front-end framework for you? Please continue reading this blog. In this blog post, I’ll explain what React and Angular are, how they are different from each other, and which can be best for your application.

React and Angular are both popular choices and widely used JavaScript frameworks for building single-page applications. A single-page application, or SPA, is a web application or website that loads a single HTML page and dynamically updates the body content of that page via JavaScript APIs.

Using one of these frameworks will help users get a seamless experience on the app because it doesn’t load a new page every time from the server, which reduces the page load time significantly.

What is React, and what does it do?

React is a free, open-source, front-end JavaScript library used for building user interfaces. It was created by Facebook and was initially released in 2013. React is used for building reusable UI (user interface) components, which makes it painless to create interactive UIs for a web application.

React is used by many large companies and organizations. Some of the best-known companies are Facebook, Instagram, Netflix, Uber, and Airbnb. React is famous for its flexible and powerful library for building user interfaces and its large community of React developers. Developers also refer to React as ReactJS or React.js.

There are many pros to React, but some of them are listed below:

It is easy to learn and use, especially if you’re familiar with JavaScript fundamentals.
It uses virtual DOM which makes React more efficient and powerful at rendering changes in the UI.
It has a large ecosystem of third-party libraries, including Redux, Router, and Axios.
It allows for server-side rendering, which can improve the application’s loading time.
It is a cross-platform technology used to create desktop, web, and mobile web application UIs.

What is Angular, and what does it do?

Angular is a complete and full-featured front-end JavaScript framework for building web applications. It was created by Google and was first released in 2009. Angular is used for building single-page applications as well as complex web applications because it provides a set of tools and features that make applications easy to build and maintain.

Top companies like Google, Gmail, Paypal, Forbes, Upwork, and more use Angular as their front-end framework. Angular’s popularity comes from its ease of use, ability to manage complex web applications, and huge and active community of developers contributing to its development. It is also known as AngularJS or Angular.js.

There are many pros to Angular, but some of them are listed below:

It uses a declarative approach which means developers only need to define what they want, and the rest will be taken care of by Angular.
Its performance and stability are top-notch.
It supports testing features and tools for developers that ensure their code is working as expected.
It allows developers to build reusable components that make it easier to create complex and scalable web applications.
It is supported by a large and active community of developers.

Differences between React and Angular

There are several differences between React and Angular. But some key differences between them are pointed out below.

React	Angular
It is a JavaScript library that works on the View Layer.	It is a JavaScript framework combined with Model View Controller.
It is used for building composable User Interfaces (UIs).	It is used for building Complex Web Applications.
More third-party libraries are required.	All necessary libraries are pre-installed.
It uses a Virtual DOM that works efficiently.	It works less efficiently because it uses Real DOM.
It is created and maintained by Facebook.	It is created and maintained by Google.

Which framework should you use?

As you are now aware, what are React and Angular and their differences? Both frameworks are used for different purposes and have different features. So it depends on what you’re trying to do and what your requirements and goals are for your project.

React can be the best choice if you are familiar with JavaScript fundamentals and want to build a lightweight SPA web application that is simple and does not require complex logic.

If you are familiar with TypeScript and want to build a large, complex, and data-intensive web application, Angular can be your best choice. But before choosing any of these frameworks, it’s essential to carefully evaluate your interests, skills, requirements, and goals for your project.

There is also a lot of confusion among developers when choosing Node.js or PHP for backend development. If you’re one of them, you might find this blog helpful: PHP vs. Nodejs- Which is Best for Backend Development?

If you find this blog post helpful, please consider sharing it with others.