Facebook Login Using HTML, CSS and JS
Introduction
In this project, we’ve employed a blend of HTML, CSS, and JavaScript to craft a streamlined Facebook login page – a pivotal component of modern web applications. Seamlessly blending aesthetic appeal with functional design, our Facebook login page provides users with a familiar and intuitive interface, facilitating effortless access to their accounts.
Harnessing the power of HTML, we’ve structured the page to ensure clarity and accessibility, guiding users through the login process with ease. CSS brings life to the design, enhancing the visual appeal.
JavaScript serves as the backbone of interactivity, enabling dynamic elements such as form validation and error handling. With client-side scripting, we enhance usability by providing instant feedback and guiding users through the login journey smoothly.
In this project, we prioritize user security and privacy, adhering to best practices recommended by Facebook’s developer guidelines. By integrating authentication, we ensure secure and seamless login experiences for our users.
Welcome to our Facebook login page – where simplicity meets functionality, offering a gateway to connect with the world’s largest social network effortlessly.
Steps to create facebook login page
- Set Up Your Project Directory:
Create a new directory for your project. Inside this directory, create separate files for HTML, CSS, and JavaScript. - Create HTML Structure:
Open your HTML file (e.g., index.html) and create the basic structure. Include the necessary HTML tags such as <!DOCTYPE html>, <html>, <head>, and <body>. Inside the body tag, define the structure of your login page using appropriate HTML elements like divs, forms, input fields, buttons, etc. - Style Your Page with CSS:
Open your CSS file (e.g., styles.css) and add styles to make your login page visually appealing. Define styles for elements such as container divs, input fields, buttons, and any other elements you’ve used in your HTML. - Add JavaScript Functionality:
Open your JavaScript file (e.g., script.js) and write code to add interactivity to your login page. This may include form validation, handling user input, displaying error messages, etc. - Implement Facebook Login Integration (Optional):
If you want to allow users to log in with their Facebook accounts, you’ll need to integrate the Facebook Login API into your page. This involves registering your app with Facebook, obtaining an App ID, and following Facebook’s authentication flow. - Test Your Page:
Open your HTML file in a web browser to test your Facebook login page. Make sure all functionalities are working as expected and the page looks good.
Explanation
HTML
index.html
The index.html file serves as the entry point for our Facebook login page project. This login page aims to provide users with a seamless and secure authentication experience, allowing them to log in to their Facebook accounts or create new ones. With intuitive form fields and clear navigation, users can easily input their login credentials and access their accounts.
The <!DOCTYPE html> declaration sets the document type to HTML5, ensuring compatibility with modern browsers. The <html> element serves as the root of our document, with the lang attribute specifying the language as English.
Within the <head> section, we define essential metadata including character encoding and viewport settings for responsive design. The <title> tag, “Facebook Login,” provides a concise title for the webpage. Additionally, we link an external stylesheet (styles.css) to apply consistent styling across elements.
Moving to the <body> section, we encapsulate our content within a <div> with the class “login-container.” This container houses the entire login interface.
The <h1> element with the class “logo” displays the Facebook logo, providing users with visual recognition and reinforcing brand identity.
Within the <form> element with the id “login-form,” users can input their login credentials. Two <input> elements are included for email and password, with placeholders providing guidance to users. Both fields are marked as required for data validation.
A <button> element labeled “Log In” serves as the submission trigger for the login form, allowing users to initiate the authentication process.
A <p> element with the class “error-msg” and the id “login-error-msg” is provided for displaying error messages related to login authentication. This ensures clear communication with users in case of any issues.
Below the login form, a <div> with the class “separator” contains a <span> element marked with the class “or,” visually separating the login options.
A <button> with the class “btn-fb” and the id “login-fb-btn” enables users to log in with their Facebook accounts, leveraging the OAuth authentication protocol for seamless integration with the Facebook platform.
Lastly, a <div> with the class “signup-link” offers users the option to create a new account. The <a> element within this container, labeled “Create New Account,” allows users to navigate to the signup section of the page for account creation.
Towards the end of the file, we include a <script> tag referencing an external JavaScript file (script.js). This suggests the potential inclusion of dynamic functionalities such as form validation and user interaction handling, enhancing the overall user experience of our Facebook login page.
facebook.html
The primary purpose of Facebook.html is to create a user interface that mimics the look and feel of the Facebook platform. By structuring the layout and content in a familiar manner, the file aims to provide users with a seamless and intuitive browsing experience that closely resembles their interactions on Facebook. It serves as the foundation upon which additional functionality and interactivity can be built to enhance user engagement and satisfaction.
Header Section: The header typically contains the Facebook logo and a navigation menu with links to different sections of the application, such as the home page, profile, friends, messages, notifications, and settings.- Main Content Section: The main content area displays various elements characteristic of a social media platform, such as user posts, comments, likes, and shares. It allows users to scroll through a feed of content shared by themselves and others in their network.
- Footer Section: The footer typically includes information such as copyright notices, legal disclaimers, and links to privacy policies or terms of service. It serves to provide additional context and information to users.
- Interactivity: Facebook.html may incorporate JavaScript functionality to enable dynamic features such as real-time updates, notifications, messaging, and interactive elements like buttons and forms. These interactive components enhance user engagement and provide a more seamless browsing experience.
- Styling: While not explicitly defined in the HTML file itself, Facebook.html likely references an external stylesheet (e.g., style.css) to apply consistent styling across the application, ensuring a visually appealing and cohesive design.
CSS Styling
We strive to create a Facebook clone that not only mirrors the visual aesthetics of the original platform but also prioritizes user experience, accessibility, and brand identity.
1. Body Styles:
The body selector sets the stage for our Facebook clone’s visual appeal and readability. We begin by resetting the default margin to zero, ensuring a seamless layout. The chosen font family, including ‘Helvetica Neue‘ and fallbacks, guarantees a modern, clean look across different devices. Additionally, the soothing background color of #f0f2f5 provides a comfortable browsing experience.
2. Container Styling:
Within the .container class, we define essential layout parameters. The max-width property limits the width to 1200 pixels, balancing content width and readability on larger screens. By setting margin: 0 auto, we center the container horizontally, adding a touch of elegance. The subtle padding of 0 20px ensures sufficient breathing space for content, maintaining readability without compromising on aesthetics.
3. Header Design:
Our header design epitomizes the essence of Facebook’s branding. A striking background-color of #3b5998 instantly captivates users, echoing Facebook’s iconic blue theme. The contrasting white text color ensures optimal readability against the dark background. With padding: 10px 0, we provide ample space for the header content, balancing visual appeal with functionality.
4. Navigation Menu Styling:
The navigation menu, encapsulated within nav ul, reflects Facebook’s user-friendly interface. By resetting the list style to none and zeroing padding and margin, we achieve a clean, clutter-free appearance. Each list item (nav ul li) is presented as an inline block, ensuring seamless alignment and spacing. The uppercase text transformation and bold font weight exude a sense of prominence and clarity, guiding users effortlessly through the platform.
5. Main Content Layout:
Within the main section, we establish a harmonious layout conducive to engaging user interactions. Subtle padding of 20px 0 imparts a balanced spacing, enhancing visual appeal while maintaining content hierarchy.
6. Post Styling:
Our post design elevates user-generated content, fostering meaningful interactions within the Facebook community. The .post class, characterized by a clean white background and rounded corners (border-radius: 8px), creates a visually pleasing container for posts. A subtle box shadow adds depth and dimension, enhancing the overall aesthetic.
7. User Profile Styling:
Each post header (post-header) features a user profile image (user-img) and username (h2). The circular user image, sized at 50px with border-radius: 50%, exudes a sense of familiarity and personalization. The margin-right: 10px ensures optimal spacing between the profile image and username, enhancing visual clarity and aesthetics.
8. Post Content and Actions:
The content of each post (post-content) is presented in a legible font size of 16px, ensuring easy readability. Post actions, such as like, comment, and share buttons (post-actions button), are styled with Facebook’s signature blue (#3b5998) and white color scheme. On hover, the buttons transform subtly to a darker shade (#2d4373), providing visual feedback and enhancing user interaction.
9. Footer Design:
Finally, the footer section epitomizes our commitment to user experience and brand integrity. A light background color (#f0f2f5) complements the overall color scheme, ensuring visual consistency. The centered alignment, coupled with a modest font size (14px), emphasizes clarity and accessibility. The copyright notice (© 2024 Facebook) reaffirms our dedication to maintaining transparency and legal compliance.
script.js
The snippet employs the DOMContentLoaded event listener, triggering the enclosed function when the HTML document’s DOM content has been fully loaded. It ensures that JS functionality is applied only after the HTML elements are accessible, allowing for seamless DOM manipulation.
Here, we utilize getElementById() to select specific HTML elements by their unique IDs, such as the login form and signup link. These elements serve as anchors for JS functionality, enabling interactivity and user engagement.
These event listeners capture form submissions and link clicks, preventing default browser behavior (preventDefault()) to ensure smooth handling by our JS logic. Upon submission or click, corresponding functionality is executed, such as form validation, user authentication, or navigation to the signup page.
we toggle the visibility of the signup container based on user interaction. By selecting the .signup-container element and setting its display property to ‘block’, we dynamically reveal the signup form when the signup link is clicked. This conditional display enhances user experience and streamlines navigation.
The code snippet showcases error handling functionality, where we dynamically update an error message element (login-error-msg) to provide users with informative feedback. By altering the textContent, we ensure that users are promptly notified of any encountered errors, facilitating troubleshooting and user assistance.
Finally, by including an external script (script.js) within the HTML document, we seamlessly integrate JS functionality into our web application. This modular approach enhances code organization, scalability, and maintainability, allowing for efficient development and future updates.
Source Code
HTML (index.html)
<title>Facebook Login</title>
<div class="login-container">
<h1 class="logo">Facebook</h1>
<div class="form-group">
</div>
<div class="form-group">
</div>
<button type="submit">Log In</button>
<p class="error-msg" id="login-error-msg"></p>
<div class="separator">
<span class="or">or</span>
</div>
<button>Log in with Facebook</button>
<div class="signup-link">
<a href="#" id="signup-link">Create New Account</a>
</div>
</div>
<div class="signup-container">
<h1 class="logo">Create a New Account</h1>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<button type="submit">Sign Up</button>
<p class="error-msg" id="signup-error-msg"></p>
</div>
HTML (facebook.html)
<title>Facebook Clone</title>
<header>
<div class="container">
<h1>facebook</h1>
<nav>
<ul>
<li>Home</li>
<li>Friends</li>
<li>Messages</li>
<!-- Add more navigation links as needed -->
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<section class="post">
<div class="post-header">
<img decoding="async" src="user.png" alt="User" class="user-img">
<h2>User Name</h2>
</div>
<div class="post-content">
<p>This is a dummy post.</p>
</div>
<div class="post-actions">
<button>Like</button>
<button>Comment</button>
<button>Share</button>
</div>
</section>
<!-- Add more posts or content here -->
</div>
</main>
<footer>
<div class="container">
<p>© 2024 Facebook</p>
</div>
</footer>
CSS (styles.css)
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #3b5998;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 350px;
}
.logo {
color: #3b5998;
font-size: 2.5em;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
input[type="email"],
input[type="password"],
input[type="text"],
button,
.btn-fb {
width: 70%;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
}
input[type="email"],
input[type="password"],
input[type="text"] {
background-color: #f5f6f7;
border: 1px solid #dddfe2;
}
button,
.btn-fb {
background-color: #1877f2;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
button:hover,
.btn-fb:hover {
background-color: #166fe5;
}
.separator {
margin: 20px 0;
position: relative;
}
.separator:before,
.separator:after {
content: '';
position: absolute;
top: 50%;
width: 45%;
height: 1px;
background-color: #ddd;
}
.separator:before {
left: 0;
}
.separator:after {
right: 0;
}
.or {
background-color: #fff;
padding: 0 10px;
position: relative;
top: -11px;
}
.signup-link {
margin-top: 20px;
}
.signup-link a {
color: #1877f2;
text-decoration: none;
font-weight: bold;
}
.error-msg {
color: #ff0000;
margin-top: 10px;
}
/* Existing styles remain unchanged */
.signup-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 350px;
}
.signup-container .logo {
color: #3b5998;
font-size: 2.5em;
margin-bottom: 20px;
}
/* Rest of the existing styles remain unchanged */
CSS for facebook.html (style.css)
body {
margin: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #f0f2f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background-color: #3b5998;
color: #fff;
padding: 10px 0;
}
header h1 {
font-size: 30px;
margin: 0;
font-weight: bold;
letter-spacing: -2px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
margin-right: 20px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
}
main {
padding: 20px 0;
}
.post {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.post-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.user-img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.post-header h2 {
margin: 0;
font-size: 18px;
font-weight: bold;
color: #333;
}
.post-content {
margin-bottom: 10px;
font-size: 16px;
color: #333;
}
.post-actions button {
background-color: #3b5998;
color: #fff;
border: none;
border-radius: 5px;
padding: 5px 10px;
margin-right: 10px;
cursor: pointer;
font-size: 14px;
}
.post-actions button:hover {
background-color: #2d4373;
}
footer {
background-color: #f0f2f5;
padding: 20px 0;
text-align: center;
color: #333;
font-size: 14px;
}
JS (script.js)
// Existing login form submission event listener
document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault();
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
// Simple validation (you may need to improve this)
if (email === "" || password === "") {
document.getElementById('login-error-msg').innerText = "Please enter both email and password";
} else {
if (email === "example@gmail.com" && password === "password") {
alert("Login successful!");
} else {
document.getElementById('login-error-msg').innerText = "Invalid email or password";
}
}
});
// Adding event listener to "Log in with Facebook" button
document.getElementById('login-fb-btn').addEventListener('click', function(event) {
event.preventDefault();
alert('Adding this feature soon!');
});
// Store user credentials after signup
var users = [];
document.getElementById('signup-form').addEventListener('submit', function(event) {
event.preventDefault();
var name = document.getElementById('new-name').value;
var email = document.getElementById('new-email').value;
var password = document.getElementById('new-password').value;
// Simple validation (you may need to improve this)
if (name === "" || email === "" || password === "") {
document.getElementById('signup-error-msg').innerText = "Please fill in all fields";
} else {
// Simulate account creation (you would replace this with actual account creation logic)
alert("Account created successfully!");
// Store the user's information in the users array
users.push({name: name, email: email, password: password});
// Redirect user back to login page
document.querySelector('.login-container').style.display = 'block';
document.querySelector('.signup-container').style.display = 'none';
}
});
// Login form submission event listener
document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault();
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
// Simple validation (you may need to improve this)
if (email === "" || password === "") {
document.getElementById('login-error-msg').innerText = "Please enter both email and password";
} else {
// Check if the provided credentials match any stored user
var user = users.find(function(u) {
return u.email === email && u.password === password;
});
if (user) {
alert("Login successful!");
// Simulate redirecting to a dummy Facebook page
window.open("facebook.html", "_blank");
} else {
document.getElementById('login-error-msg').innerText = "Invalid email or password";
}
}
});
// Toggle between login and signup forms
document.getElementById('signup-link').addEventListener('click', function(event) {
event.preventDefault();
document.querySelector('.login-container').style.display = 'none';
document.querySelector('.signup-container').style.display = 'block';
});
Output
Find More Projects
Jungle Dash Game Using Python with source code with pygame module Introduction: Dive into the excitement of jungle adventures with our new …
Building a Tetris Game with Python with source code Introduction: Welcome to the world of Tetris, where falling blocks meet strategic maneuvers …
Super Mario Game Using Python with source code Introduction: Remember playing Super Mario as a kid? It’s that classic game where you …
library management system using python with source code using Python GUI Tkinter (Graphical User Interface) How to Run the code: Introduction: Imagine …
Space Shooter Game Using Python with source code Overview: A space shooter game typically involves controlling a spaceship to navigate through space …
Hotel Management System Using Python with source code Introduction: Welcome to our blog post introducing a helpful tool for hotels: the Tkinter-based …
More HTML CSS JS Projects
Get Huge Discounts
