Build a Modern Education Website Using HTML, CSS & JavaScript (With Dark Mode)

In this blog post, we’ll build a modern, professional education landing page using HTML, CSS, and JavaScript.

The goal is to create a real-world responsive website with features like a sticky navbar, dark/light mode, mobile menu, hero section, stats, feature cards, and a clean footer.

This project is perfect for beginners and frontend developers who want to improve their UI skills and understand how modern websites are structured.

Project Overview

We are building a fictional education platform called SkillUp, focused on clean UI, accessibility, and responsiveness.

Key Highlights:

Responsive navigation bar
Mobile hamburger menu
Dark & light theme toggle
Modern hero section layout
Stats section for credibility
Feature cards using Flexbox
Professional footer with newsletter form

Technologies Used

HTML5 – Semantic structure
CSS3 – Flexbox, variables, responsiveness
JavaScript – DOM manipulation & interactivity
Font Awesome – Icons
Google Fonts (Outfit) – Typography

Project Structure

project-folder/

│── index.html

│── style.css

│── education.jpg

Navbar

The navbar contains:

Logo
Navigation links
Dark mode toggle
Mobile menu icon

The navbar is sticky, so it stays visible while scrolling.

Hero Section

This is the first thing users see.
It includes:

A badge for new courses
Main heading
Short description
Call-to-action buttons
Image section

This section uses Flexbox and wraps automatically on smaller screens.

Stats Section

Stats help build trust and credibility.

The section uses a dark background to visually separate it from the rest of the page.

Features / Courses Section

This section explains why users should choose SkillUp.

Each card includes:

Icon
Title
Short description

Footer

The footer contains:

Brand info
Quick links
Newsletter subscription form

Image & Asset Credits

All images used in this project from:

https://unsplash.com

Icons provided by Font Awesome.

Entire Code:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>SkillUp | Professional Education</title>

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700&display=swap" rel="stylesheet">

</head>

<body>

<nav class="navbar">

<div class="logo">

Skill

<span>Up.</span>

</div>

<div class="nav-right">

<ul class="nav-links" id="nav-links">

<li><a href="#home">Home</a></li>

<li><a href="#courses">Courses</a></li>

<li><a href="#stats">Impact</a></li>

<li><a href="#" class="btn-nav">Join Now</a></li>

</ul>

<div class="nav-controls">

<div class="control-icon" id="theme-toggle">

<i class="fas fa-moon"></i>

</div>

<div class="menu-toggle" id="mobile-menu">

<i class="fas fa-bars"></i>

</div>

</nav>

<section class="hero" id="hero">

<div class="hero-container">

<div class="hero-text">

<span class="badge">New: AI Design Course</span>

<h1>

Upgrade Your Skills with <span>Future-Ready</span>

Education

</h1>

<p>

Don't just learn, evolve. Join 50k+ students mastering high demand skills from the comfort of their homes.

</p>

<div class="hero-actions">

<button class="btn-main">

Browse Library

</button>

<button class="btn-ghost">

<i class="fas fa-play"></i> Watch Demo

</button>

</div>

<div class="hero-image">

<img src="./education.jpg" alt="Students Learning">

</div>

</section>

<section class="stats" id="stats">

<div class="stat-item">

<h2>15K+</h2>

<p>Active Courses</p>

</div>

<div class="stat-item">

<h2>85K+</h2>

<p>Graduates</p>

</div>

<div class="stat-item">

<h2>4.9/5</h2>

<p>User Rating</p>

</div>

</section>

<section class="offerings" id="courses">

<div class="section-title">

<h2>Why Choose SkillUp?</h2>

<div class="underline"></div>

</div>

<div class="cards-container">

<div class="card">

<div class="card-icon">

<i class="fas fa-bolt"></i>

</div>

<h3>Accelerated Learning</h3>

<p>Carriculums designed to get you job-ready in weeks, not years.</p>

</div>

<div class="card">

<div class="card-icon">

<i class="fas fa-users"></i>

</div>

<h3>Community Support</h3>

<p>Access private Discord channels and peer review groups.</p>

</div>

<div class="card">

<div class="card-icon">

<i class="fas fa-globe"></i>

</div>

<h3>Global Access</h3>

<p>Download lessons and learn offline anywhere in the world.</p>

</div>

</section>

<footer class="footer">

<div class="footer-container">

<div class="footer-col">

<div class="logo">

Skill

<span>Up.</span>

</div>

<p>Empowering learners worldwide with affordable, high quality education.</p>

</div>

<div class="footer-col">

<h4>Quick Links</h4>

<ul>

<li><a href="#">Our Courses</a></li>

<li><a href="#">Privacy Policy</a></li>

</ul>

</div>

<div class="footer-col">

<h4>Newsletter</h4>

<form class="footer-form">

<input type="email" placeholder="Your Email" required>

<button type="submit">

<i class="fas fa-paper-plane"></i>

</button>

</form>

</div>

<div class="footer-bottom">

<p>

