In the world of modern web development, mimicking the interfaces of popular platforms can be a fun and educational way to improve your HTML and CSS skills. In this article, I’ll demonstrate how to create a Facebook-style login screen using HTML and CSS. Let’s dive into the code!

Project Objective

While designing a login screen similar to Facebook, we will focus on the following topics:

  1. HTML Structure: How to create a semantic and clean structure.
  2. Styling with CSS: How to build a modern and responsive design.
  3. SEO-Optimized HTML: Best practices for using tags optimized for search engines.

1. Creating the HTML Structure

We start by preparing the basic HTML structure for the login screen. Semantic tags are used to ensure the structure is clean and easy to read.

htmlKodu kopyala<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Designing a Facebook login screen using HTML and CSS. Follow our step-by-step guide to create your own user interface." />
    <meta name="keywords" content="Facebook login screen, HTML CSS design, UI development" />
    <meta name="author" content="Astra Script" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
      integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <title>Facebook Login Screen Design</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="left-side">
        <img src="face.png" height="100" style="margin: -25px;" alt="" />
        <h1>Connect your friends and the world <br /> around you on Facebook</h1>
      </div>
      <div class="login-container">
        <form id="login-form">
          <div class="input-container">
            <input
              type="email"
              id="email"
              placeholder="Email or Phone Number"
              required
            />
          </div>
          <div class="input-container">
            <div class="password-container">
              <input
                type="password"
                id="password"
                placeholder="Password"
                required
              />
              <span id="toggle-password" class="eye-icon">
                <i class="fa-solid fa-eye"></i>
              </span>
            </div>
          </div>
          <button type="submit" class="login-btn">Login</button>
        </form>
        <div class="links">
          <a href="#" id="forgot-password">Forgot Password?</a>
        </div>
        <div class="create-btn-wrapper">
          <button type="submit" class="create-btn">Create New Account</button>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

This code forms the base structure of a login screen resembling Facebook. We have also included important SEO elements like meta descriptions and keywords.

2. Styling with CSS

With the HTML structure in place, let’s style it using CSS to make it visually appealing.

cssKodu kopyala* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1000px;
}

.login-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 9px 18px rgba(0, 0, 0, 0.1);
  width: 400px;
}

h1 {
  margin-top: 40px;
  font-weight: 400;
}

.input-container {
  margin-bottom: 20px;
}

input {
  font-size: 17px;
  padding: 14px 16px;
  width: 100%;
  border: 1px solid rgba(204, 204, 204, 0.5);
  border-radius: 6px;
}

.password-container {
  position: relative;
  display: flex;
  align-items: center;
}

.eye-icon {
  cursor: pointer;
  font-size: 18px;
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(-50%, -50%);
}

button {
  width: 100%;
  border: none;
  border-radius: 6px;
  font-size: 17px;
  line-height: 48px;
  padding: 0 16px;
  color: #fff;
  cursor: pointer;
}

.login-btn {
  background-color: #0865ff;
}

.create-btn {
  width: 60%;
  font-weight: 600;
  margin-top: 15px;
  background-color: rgb(68, 183, 39);
}

This CSS styles the login screen to give it a modern and clean appearance.

3. Adding JavaScript for Password Toggle

To enhance interactivity, we’ll add a feature to toggle password visibility.

javascriptKodu kopyala// Toggle password visibility
document
  .getElementById("toggle-password")
  .addEventListener("click", function () {
    const passwordField = document.getElementById("password");
    const eyeIcon = document.getElementById("toggle-password");
    const type = passwordField.type === "password" ? "text" : "password";
    passwordField.type = type;

    if (type === "password") {
      eyeIcon.innerHTML = '<i class="fa-solid fa-eye"></i>';
    } else {
      eyeIcon.innerHTML = '<i class="fa-solid fa-eye-slash"></i>';
    }
  });

This script enables users to toggle password visibility by clicking on the eye icon.

4. Final Touches and SEO Tips

Congratulations! You’ve successfully designed a Facebook-style login screen. To make your project SEO-friendly:

  • Title and Meta Descriptions: Include relevant titles and meta tags.
  • Semantic HTML Tags: Use <header> and <main> to help search engines understand the structure.
  • Optimize Loading Speed: Compress CSS and avoid unnecessary code.

This design is for educational purposes only and is not affiliated with Facebook.

Categorized in:

Yazılım,