Hellcode Watch on YouTube

Double Slider Registration and Login Page dengan HTML CSS Javascript Tutorial

3 min read 3 months ago
Published on Nov 20, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, we will create a double slider registration and login page using HTML, CSS, and JavaScript. This project is ideal for beginners looking to enhance their web development skills. By the end of this tutorial, you will have a functional and visually appealing login and registration page.

Step 1: Set Up the HTML Structure

Start by creating the basic structure of your HTML document.

  1. Open your code editor and create a new HTML file.
  2. Add the following code to set up the document structure:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Slider Registration and Login</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="slider">
            <div class="login-form">
                <h2>Login</h2>
                <form>
                    <input type="text" placeholder="Username" required>
                    <input type="password" placeholder="Password" required>
                    <button type="submit">Login</button>
                </form>
                <p>Don't have an account? <span id="register-link">Register</span></p>
            </div>
            <div class="registration-form">
                <h2>Register</h2>
                <form>
                    <input type="text" placeholder="Username" required>
                    <input type="email" placeholder="Email" required>
                    <input type="password" placeholder="Password" required>
                    <button type="submit">Register</button>
                </form>
                <p>Already have an account? <span id="login-link">Login</span></p>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 2: Style with CSS

Next, we will style the page to make it visually appealing.

  1. Create a new CSS file called styles.css.
  2. Add the following styles to your CSS file:
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.slider {
    width: 400px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.5s ease;
}

.login-form, .registration-form {
    padding: 20px;
}

h2 {
    margin-bottom: 20px;
}

input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

Step 3: Implement JavaScript Functionality

Now we will add JavaScript to handle the sliding effect between the login and registration forms.

  1. Create a new JavaScript file called script.js.
  2. Add the following code to enable the sliding effect:
const registerLink = document.getElementById('register-link');
const loginLink = document.getElementById('login-link');
const slider = document.querySelector('.slider');

registerLink.addEventListener('click', () => {
    slider.style.transform = 'translateX(-100%)';
});

loginLink.addEventListener('click', () => {
    slider.style.transform = 'translateX(0)';
});

Conclusion

You've successfully built a double slider registration and login page using HTML, CSS, and JavaScript. This project not only demonstrates fundamental web development skills but also enhances user experience with the sliding feature.

Next Steps

  • Customize the design by adding images or changing colors.
  • Implement form validation to enhance usability.
  • Explore backend integration for a fully functional registration and login system.

Feel free to adapt this tutorial further based on your preferences and needs. Happy coding!

Table of Contents

Recent