login-with-user-authentication

Output

Live Preview : here

How to Login?

Username :- admin
Password :- admin@123
Press the Enter. User Successfully Log In, if you want to log out click on the Logout Button on the Home page.

Overview

We'll design a login page using HTML and CSS. A login page in HTML collects information from the user and has a submit button to send the details for server-side operations. However, our objective here is to design a login page and not to deal with the backend tasks.

Pre-requisites

HTML forms
CSS
Flexbox and its properties
JavaScript

What Are We Creating?

The login page uses HTML and CSS for the structuring and styling. We'll first create the simple structure with HTML and then move to make it look great with CSS. This is what our final output will look like:

HTML

We’ll start with the HTML, as it is the one responsible for the information displayed on the page. In other words, first, we will write and structure all the information contained in the page without worrying about style (CSS) or interactivity (JavaScript). Analyze the complete HTML file for as long as you want and when you’re ready move on to the explanation.

As usual in HTML files, we have two parts: the and the . The former includes metainformation about our web page, like the character encoding used, the title of the page (the name you see in the tab of your browser), and references to the CSS and JavaScript files that this HTML file will make use of. Note that there’s a defer attribute in the <script> tag so that the JavaScript script is only executed after the HTML is fully loaded.

CSS

Now we have the CSS, in other words, the style of our page. To modify each element in our HTML file, we can select them using ids, classes, or the tag names themselves, though the last option is discouraged. You see, the styles of more specific CSS selectors overwrite the styles of less specific ones. For example, the styles of an id selector overwrite those of a class selector, and class selector styles overwrite those of a tag name selector. In other words, always make your CSS selectors as specific as possible to affect only the elements you want to be affected.

JavaScript

For starters, we get all the elements that we’ll need to work with using JavaScript: the login form, the login button, and the login error message. We do it by calling the method document.getElementById, passing it the id of the element we are looking for. Also, since the values of those three variables will not change, that is, the variables will always refer to the exact same elements, then we declare all three as const

Instructions

1). Fork this repository
2). Clone the forked repository
3). Add your contributions (code or documentation)
4). Commit and push
5). Wait for the pull request to be merged

Creator [🔝](# login-with-user-authentication)

(https://github.com/hegdepavankumar). This Project is Created by:-

|
_{@hegdepavankumar} |

Show some ❤️ by starring some of the repositories!

if you like what I do, maybe consider buying me a coffee/tea 🥺👉👈

hegdepavankumar / login-with-user-authentication Goto Github PK