https://github.com/hegdepavankumar/login-with-user-authentication
In authentication, the user or computer has to prove its identity to the server or client. Usually, authentication by a server entails the use of a user name and password.
https://github.com/hegdepavankumar/login-with-user-authentication
authentication bootstrap css front-end-development html javascript js login-page password uiux validdate
Last synced: 11 months ago
JSON representation
In authentication, the user or computer has to prove its identity to the server or client. Usually, authentication by a server entails the use of a user name and password.
- Host: GitHub
- URL: https://github.com/hegdepavankumar/login-with-user-authentication
- Owner: hegdepavankumar
- License: mit
- Created: 2023-04-08T12:05:33.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-10T04:12:48.000Z (over 2 years ago)
- Last Synced: 2024-05-02T04:44:47.433Z (about 2 years ago)
- Topics: authentication, bootstrap, css, front-end-development, html, javascript, js, login-page, password, uiux, validdate
- Language: HTML
- Homepage: https://imhegde.github.io/login-with-user-authentication/
- Size: 45.9 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# login-with-user-authentication
## Output
* Live Preview : [here](https://hegdepavankumar.github.io/login-with-user-authentication/)
## 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 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 <br>
2). Clone the forked repository <br>
3). Add your contributions (code or documentation) <br>
4). Commit and push <br>
5). Wait for the pull request to be merged <br>
## Creator [🔝](# login-with-user-authentication)
(https://github.com/hegdepavankumar). This Project is Created by:-
| [<img src="https://github.com/hegdepavankumar.png?size=115" width="115"><br><sub>@hegdepavankumar</sub>](https://github.com/hegdepavankumar) |
<br>
<h3 align="center">Show some ❤️ by starring some of the repositories!</h3>
<br>
<!-- Support Me -->
if you like what I do, maybe consider buying me a coffee/tea 🥺👉👈
<a href="https://www.buymeacoffee.com/hegdepavankumar" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-red.png" alt="Buy Me A Coffee" width="150" ></a>