Simple Login Page: HTML & CSS CodePen Tutorial

Nov 12, 2025 by Alex Braham 47 views

Let's dive into creating a simple login page using HTML and CSS on CodePen! This tutorial is perfect for beginners looking to understand the basics of web design and front-end development. We'll walk through the process step-by-step, ensuring you grasp each concept along the way. So, grab your favorite code editor (or just use CodePen directly), and let’s get started!

Setting Up the HTML Structure

First off, we need to set up the basic HTML structure for our simple login page. HTML, or HyperText Markup Language, is the backbone of any webpage. It provides the structure and content. We’ll start with the essential tags: <!DOCTYPE html>, <html>, <head>, and <body>. The <!DOCTYPE html> declaration tells the browser that this is an HTML5 document. The <html> tag is the root element of the page, and it contains all other elements. Inside the <head> section, we'll include metadata like the title of the page, character set, and links to our CSS stylesheet. The <body> section is where we'll add the actual content of our login page, such as the form, input fields, and buttons.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Login Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="login-container">
        <form class="login-form">
            <h2>Login</h2>
            <div class="input-group">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
        </form>
    </div>
</body>
</html>

Diving Deeper into HTML Elements

Let's break down the key HTML elements we're using. The <div class="login-container"> is a container that wraps our entire login form, allowing us to easily style and position it using CSS. Inside this container, we have a <form class="login-form"> element, which is responsible for handling user input. The <form> element includes a heading <h2>Login</h2> to clearly indicate the purpose of the page. We then have two <div class="input-group"> elements, each containing a <label> and an <input> field. The <label> elements provide a user-friendly description for each input field, while the <input> elements allow users to enter their username and password. The type attribute of the <input> elements specifies the type of input expected (text for username and password for password). The required attribute ensures that users must fill in these fields before submitting the form. Finally, we have a <button type="submit"> element, which triggers the form submission when clicked. This structured approach to HTML ensures that our login page is both functional and accessible.

Styling with CSS

Now that we have the basic HTML structure, let’s make our simple login page look presentable with CSS. CSS, or Cascading Style Sheets, is used to control the visual appearance of HTML elements. We’ll start by creating a style.css file and linking it to our HTML document using the <link> tag in the <head> section. We'll then use CSS selectors to target specific HTML elements and apply styles such as colors, fonts, sizes, and layout properties. Let's begin by styling the body and the main container to center the login form on the page.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

.login-form h2 {
    text-align: center;
    color: #333;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #666;
}

.input-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    background-color: #4caf50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

button:hover {
    background-color: #45a049;
}

CSS Styling Breakdown

Let's break down the CSS styles we've applied. The body styles set the font, background color, and use flexbox to center the login container both horizontally and vertically. The .login-container styles define the background color, padding, border-radius, box-shadow, and width of the container. The h2 styles center the text and set the color. The .input-group styles add margin to separate the input fields. The .input-group label styles set the display to block and add margin below the labels. The .input-group input styles set the width, padding, border, and border-radius for the input fields. Finally, the button styles set the background color, text color, padding, border, border-radius, and cursor style for the login button. The :hover pseudo-class changes the background color of the button on hover, providing visual feedback to the user. This combination of CSS styles creates a clean and modern login page design.

Adding Interactivity with JavaScript (Optional)

While our simple login page is functional with just HTML and CSS, you can enhance it further with JavaScript. JavaScript allows you to add interactivity and dynamic behavior to your webpage. For example, you can use JavaScript to validate user input, display error messages, or handle form submission asynchronously. Here’s a basic example of how you can add JavaScript to validate the login form:

const loginForm = document.querySelector('.login-form');

loginForm.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the default form submission

    const usernameInput = document.querySelector('#username');
    const passwordInput = document.querySelector('#password');

    const username = usernameInput.value.trim();
    const password = passwordInput.value.trim();

    if (username === '' || password === '') {
        alert('Please enter both username and password.');
        return;
    }

    // Here you can add your logic to submit the form data to the server
    alert('Login successful!');
});

JavaScript Explanation

In this JavaScript code, we first select the login form using document.querySelector('.login-form'). We then add an event listener to the form that listens for the submit event. When the form is submitted, the event listener function is executed. Inside the function, we prevent the default form submission using event.preventDefault(). We then select the username and password input fields using document.querySelector('#username') and document.querySelector('#password'), respectively. We retrieve the values entered by the user using .value and trim any leading or trailing whitespace using .trim(). We then check if either the username or password is empty. If either field is empty, we display an alert message to the user and return from the function. If both fields are filled, we can add our logic to submit the form data to the server. In this example, we simply display an alert message indicating that the login was successful. This is a basic example, and you can customize the JavaScript code to fit your specific needs.

Putting It All Together on CodePen

Now that we have our HTML, CSS, and JavaScript code, let’s put it all together on CodePen. CodePen is an online code editor that allows you to write and share HTML, CSS, and JavaScript code. It’s a great tool for prototyping and experimenting with web design ideas. To create a simple login page on CodePen, simply go to CodePen and create a new pen. Then, copy and paste your HTML code into the HTML editor, your CSS code into the CSS editor, and your JavaScript code into the JS editor. CodePen will automatically update the preview as you type, allowing you to see your changes in real-time. You can then share your pen with others or embed it on your website.

CodePen Tips and Tricks

Here are a few tips and tricks for using CodePen effectively. You can use CodePen’s built-in features to add external libraries and frameworks, such as Bootstrap, jQuery, and React. You can also use CodePen’s preprocessor support to write CSS using Sass or Less, and JavaScript using Babel or TypeScript. CodePen also allows you to collaborate with others in real-time, making it a great tool for team projects. Finally, CodePen has a vibrant community of developers who share their code and provide feedback, so be sure to explore the CodePen community and learn from others. Using CodePen makes the process of creating and sharing web design projects incredibly easy and efficient.

Conclusion

In this tutorial, we’ve walked through the process of creating a simple login page using HTML, CSS, and JavaScript on CodePen. We started by setting up the basic HTML structure, then styled it with CSS, and finally added interactivity with JavaScript. We also discussed how to put it all together on CodePen and shared some tips and tricks for using CodePen effectively. By following this tutorial, you should now have a solid understanding of the basics of web design and front-end development. Remember, practice makes perfect, so be sure to experiment with different styles and features to further enhance your skills. Happy coding, guys!