Student Information System

Project Overview

My introduction to frontend web development. Barebones HTML, CSS, and JavaScript — no frameworks, no build tools. Just a static page that talks to a local backend (the Student Information System API project) and renders student / course / enrollment data.

Tech Stack

• HTML (semantic markup, no templates)
• CSS (vanilla, no preprocessors)
• JavaScript (vanilla, fetch API, no libraries)

That's it. The entire project ran in a browser by opening index.html. For local development I used npx http-server . to serve it on localhost:8080.

What It Does

The page renders three views — Students, Courses, Enrollments — each backed by a fetch() call to the corresponding API endpoint. Forms POST new entries; tables update without a full page reload thanks to a simple manual DOM-diffing approach.

What I Learned

• Starting with vanilla HTML/CSS/JS before touching a framework was the right call. You internalize the DOM API, the box model, the cascade. Frameworks are easier to understand later when you know what they're abstracting over.
• fetch + async/await is enough for almost any frontend API call. Axios is convenient but you don't need it.
• CORS will bite you the first time you hit it. Configuring the Express backend with app.use(cors()) is the fix.
• Vanilla DOM manipulation gets unwieldy past ~3 views. This is the project that convinced me React was worth the complexity — see the React rewrite.
• No build tools is a feature, not a bug. The whole project is ~500 lines of code and zero dependencies. It will still run in a browser in 2040.