🚀 Creating a Facebook Login UI Using HTML & CSS and Pushing It to GitLab

In this blog post, I’ll walk you through how I created a simple Facebook login page clone using just HTML and CSS. I’ll also show how I pushed the project to GitLab for version control and collaboration. Whether you're a beginner trying to get a grip on frontend design or learning how to use GitLab, this post is for you!

📌 What We'll Cover:

Project Overview
Creating the Facebook Login UI
Styling with CSS
Initializing a Git Repository
Pushing Code to GitLab
Live Preview or Future Improvements

🔧 1. Project Overview

The goal was to replicate a basic Facebook login screen, focusing on layout and design using only:

HTML5 for structure
CSS3 for styling

No JavaScript or backend integration (OAuth, etc.)—just static design.

🧱 2. HTML: Building the Structure

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Facebook Login</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>facebook</h1>
    <p>Connect with friends and the world around you.</p>
    <form class="login-form">
      <input type="text" placeholder="Email or Phone Number" required />
      <input type="password" placeholder="Password" required />
      <button type="submit">Log In</button>
      <a href="#">Forgotten password?</a>
      <hr />
      <button class="create-account">Create New Account</button>
    </form>
  </div>
</body>
</html>

🎨 3. CSS: Styling the Page

/* style.css */
body {
  background-color: #f0f2f5;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  text-align: center;
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 {
  color: #1877f2;
  font-size: 3rem;
}

.login-form input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 12px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.login-form button {
  background-color: #1877f2;
  color: white;
  padding: 12px;
  width: 100%;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.create-account {
  background-color: #42b72a;
  margin-top: 10px;
}

🌐 4. Pushing the Code to GitLab

Here are the steps I followed to upload the code:

Step 1: Initialize Git

git init

Step 2: Add and Commit

git add .
git commit -m "Initial commit: Facebook login UI"

Step 3: Create a Repository on GitLab

Go to GitLab
Click New project
Give your project a name, e.g., facebook-login-clone
Choose visibility (Public/Private)

Step 4: Connect Local Repo to GitLab

git remote add origin https://gitlab.com/your-username/facebook-login-clone.git

Step 5: Push Your Code

git push -u origin master

✅ That's it! Your project is now live on GitLab.

DEV Community