Learn JS in 30 Days

A structured, project-driven JavaScript course built with Django | from variables to async/await, one lesson per day.

---

---

About

Learn JS in 30 Days is a full-stack Django web application that guides learners through JavaScript, from first principles to modern async patterns, in a structured 30-lesson curriculum. Each lesson includes theory, runnable code examples, a hands-on mini project, and a quiz. Completing all 30 lessons unlocks a timed final exam; passing earns a verifiable completion certificate.

Built and designed by Laser Frame Studio.

---

Certificate

After passing the final exam with a score of 70% or above, learners receive a personalized completion certificate issued by Laser Frame Studio.

Sample certificate issued on course completion

---

Curriculum: 30 Lessons across 5 Stages

Stage 1: Foundations Days 1–6

Day	Lesson
1	Introduction and Setup
2	Variables and Data Types
3	Operators and Expressions
4	Conditional Statements
5	Loops and Iteration
6	Functions

Stage 2: Data Structures Days 7–11

Day	Lesson
7	Arrays
8	Array Methods
9	Objects
10	Object Methods and this
11	Strings in Depth

Stage 3: The Browser & DOM Days 12–15

Day	Lesson
12	Introduction to the DOM
13	DOM Events
14	Forms and Validation
15	Building a To-Do App

Stage 4: Modern JavaScript Days 16–21

Day	Lesson
16	Scope and Closures
17	ES6+ Syntax
18	Spread, Rest, and Default Parameters
19	Higher-Order Functions
20	Error Handling
21	Asynchronous JavaScript Basics

Stage 5: Advanced & Real-World Days 22–30

Day	Lesson
22	Promises
23	Async and Await
24	Fetch API and JSON
25	Local Storage
26	Classes and OOP
27	JavaScript Modules
28	Regular Expressions
29	Debugging and Testing Basics
30	Capstone Project

---

Tech Stack

Layer	Technology
Backend	Django 5.0, Python 3.12
Database	PostgreSQL (production), SQLite (development)
Auth	Custom AbstractUser model
Static files	WhiteNoise
Server	Gunicorn
Deployment	Railway
Styling	Custom CSS with CSS variables

---

Features

• 30 structured lessons with markdown-rendered content and syntax-highlighted code blocks
• Per-lesson quiz with instant feedback and explanation
• Progress tracking: lessons unlock sequentially per stage
• Timed 45-minute final exam (30 questions, randomised order)
• Auto-generated PDF certificate on passing (≥ 70%)
• Shareable certificate verification URL
• Custom user registration and authentication
• Django admin panel for content management
• Fully responsive layout

---

Local Development

Prerequisites

• Python 3.12+
• Git

Setup

# Clone the repository
git clone https://github.com/YOUR_USERNAME/jslearn.git
cd jslearn

# Create and activate a virtual environment
python -m venv venv
source venv/bin/activate        # Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Create a .env file
cp .env.example .env            # edit SECRET_KEY at minimum

# Run migrations
python manage.py migrate

# Seed all 30 lessons and quiz questions
python manage.py seed_lessons

# Create an admin user
python manage.py createsuperuser

# Start the development server
python manage.py runserver

Visit http://127.0.0.1:8000 in your browser.

Environment Variables

Variable	Required	Default	Description
SECRET_KEY	✅	-	Django secret key
DEBUG	❌	True	Set to False in production
DATABASE_URL	❌	SQLite	PostgreSQL connection string
ALLOWED_HOSTS	❌	localhost	Comma-separated list of hosts
CERT_BASE_URL	❌	-	Base URL for certificate links

---

Deployment on Railway

1. Push to GitHub

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/jslearn.git
git push -u origin main

2. Create a Railway project

1. Go to railway.app and sign in with GitHub
2. Click New Project → Deploy from GitHub repo → select jslearn
3. Add a PostgreSQL database: New → Database → Add PostgreSQL Railway injects DATABASE_URL automatically.

3. Set environment variables

In your Railway service → Variables tab:

SECRET_KEY=your-long-random-secret-key
DEBUG=False
ALLOWED_HOSTS=*
SECURE_SSL_REDIRECT=False

4. Set a pre-deploy command

In Settings → Deploy → Pre-deploy command:

python manage.py migrate && python manage.py seed_lessons

5. Generate a public URL

Settings → Networking → Generate Domain

Your site is live at https://your-project.up.railway.app.

---

Project Structure

jslearn/
├── accounts/          # Custom user model, registration, login
├── certificates/      # Certificate generation and verification
├── courses/           # Lessons, quizzes, exam, progress tracking
│   └── management/
│       └── commands/
│           └── seed_lessons.py   # Seeds all 30 lessons into the DB
├── jslearn/           # Django project settings and root URLs
├── static/            # CSS, JS, images
├── templates/         # HTML templates
├── Procfile           # Gunicorn start command for Railway
├── requirements.txt
└── runtime.txt        # Python version pin

---

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you'd like to change.

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit your changes: git commit -m "Add my feature"
4. Push to the branch: git push origin feature/my-feature
5. Open a pull request

---

License

This project is licensed under the MIT License. See LICENSE for details.

---

Built with ☕ by Laser Frame Studio