HTML5ANDCSS3 Learning Platform

Overview#

HTML5ANDCSS3 (html5andcss3.org) is a full-stack learning and publishing platform built for anyone learning HTML, CSS, and JavaScript from the ground up. It brings structured tutorials, a live "Try It" code editor, developer tools, assessments, certificates, and a content-management system into one product, instead of scattering that experience across a blog, a separate code sandbox, and a third-party quiz tool.

The platform was built and is owned by Swapnil Raja (LinkedIn). This write-up is a technical breakdown of how the product is engineered: its architecture, feature set, and the specific problems it solves, put together as a case study of a real-world Next.js learning platform in production.

The Problem#

A tutorial website is easy to start and hard to scale. As HTML5ANDCSS3 grew from a simple template into a full learning catalog, a few problems needed real engineering answers:

• Content volume vs. speed: hundreds of tutorials, chapters, and lessons had to stay fast for readers even as the catalog kept growing.

• Safe code execution: learners needed to write and preview HTML/CSS/JS in the browser without any risk to the main application.

• One system, two audiences: free and paid courses had to share the same lesson engine instead of duplicating logic.

• Editorial control without deploys: non-technical editors needed to publish and update content without touching code.

• Proof of learning: progress tracking, assessments, and certificates needed to be tamper-resistant, not just UI state.

How It's Built#

Structured tutorials and lessons#

Tutorials and lessons are modeled independently in MongoDB (via Mongoose), each with its own publishing status, difficulty, pricing, and SEO metadata. Tutorial overview pages and individual lesson pages share the same collapsible sidebar navigation, so learners never lose their place moving between the course outline and a specific chapter. This is currently live for HTML, CSS, and JavaScript tracks.

A snapshot-based delivery layer#

This is the core architectural decision behind the platform. Instead of every visitor triggering a live database read, published content is materialized into JSON snapshots. Admins keep working against live MongoDB records; the moment something is published, a targeted refresh job updates only the snapshot for that tutorial, lesson, or page. Public pages then read from snapshots, not the database.

The result:

• Public pages don't depend on live database performance.

• Static generation can build from known, published data.

• A single content edit doesn't force a full-site rebuild; only the affected entity refreshes.

The Try It editor and public code sharing#

The Try It Editor lets learners write HTML, CSS, and JavaScript and preview the result instantly, with syntax highlighting and full-screen preview support. The harder problem was sharing: browser blob URLs can't be sent to another person. The platform solves this by storing the actual source code server-side under a random, hashed token with a 24-hour expiry, then rebuilding the preview for whoever opens the share link, rendered inside a sandboxed iframe with no same-origin access to the main app's cookies or DOM.

Free and paid courses, one lesson system#

Rather than building separate code paths for free and paid content, entitlement checks happen server-side and gate the same lesson engine. Razorpay handles order creation, signature verification, and webhook verification; prices are converted to subunits on the server, and access is driven by stored payment/entitlement records, not a client-side flag that could be spoofed.

Assessments and certificates#

Timed assessments handle question flow, answer capture, scoring, and attempt history server-side. On completion, the platform can generate a certificate PDF and expose public verification by certificate number, kept separate from the payment and ownership checks so verification can't be used to infer purchase details.

Admin CMS#

Editors manage tutorials, lessons, quizzes, blog posts, pages, tools, media, menus, newsletters, and payment settings from a protected admin panel, including the ability to inspect and manually delete active Try It share links. Every meaningful admin action is audit-logged without blocking the action itself if logging fails.

Security, built in rather than bolted on#

• Admin routes check both authentication and request origin.

• Passwords, OTPs, recovery codes, and 2FA secrets are hashed or excluded from default queries.

• Rate limiting covers login, registration, OTP, contact, newsletter, certificate, and preview endpoints.

• Shared preview tokens are hashed at rest and expire automatically, with expired previews rejected on lookup even before cleanup runs.

Tech Stack#

Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS 4 · MongoDB + Mongoose · Razorpay · Resend · ImageKit · pdf-lib · PrismJS

Outcome #

• A snapshot-backed public site that isn't dependent on live database reads for every page view.

• One lesson engine serving both free and paid learners, without duplicated logic.

• A code-sharing feature that's temporary, sandboxed, and safe by default.

• An admin system that lets non-technical editors run the entire content catalog.

• Consistent navigation between course overviews and individual lessons across the whole tutorial library.

Why I'm Writing This Case Study#

I didn't build html5andcss3.org. Full credit for the product and its architecture goes to Swapnil Raja (LinkedIn), who designed and built it. I put this breakdown together because it's a genuinely well-engineered example of what a full-stack learning platform looks like in production, and studying real systems like this is part of how I sharpen my own work as a full-stack developer.

If you're a business owner or founder looking to build something with this level of thought behind it, a learning platform, a content-driven product, a CMS-backed site that stays fast as it scales, that's exactly the kind of full-stack work I take on. You can see more of what I do at rahulwebdev.in or reach out directly to talk through your project.