🚀 Learn with Project — Student Performance Predictor
A 12-stage walk-through that builds a REAL ML web app from scratch. Every stage teaches ONE concept, gives you a 2-5 line tiny task, shows what to expect, and previews the next stage. The teaching style follows the loop: concept → tiny task → check → next — same loop you'd use with a mentor.
The 5 layers naturally connect because each one solves a gap the previous one couldn't:
Student
| enters info
v
HTML form
|
v
Jinja template (renders form + result with shared shell)
|
v
FastAPI route (POST /predict)
|
v
Python / ML (loads model.pkl, calls .predict)
|
v
Trained model (created offline by train.py)
|
v
Prediction (a float, e.g. 81.4)
|
v
Jinja result page
|
v
Student sees the number
13 stages
4 routes total
~600 lines of code
Python → ML → FastAPI → Jinja → HTML
0
Why this project? The 5-layer motive
Pick a project where every layer (Python, ML, FastAPI, Jinja, HTML) has an obvious reason to exist. Meet the Student Performance Predictor.
Python + ML (offline)
›
1
Meet the dataset — 4 questions you always ask
head(), shape, info(), describe(). The 4 questions you ask of ANY dataset before touching ML.
Python + ML (offline)
›
2
3 plots that tell you if ML is even possible
Scatter plot of each feature vs the target. If there's no visible relationship, ML can't magically find one.
Python + ML (offline)
›
3
Clean the data + split into X and y
Drop nulls, encode categoricals, separate features (X) from target (y). The last cleaning step before ML.
Python + ML (offline)
›
4
Your first ML model — 4 lines that do the magic
train_test_split + LinearRegression.fit + .predict + .score. The smallest possible ML pipeline.
Python + ML (offline)
›
5
What does R^2 = 0.80 actually mean?
MAE, MSE, RMSE, R^2 — 4 metrics that answer 4 different questions about model quality.
Python + ML (offline)
›
6
Find your worst predictions — error analysis
Don't just calculate a metric. Investigate WHERE the model fails. This is what separates real ML from API-calling.
Python + ML (offline)
›
7
Try a better model — RandomForest
Same X, same y, different model. RandomForest captures non-linear patterns that LinearRegression can't.
Python + ML (offline)
›
8
First FastAPI route — POST /predict
Load model.pkl once at startup. Expose POST /predict that takes JSON input and returns a predicted score.
FastAPI (first route)
›
9
Add Jinja2 templates — the form page
base.html shell + home.html form. POSTs to the same /predict endpoint — but now from a browser, not curl.
Jinja2 templates
›
10
Add CSS — cards layout, hover effects
One stylesheet. Cards with hover lift, colored accent, responsive form. The visual jump from 'tutorial' to 'product'.
CSS + cards
›
11
Add a /model-info page — show metrics + feature importance
The model is a black box to users. Surface the R^2, MAE, and which features matter most. Trust comes from transparency.
Model transparency
›
12
Wrap up — folder structure, deploy, what's next
Recap the 12 stages, see the final folder tree, deploy to Render in 5 minutes, and choose what to learn next.
Deploy + recap
›