How To Make A Website With Login And Register | Html CSS and JavaScript

How To Make A Website With Login And Register | Html CSS and JavaScript

In the vast landscape of web development, the ability to create a website with user registration and login functionality is a cornerstone skill. "How To Make A Website With Login And Register | HTML, CSS, and JavaScript" is a tutorial that opens the door to the exciting world of web development, guiding you through the process of building a feature-rich website with user authentication capabilities.

This tutorial empowers you to take control of your web development journey, leveraging the power of HTML, CSS, and JavaScript to create a fully functional website that offers a seamless user experience.

By the end of this tutorial, you'll have the knowledge and practical skills needed to build a website that enables users to register, log in, and interact with web content securely. So, let's embark on this web development adventure and bring your creative ideas to life in the digital realm.


If interested in watching the video before running the code below, you can click the play button to get started.

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 for the CSS code.

Create a file called script.js for the JavaScript code.

Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.

To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout. 


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEBSITE</title>
</head>
<body>
    
    <div class="overlay"></div>

    <header>
        <div class="logo"><h1>Logo</h1></div>
        <div class="anchors">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Service</a></li>
                <li><a href="">Contact</a></li>
                <li class="login login_a"><a href="">Login</a></li>
            </ul>
        </div>
    </header>

    <div class="forms">
        <div class="loginform">
            <div class="exit"><img src="close.png" alt="" class="exit_btn"></div>
            <h1>Login</h1>
            <form class="loginForm">
                <div class="email">
                    <input type="text" placeholder="Email">
                    <img src="mail.png" alt="">
                </div>
                <div>
                    <input type="password" placeholder="Password">
                    <img src="key.png" alt="">
                </div>
                <div class="options">
                    <div>
                        <input type="checkbox">
                        <span>Rememeber me</span>
                    </div>
                    <div>
                        <a href="">Forgot Password?</a>
                    </div>
                </div>
                <div class="button">
                    <input type="submit" value="Login">
                </div>
                <div class="register">
                    <p>Don't have an account? <a href="" class="signup_a">Register</a></p>
                </div>
            </form>
        </div>

        <div class="register_form loginform none">
            <div class="exit"><img src="close.png" alt="" class="exit_btn"></div>
            <h1>Register</h1>
            <form class="loginForm">
                <div class="email">
                    <input type="text" placeholder="Email">
                    <img src="mail.png" alt="">
                </div>
                <div class="email">
                    <input type="password" placeholder="Password">
                    <img src="key.png" alt="">
                </div>
                <div>
                    <input type="password" placeholder="Confirm Password">
                    <img src="key.png" alt="">
                </div>
                <div class="options options_2">
                    <div>
                        <input type="checkbox">
                        <span>I have read and accept our <a href="">Terms</a> and <a href="">Privacy Policy</a></span>
                    </div>
                    <div>
                        <input type="checkbox">
                        <span>Send me email and notifications</span>
                    </div>
                </div>
                <div class="button">
                    <input type="submit" value="Register">
                </div>
                <div class="register">
                    <p>Already have an account? <a href="" class="login_a">Login</a></p>
                </div>
            </form>
        </div>
    </div>
</body>
</html>


Next, add the following CSS codes to your style.css file to make your AI image generator website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website. Now, if you load the web page in your browser, you can see your AI image generator website with four preloaded images.



* {
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    background-image: url(deer.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    font-family: "Arial", sans-serif;
    overflow-y: hidden;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    z-index: -1;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    position: relative;
    top: 20px;
    z-index: 1000;
}

.logo h1 {
    color: #fff;
    font-weight: bold;
}

.anchors ul {
    list-style: none;
}

.anchors ul li {
    display: inline;
    margin: 0 20px;
}

.anchors ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

.login {
    border: 2px solid #fff;
    padding: 10px 20px;
    border-radius: 3px;
}

.forms {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    top: -40px;
}

.loginform {
    padding: 20px;
    padding-top: 30px;
    background: transparent;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 20px;
    overflow: hidden;
    transition: 1s;
    transform: scale(0.5);
    opacity: 0;
}

.exit {
    position: absolute;
    top: 1px;
    right: 1px;
    background: rgba(0, 0, 0, .7);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.exit img {
    width: 17px;
    filter: invert(100%);
    cursor: pointer;
}

.loginform h1 {
    text-align: center;
    color: #fff;
}

form {
    margin-top: 20px;
    width: 400px;
}

form div {
    position: relative;
    margin-bottom: 20px;
}

form div input {
    background: transparent;
    border: none;
    outline: none;
    border-bottom: 2px solid #fff;
    width: 100%;
    color: #fff;
    padding-bottom: 10px;
    padding-left: 5px;
}

form div input::placeholder {
    color: #fff;
    font-weight: bold;
}

form div img {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 20px;
    filter: invert(100%);
}

.email {
    margin-bottom: 30px;
}

.options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.options input {
    width: auto;
}

.options a {
    color: rgba(255, 255, 255, .3);
    text-decoration: none;
    font-weight: bold;
    transition: 0.5s;
}

.options a:hover {
    color: #fff;
}

/* .button {
    margin: 40px 0;
} */

.button input {
    background: rgba(0, 0, 0, .9);
    padding: 15px;
    border-bottom: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 17px;
    font-weight: bold;
}

.register {
    text-align: center;
    color: #fff;
}

.register a {
    text-decoration: none;
    color: rgba(255, 255, 255, .3);
    transition: 0.5s;
}

.register a:hover {
    color: #fff;
}

.options_2 {
    display: block;
}

.register_form {
    /* pointer-events: none;
    opacity: 0; */
    position: absolute;
    transition: 1s;
    transform: scale(0);
    opacity: 0;
}
    


Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.



const allLogins = document.querySelectorAll(".login_a");

        const allSignUps = document.querySelectorAll(".signup_a");

        allSignUps.forEach(eachLinks => {
            eachLinks.addEventListener("click", e => {
                e.preventDefault();
                const loginForm = document.querySelector(".loginform");
                const registerForm = document.querySelector(".register_form");
                loginForm.style.transform = "scale(0.5)";
                loginForm.style.opacity = "0";

                registerForm.style.transform = "scale(1)";
                registerForm.style.opacity = 1;
            })
        })

        allLogins.forEach(eachLinks => {
            eachLinks.addEventListener("click", e => {
                e.preventDefault();
                const loginForm = document.querySelector(".loginform");
                const registerForm = document.querySelector(".register_form");
                loginForm.style.transform = "scale(1)";
                loginForm.style.opacity = "1";

                registerForm.style.transform = "scale(0)";
                registerForm.style.opacity = 0;
            })
        })

        const exitBtn = document.querySelectorAll(".exit_btn");
        exitBtn.forEach(exit => {
            exit.addEventListener("click", e => {
                const loginForm = document.querySelector(".loginform");
                const registerForm = document.querySelector(".register_form");
                loginForm.style.transform = "scale(0)";
                loginForm.style.opacity = "0";

                registerForm.style.transform = "scale(0)";
                registerForm.style.opacity = 0;
            })
        })


To understand the JavaScript code better, I recommend watching the above video tutorial, reading the code comments, and experimenting with the code.

Conclusion and Final words

In conclusion, creating your own website password validation checker.

I recommend watching the above video if you still have any confusion on the code.

By following the steps outlined in this article, I believe that you have successfully learnt and created your own website login and registration form. Feel free to practice more on this, enhance your skills to improve more on being a good programmer. This is used in most of the websites so having it as a skill will help boost your productivity.

Post a Comment

0 Comments

Close Menu