Login page: HTML, CSS, JavaScript, PHP and MySQL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign in</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="login">
    <h1>Welcome back</h1>
    <p class="sub">Sign in to continue your lessons.</p>
    <form id="loginForm" action="login.php" method="POST" novalidate>
      <label for="email">Email</label>
      <input id="email" name="email" type="email" placeholder="you@example.com" autocomplete="email">
      <label for="password">Password</label>
      <input id="password" name="password" type="password" placeholder="Your password" autocomplete="current-password">
      <p class="error" id="error" role="alert"></p>
      <button type="submit">Sign in</button>
    </form>
  </main>
  <script src="script.js"></script>
</body>
</html>

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
  background: linear-gradient(160deg, #0b3d24, #0a7a3f);
}

.login {
  width: min(360px, 92vw);
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.login h1 { margin: 0; color: #10231a; }
.sub { color: #5f7167; margin: 4px 0 18px; }

label { display: block; font-weight: 600; margin: 12px 0 6px; }

input {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid #dbe6df;
  border-radius: 12px;
  font-size: 1rem;
}
input:focus { outline: none; border-color: #0f9350; box-shadow: 0 0 0 4px rgba(15, 147, 80, .15); }

.error { color: #b3263e; min-height: 1.2em; margin: 10px 0 0; font-size: .9rem; }

button {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: #0a7a3f;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
button:hover { background: #0d5c33; }

// Friendly checks before the form is sent. The server (login.php) checks everything again.
const form = document.getElementById('loginForm');
const error = document.getElementById('error');

form.addEventListener('submit', function (event) {
  event.preventDefault();
  const email = form.email.value.trim();
  const password = form.password.value;

  if (!email || !password) {
    error.textContent = 'Please enter your email and password.';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    error.textContent = 'That email address does not look right.';
  } else if (password.length < 8) {
    error.textContent = 'Passwords have at least 8 characters.';
  } else {
    error.style.color = '#0a7a3f';
    error.textContent = 'Looks good! In a real site the form would now be sent to login.php.';
    // form.submit();
  }
});

<?php
session_start();

$email    = trim($_POST['email'] ?? '');
$password = $_POST['password'] ?? '';

if ($email === '' || $password === '') {
    exit('Please enter your email and password.');
}

// Connect with PDO; prepared statements keep SQL injection out.
$pdo = new PDO('mysql:host=localhost;dbname=school;charset=utf8mb4', 'app_user', 'secret', [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
]);

$stmt = $pdo->prepare('SELECT id, name, password_hash FROM users WHERE email = ? LIMIT 1');
$stmt->execute([$email]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);

// password_verify() compares against the stored hash; the same message for both cases
// stops attackers from finding out which emails exist.
if (!$user || !password_verify($password, $user['password_hash'])) {
    exit('Incorrect email or password.');
}

session_regenerate_id(true); // a fresh session ID after signing in
$_SESSION['user_id'] = $user['id'];

header('Location: dashboard.php');
exit;

CREATE TABLE users (
    id            INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
    name          VARCHAR(100) NOT NULL,
    email         VARCHAR(190) NOT NULL UNIQUE,
    password_hash VARCHAR(255) NOT NULL,       -- from PHP password_hash(), never the real password
    created_at    DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
);

-- Create users from PHP, e.g.:
-- $hash = password_hash('their-password', PASSWORD_DEFAULT);
-- INSERT INTO users (name, email, password_hash) VALUES (?, ?, ?);