Create a Login System with PHP, JavaScript & CSS (Using XAMPP + MySQL!) Part 1 #coding #php #xampp

🔧 Learn How to Connect PHP, CSS & JavaScript with an XAMPP Database!
In this tutorial, I’ll show you how to build a simple yet powerful login project using PHP, CSS, and JavaScript, all connected to a MySQL database using XAMPP. Whether you’re a beginner or just brushing up your skills, this step-by-step guide will help you understand how front-end and back-end work together!

💡 What You'll Learn:
✔️ Setting up XAMPP and MySQL
✔️ Writing PHP to connect to the database
✔️ Using JavaScript for interactivity
✔️ Full integration of front-end and back-end

📁 Perfect for login forms, data submission, and dynamic websites!

🔔 Don’t forget to Like, Subscribe, and turn on Notifications for more cool projects!

#php #javascript #css #xampp #webdevelopment #phpmysql #beginnerproject #webapp

Time stamps:
0:00 - Introduction
1:22 - Installation for xampp
3:43 - Start coding
24:27 - Code Javascript
28:30 - Put Css
29:30 - Seeing the website
30:07 - Fixing the errors
31:12 - Errors Fixed!

[KnowledgeOrbitAcademy]

The link for awesome font:


style.css:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}

body {
background-color: #c9d6ff;
background: linear-gradient(to right, #e2e2e2, #c9d6ff);
}

.container {
background: #fff;
width: 450px;
padding: 1.5rem;
margin: 50px auto;
border-radius: 10px;
box-shadow: 0 20px 35px rgba(0, 0, 1, 0.9);
/* display: flex; */
}

form {
margin: 0 2rem;
}

.form-title {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
padding: 1.3rem;
margin-bottom: 0.4rem;
}

input {
color: inherit;
width: 100%;
background-color: transparent;
border: none;
border-bottom: 1px solid #757575;
padding-left: 1.5rem;
font-size: 15px;
}

.input-group {
padding: 1% 0;
position: relative;
}

.input-group i {
position: absolute;
color: black;
}

input:focus {
background-color: transparent;
outline: transparent;
border-bottom: 2px solid hsl(327, 90%, 28%);
}

input::placeholder {
color: transparent;
}

label {
color: #757575;
position: relative;
left: 1.2em;
top: -1.3em;
cursor: auto;
transition: ease 0.3s all;
}

input:focus ~ label,
input:not(:placeholder-shown) ~ label {
color: hsl(327, 90%, 28%);
font-size: 15px;
top: -3em;
}

.recover {
text-align:right;
font-size: 1rem;
margin-bottom: 1rem;
}

.recover a {
text-decoration: none;
color: rgb(125, 125, 235);
}

.recover a:hover {
color: blue;
text-decoration: underline;
}

.btn {
font-size: 1.1rem;
padding: 8px 0;
border-radius: 5px;
outline: none;
border: none;
width: 100%;
background: rgb(125, 125, 235);
color: white;
cursor: pointer;
transition: 0.9s;
}

.btn:hover {
background: #07001f;
}

.or {
margin-top: 0.5rem;
font-size: 1.1rem;
text-align: center;
}

.icons {
text-align: center;
}

.icons i {
color: rgb(125, 125, 235);
padding: 0.8rem 1.5rem;
border-radius: 10px;
font-size: 1.5rem;
cursor: pointer;
border: 2px solid #dfe9f5;
margin: 0 15px;
transition: 1s;
}

.icons a i {
color: rgb(125, 125, 235);
padding: 0.8rem 1.5rem;
border-radius: 10px;
font-size: 1.5rem;
cursor: pointer;
border: 2px solid #dfe9f5;
margin: 0 15px;
transition: 1s;
}

.icons i:hover {
background: #07001f;
font-size: 1.6rem;
border: 2px solid rgb(125, 125, 235);
}

.icons a i:hover {
background: #07001f;
font-size: 1.6rem;
border: 2px solid rgb(125, 125, 235);
}

.links {
display: flex;
justify-content: space-around;
padding: 0 4rem;
margin-top: 0.9rem;
font-weight: bold;
}

button {
color: rgb(125, 125, 235);
border: none;
background-color: transparent;
font-size: 1rem;
font-weight: bold;
}

button:hover {
color: blue;
text-decoration: underline;
cursor: pointer;
}


If there are any errors or questions write them down here.