New Updates

6/recent/ticker-posts

Header Ads Widget

Responsive Advertisement

How to Create a Facebook Login Page Using HTML and CSS & JavaScript [CODE]

Daily Star Pakistan July 13, 2023

How to Create a Facebook Login Front-End Using HTML and CSS

In today's digital age, social media platforms play a significant role in our daily lives. Facebook, being one of the most popular social media platforms, allows users to connect, share, and communicate with friends and family. If you're a web developer or aspiring to become one, knowing how to create a Facebook login front-end using HTML and CSS can be a valuable skill. In this article, we will guide you step-by-step on how to create a simple yet functional Facebook login page. Let's dive in!



TABLE OF CONTENT

  • Introduction: The Importance of a Facebook Login 
  • Page Setting Up the HTML Structure 
  • Styling the Facebook Login Page with CSS 
  • Adding Interactivity with JavaScript Conclusion

Introduction: The Importance of a Facebook Login Page

A Facebook login page serves as the gateway for users to access their Facebook accounts securely. It provides a form where users can enter their credentials, such as email or phone number and password, to log in to their accounts. Creating an intuitive and visually appealing login page enhances the user experience and establishes trust with your website visitors. Now, let's get started with the HTML structure.

Setting Up the HTML Structure

To begin, open your favorite code editor and create a new HTML file. Start by setting up the basic structure of the HTML document using the following code:

<!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">
    <form>
      <h2>Log in to Facebook</h2>
      <input type="text" placeholder="Email or Phone Number">
      <input type="password" placeholder="Password">
      <button type="submit">Log In</button>
      <a href="#">Forgot Password?</a>
    </form>
  </div>
</body>
</html>

In the code snippet above, we have created a basic HTML structure with a container div and a form element. Inside the form, we have included inputs for email or phone number and password, a submit button, and a "Forgot Password?" link. Save this file with a ".html" extension and let's move on to styling the login page using CSS.

Styling the Facebook Login Page with CSS 

To make the login page visually appealing, we'll apply some CSS styles. Create a new CSS file, name it "style.css," and link it to your HTML file using the <link> tag in the head section. Now, let's add some CSS code to style the Facebook login page:

/* style.css */

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

form {
  width: 300px;
  padding: 20px;
  background: #f0f2f5;
  border-radius: 8px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background: #1877f2;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: #1877f2;
  font-size: 14px;
}

In the CSS code snippet above, we have applied styles to the container, form, headings, inputs, button, and link elements. Feel free to customize the styles according to your preferences. Save the CSS file and open the HTML file in a web browser to see the visual changes.

Adding Interactivity with JavaScript To provide a seamless user experience, you can enhance the Facebook login page with some interactive features using JavaScript. Although JavaScript is not required for the basic functionality of the login page, you can add client-side validation or implement additional functionalities as per your requirements. For example, you could add the following JavaScript code to perform basic form validation:

// script.js

const form = document.querySelector("form");
const emailInput = document.querySelector('input[type="text"]');
const passwordInput = document.querySelector('input[type="password"]');

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const emailValue = emailInput.value.trim();
  const passwordValue = passwordInput.value.trim();

  if (emailValue === "") {
    alert("Please enter your email or phone number.");
    emailInput.focus();
    return;
  }

  if (passwordValue === "") {
    alert("Please enter your password.");
    passwordInput.focus();
    return;
  }

  // Perform login logic here
  // You can send the form data to a server-side script using AJAX or fetch API
  // Handle the response accordingly
});

In the JavaScript code snippet above, we have added an event listener to the form's submit event. It checks if the email and password inputs are empty and displays an alert message if they are. You can extend this logic or implement additional functionalities based on your project requirements.

Conclusion 

Congratulations! You have successfully created a Facebook login front-end using HTML, CSS, and optionally JavaScript. By following the step-by-step guide, you have learned how to structure the HTML, style the page with CSS, and add interactivity using JavaScript. Remember to keep practicing and experimenting with different techniques to further enhance your web development skills. Now, go ahead and explore more possibilities in web development. Happy coding!
Tags:

Post a Comment

0 Comments