Master HTML and CSS by Building/Designing a Login Page

3 min readNov 18, 2023

If you’re new to web development, learning HTML and CSS can seem overwhelming. But one of the best ways to understand these fundamental languages is to dive right in and start building something. In this tutorial, we’re going to guide you through designing and coding a login page — a common feature for any website or app.

About the Login Page
A login page is a crucial part of any website or application that requires user authentication. Users enter their login credentials (e.g. username and password) to access restricted content or features. The design of the login page should be simple, easy to navigate, and visually appealing. It should also be secure and protect user data from malicious attacks.

Step 1: Write the HTML
The HTML will define the structure of your login page — heading, input fields, button, etc. Use meaningful semantic tags such as header, form, label, and input to make your code more readable and accessible.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>LOGIN PAGE | By CodePicker</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Login Page | By CodePicker</h1>
    <div class="container">
      <div class="center">
          <h1>Login</h1>
          <form action="" method="POST">
              <div class="txt_field">
                  <input type="text" name="text" required>
                  <span></span>
                  <label>Username</label>
              </div>
              <div class="txt_field">
                  <input type="password" name="password" required>
                  <span></span>
                  <label>Password</label>
              </div>
              <div class="pass">Forget Password?</div>
              <input name="submit" type="Submit" value="Login">
              <div class="signup_link">
                  Not a Member ? <a href="signup.php">Signup</a>
              </div>
          </form>
      </div>
    </div>
  </body>
</html>

Step 2: Add CSS Style
The CSS will add styling and layout to your HTML. Use CSS selectors, properties, and values to format the page, add color, adjust font styles and sizes, and align the design elements.

Add Interactions Through CSS
Use CSS to make your login page more interactive and engaging. You can add hover and focus effects, transition animations, and more.

Responsiveness
Make sure your login page is responsive and accessible across multiple devices and screen sizes. Use CSS media queries to modify the layout and styling based on device width.

body{
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: Roboto;
  background-repeat: no-repeat;
  background-size: cover;
  background: linear-gradient(150deg, #ff00ae, rgb(80, 197, 31));
  height: 100vh;
  overflow: hidden;
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40vw;
  background: white;
  border-radius: 20px;
}

.center h1{
  text-align: center;
  padding: 0 0 20px 0;
  border-bottom: 1px solid rgb(19, 19, 19);
}

.center form{
  padding: 0 40px;
  box-sizing: border-box;
}

form .txt_field{
  position: relative;
  border-bottom:3px solid #2a2929;
  margin: 25px 0;
}

.txt_field input{
  width: 100%;
  padding: 0 10px;
  height: 40px;
  font-size: 16px;
  border: none;
  background: none;
  outline: none;
}

.txt_field label{
  position: absolute;
  top: 50%;
  left: 5px;
  color: #908d8d;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
}

.txt_field span::before{
  content: '';
  position: absolute;
  top: 40px;
  left: 0;
  width: 0px;
  height: 2px;
  background: #2691d9;
  transition: .5s;
}

.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
  top: -5px;
  color: #2691d9;
}

.txt_field input:focus ~ span::before,
.txt_field input:Valid ~ span::before{
  width: 100%;
}

.pass{
  margin: -5px 0 20px 5px;
  color: #a6a6a6;
  cursor: pointer;
}

.pass:hover{
  text-decoration: underline;
}

input[type="Submit"]{
  width: 100%;
  height: 50px;
  border: 1px solid;
  border-radius: 25px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;

}

input[type="Submit"]:hover{
  background: #2691d9;
  color: #e9f4fb;
  transition: .5s;
}

.signup_link{
  margin: 30px 0;
  text-align: center;
  font-size: 16px;
  color: #666666;
}

.signup_link a{
  color: #ea0d0d;
  text-decoration: none;
}

.signup_link a:hover{
  text-decoration: underline;
}

.HomeAbout{
  width: 100vw;
  height: 25vh;
}

OUTPUT

Conclusion
Designing and coding a login page is a great way to practice and master HTML and CSS. By following these steps, you’ll be on your way to building more complex web projects and have a solid understanding of these essential languages. Remember to follow best practices for accessibility, security, and user experience.

Thank you for reading this guide on building an awesome project with HTML and CSS! I hope it helps you in creating your own Responsive LOGIN PAGE Design. If you have any further questions [comment], feel free to ask.

Happy coding!

CodePicker :)

Master HTML and CSS by Building/Designing a Login Page

OUTPUT

Written by CodePicker