</p>

</div>

</footer>

</body>

<script>

const menuBtn = document.getElementById('mobile-menu');

const navLinks = document.getElementById('nav-links');

menuBtn.onclick = () => {

navLinks.classList.toggle('active');

menuBtn.querySelector('i').classList.toggle('fa-bars');

menuBtn.querySelector('i').classList.toggle('fa-times');

}

// dark light mode

const themeBtn = document.getElementById('theme-toggle');

themeBtn.onclick = () => {

document.body.classList.toggle('dark-theme');

const icon = themeBtn.querySelector('i');

icon.classList.toggle('fa-moon');

icon.classList.toggle('fa-sun');

}

</script>

</html>

CSS:

:root {

--primary: #4f46e5;

--dark: #1e293b;

--light: #f8fafc;

--bg-color: #ffffff;

--text-color: #1e23b;

--card-bg: #ffffff;

}

.dark-theme {

--bg-color: #0f172a;

--text-color: #f8fafc;

--card-bg: #1e293b;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Outfit', sans-serif;

transition: all 0.3s ease;

}

body {

background-color: var(--bg-color);

color: var(--text-color);

line-height: 1.8;

}

/* navbar */

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px 8%;

background: var(--bg-color);

position: sticky;

top: 0;

z-index: 1000;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

.logo {

font-size: 1.8rem;

font-weight: 700;

}

.logo span {

color: var(--primary);

}

.nav-right {

display: flex;

align-items: center;

gap: 30px;

}

.nav-links {

display: flex;

list-style: none;

gap: 25px;

}

.nav-links a {

text-decoration: none;

color: var(--text-color);

font-weight: 500;

}

.nav-controls {

display: flex;

align-items: center;

gap: 15px;

}

.control-icon, .menu-toggle {

cursor: pointer;

font-size: 1.2rem;

}

.menu-toggle {

display: none;

}

.btn-nav {

background: var(--primary);

color: white !important;

padding: 8px 20px;

border-radius: 6px;

}

/* hero section */

section {

padding: 80px 8%;

}

.hero-container {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 50px;

}

.hero-text {

flex: 1;

min-width: 320px;

}

.hero-text h1 {

font-size: 3.2rem;

line-height: 1.2;

margin-bottom: 20px;

}

.hero-text h1 span {

color: var(--primary);

}

.badge {

background: #e0e7ff;

color: var(--primary);

padding: 5px 12px;

border-radius: 20px;

font-size: 0.8rem;

}

.hero-actions {

display: flex;

gap: 15px;

margin-top: 30px;

}

.btn-main {

background: var(--primary);

color: white;

border: none;

padding: 15px 30px;

border-radius: 8px;

cursor: pointer;

}

.btn-ghost {

background: transparent;

border: 1px solid #ccc;

color: var(--text-color);

padding: 15px 30px;

border-radius: 8px;

cursor: pointer;

}

.hero-image {

flex: 1;

min-width: 320px;

}

.hero-image img {

width: 100%;

border-radius: 20px;

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

}

/* stat section */

.stats {

display: flex;

justify-content: space-around;

flex-wrap: wrap;

background: var(--dark);

color: white;

gap: 30px;

}

.stat-item {

text-align: center;

}

/* offerings */

.section-title {

text-align: center;

margin-bottom: 40px;

}

.underline {

width: 50px;

height: 4px;

background: var(--primary);

margin: 10px auto;

}

.cards-container {

display: flex;

gap: 30px;

flex-wrap: wrap;

}

.card {

flex: 1;

min-width: 280px;

background: var(--card-bg);

padding: 30px;

border-radius: 15px;

text-align: center;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

}

.card-icon {

font-size: 2.5rem;

color: var(--primary);

margin-bottom: 15px;

}

.footer {

background: #020617;

color: #94a3b8;

padding: 60px 8% 20px;

}

.footer-container {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

.footer-col {

flex: 1;

min-width: 200px;

}

.footer-col h4 {

color: white;

margin-bottom: 20px;

}

.footer-col ul {

list-style: none;

}

.footer-col ul li {

margin-bottom: 10px;

}

.footer-col a {

color: #94a3b8;

text-decoration: none;

}

.footer-col form {

display: flex;

margin-top: 15px;

}

.footer-form input {

padding: 10px;

border: none;

border-radius: 5px 0 0 5px;

width: 100%;

}

.footer-form button {

background: var(--primary);

color: white;

border: none;

padding: 10px 15px;

border-radius: 0 5px 5px 0;

cursor: pointer;

}

/* mobile menu */

@media (max-width: 768px) {

.menu-toggle {

display: block;

}

.nav-links {

position: fixed;

top: 75px;

right: -100%;

width: 80%;

height: 100vh;

background: var(--bg-color);

flex-direction: column;

align-items: center;

padding-top: 50px;

box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);

}

.hero-text h1 {

font-size: 2.5rem;

}

.nav-links.active {

right: 0;

}

Iframe Dev

Search This Blog