Docs
⌕
← Courses
Getting Started

Welcome to AngelCode Labs

AngelCode Labs is an online coding school where you learn HTML, CSS, JavaScript, PHP, and SQL by actually building things — not just reading about them.

🎬
Video Lessons
Structured lessons with YouTube videos, code examples, and knowledge quizzes per chapter.
⚡
Live Playground
Write and run HTML, CSS, JS, PHP, and SQL right in the browser. No setup needed.
🎯
Guided Tasks
Step-by-step coding challenges with real AI feedback on your code as you go.
🏗️
Capstone Projects
Apply everything you've learned by building a real project from scratch at the end of each course.

#How it works

1
Create a free account
Sign up with your email. No credit card required. You get full access to the HTML, CSS, and JavaScript courses immediately.
2
Pick a course and start learning
Each course is divided into chapters. Work through them in order — watch the videos, read the notes, try the code examples in the playground.
3
Test yourself
Each lesson has a short quiz. You need to pass the quiz and watch at least 80% of the video to mark a lesson complete.
4
Practice with guided tasks
Use the guided tasks to build something real, step by step. The AI checks your code at each step and tells you exactly what to fix.
5
Submit your capstone project
At the end of each course, build and submit a capstone project — a real piece of work you can add to your portfolio.
Getting Started

Courses

Five courses covering the full web development stack — from your first HTML page to relational databases.

HTML
HTML & SEO Mastery
Beginner · Free
CSS
CSS Mastery
Beginner · Free
JS
JavaScript Mastery
Intermediate · Free
PHP
PHP Mastery
Intermediate · Pro
SQL
SQL Mastery
Intermediate · Pro

#Course structure

Every course follows the same structure so you always know where you are:

  • Chapters — the main topics. Each course has several chapters. Tick a chapter complete when you've finished its content.
  • Video Lessons — each chapter contains video lessons. Watch the video, check the code example, then pass the quiz to mark a lesson complete.
  • Guided Tasks — practical coding challenges tied to the course. Available in the 🎯 Guided Tasks section on the course page.
  • Exercises & Projects — practice exercises and a capstone project are linked in the course's Practical Projects section.

#Free preview lessons

Each chapter has one free preview lesson — the first lesson in that chapter. You can watch it without a Pro account. All other lessons in that chapter require Pro.

💡
The HTML, CSS, and JavaScript courses are completely free — every lesson, every quiz, every guided task. No Pro account needed.
Getting Started

Accounts & Plans

Create a free account to start learning. Upgrade to Pro when you're ready to unlock the full curriculum.

Feature Free Pro
HTML, CSS, JavaScript courses✓✓
PHP and SQL courses—✓
First lesson per chapter (preview)✓✓
All video lessons & quizzes—✓
Live code playground✓✓
Download your code✓✓
Save files in playground (up to 30)—✓
Free guided tasks✓✓
Pro guided tasks—✓
Progress tracking & streaks✓✓
Capstone project submission✓✓

#Verifying your email

After registering, you'll receive a verification email from AngelCode Labs. Click the link in that email to activate your account. The link expires after 24 hours.

📬
Didn't get the email? Check your spam or junk folder. The email comes from info@angelbiz.net. If it's not there, contact support.

#Resetting your password

Go to the login page and click Forgot password?. Enter your email and you'll receive a reset link. The link is valid for 1 hour.

Learning

Video Lessons

Each chapter contains one or more video lessons. Lessons combine a YouTube video, a code example you can open in the playground, and a short quiz.

#Completing a lesson

A lesson is marked complete when both of these are done:

  • Watch the video — you need to watch at least 80% of the video. The progress is tracked automatically while the video plays.
  • Pass the quiz — answer all quiz questions correctly. You can retry as many times as you like.

When both are done, a completion banner appears and the lesson is ticked in the sidebar. Once all lessons in a chapter are complete, that chapter is automatically marked done on your course page.

💡
You can skip around in the video but it won't count as watched until 80% of total watch time is reached. Leaving and coming back is fine — progress is saved.

#Code examples

Many lessons include a code example below the video. Click Open in Playground to load that code directly into the live playground in a new tab — ready to run and experiment with.

#The lesson sidebar

The sidebar on the lesson page shows all chapters and their lessons. Click any chapter to expand it and see its lessons. Icons show the status of each lesson:

  • 🎬 — video watched but quiz not yet passed
  • ✓ (green) — lesson fully complete (video + quiz)
  • 🔒 — lesson requires Pro
Learning

Progress & Streaks

Your learning progress is tracked at chapter level and lesson level. Keep your streak alive by logging in and doing something every day.

#Chapter progress

On the course page, you can manually tick chapters complete using the checkbox next to each chapter title. You can also un-tick them if you want to revisit something.

If the chapter has video lessons, it will be auto-ticked once all its lessons are complete. The progress bar at the top of the course page updates in real time.

#Streaks

Your streak counts how many consecutive days you've been active on the platform. Activity means: visiting a course page, watching a lesson, using the playground, or completing a guided task step.

  • Your streak counter is shown on your dashboard.
  • Miss a day and your streak resets to 1.
  • The streak updates once per day — multiple visits on the same day count as one.
Learning

Quizzes

Each video lesson ends with a short knowledge quiz. You need to answer every question correctly to pass. Retries are unlimited.

#Question types

  • Multiple choice — pick the correct answer from 3–4 options.
  • Code output — a code snippet is shown. Pick what the correct output would be.
📝
You must get all questions right in a single attempt to pass the quiz. If you get one wrong, the attempt fails and you can try again immediately.
Learning

Capstone Projects

Each course ends with a capstone project — a real-world task that uses everything you've learned in that course. Build it, push it to GitHub, and submit the link.

#Submitting a project

1
Build the project
Read the project brief on the course page. Use the playground to write and test your code, then download it.
2
Push to GitHub
Create a new public repository on GitHub and push your project files. Make sure the repository is public so it can be reviewed.
3
Submit the link
Paste your GitHub repository URL into the submission box on the course page and click Submit.
🎓
Your project submission link is saved — you can update it any time if you improve your project later.
Tools

Live Code Playground

The playground lets you write and run code in five languages — directly in the browser. No installation, no setup.

#Languages

  • HTML — live preview updates automatically as you type. See your page render in real time.
  • CSS — live preview updates automatically. Great for experimenting with layouts and styles.
  • JavaScript — runs in a sandboxed environment. console.log() output appears in the panel below the editor.
  • PHP — code is sent to the server and the output is returned. Simulates a real PHP environment.
  • SQL — runs against an in-browser SQLite database. You can create tables, insert data, and run queries.

#Saving your work Pro

Pro users can save code files to their account and load them back in any session.

  • Click the 💾 Save button (or press Ctrl+S) to save the current file.
  • Give it a filename — if a file with the same name and language already exists, it will be overwritten.
  • Click 📁 Files to open the files panel. Filter by language, click a file to load it.
  • You can save up to 30 files. Each file can be up to 64 KB.

#Downloading your code

Click the ⬇ Download button at any time to download the current tab's code as a file. This works for all users — no Pro account needed.

#Keyboard shortcuts

Save file (Pro)
CtrlS
Indent (in editor)
Tab
⚠️
Unsaved work is lost when you close or refresh the tab. Download your code or save it (Pro) before leaving.
Tools

Guided Tasks

Guided tasks are step-by-step coding challenges where an AI checks your work at each step and tells you exactly what you got right or wrong.

#How tasks work

1
Open the task
From the course page, find the 🎯 Guided Tasks section and click Start Task (or Resume if you've started before).
2
Read the step instruction
The task panel on the left shows what you need to build for this step. Read it carefully before writing any code.
3
Write your code
Write your solution in the editor on the right. For HTML and CSS tasks, the preview updates live so you can see your output.
4
Click ⚡ Check Step
The AI reads your code and checks it against the step requirement. In 1–2 seconds it tells you whether you passed and what to improve if not.
5
Move to the next step
If you pass, the next step loads automatically. Complete all steps and the task is done — 🏆.

#Hints

Every step has an optional hint. Click the 💡 Hint button if you're stuck. The hint gives you a nudge in the right direction without giving away the full answer.

#Resuming a task

Your progress is saved automatically after each step you pass. If you close the browser and come back, the task resumes from where you left off. The course page shows your current step and a progress bar.

#Replaying a completed task

After completing a task, you can replay it from step 1 using the ↺ Replay Task button on the completion screen. Replaying doesn't reset your completion status.

🤖
Task checking is powered by Claude AI (Anthropic). The AI only evaluates whether your code meets the step requirement — it doesn't store your code or use it for training.
Account Help

Upgrading to Pro

Pro gives you access to the PHP and SQL courses, all video lessons, playground file saving, and all guided tasks.

#How to upgrade

1
Go to the Upgrade page
Click any Pro-locked feature or visit the Upgrade page directly.
2
Make a payment
Follow the payment instructions on the upgrade page. Keep your payment reference number — you'll need it in the next step.
3
Submit your reference
Enter your payment reference in the form on the upgrade page and submit. Your account will be upgraded once payment is confirmed — usually within a few hours.
⭐
Once your account is upgraded to Pro, it applies immediately — no need to log out and back in. All Pro content will unlock straight away.
Account Help

Frequently Asked Questions

Answers to the most common questions about the platform.

Do I need to know anything to start? ▼
No. The HTML course is designed for complete beginners. You don't need any prior coding experience. Just work through the chapters in order.
Can I learn on my phone? ▼
Yes — the platform is mobile-responsive. The lesson pages, course pages, and playground all work on mobile. For the playground, a tablet or larger screen is more comfortable for writing code.
Why hasn't my chapter ticked as complete? ▼
If the chapter has video lessons, it auto-ticks when all lessons are done (video watched + quiz passed). If it has no lessons, tick it manually on the course page.
I watched the whole video but it's not marked as watched — why? ▼
You need to watch at least 80% of the video for it to register. If you skipped to the end, it won't count. Go back and watch the parts you missed.
The AI task checker said I failed but my code looks right — what do I do? ▼
Read the feedback carefully — it explains exactly what's missing. Check your spelling, make sure CSS class names match, and look at the step instruction again. If you're really stuck, click the 💡 Hint button.
I can't save files in the playground — why? ▼
File saving is a Pro feature. If you're on a free account, use the ⬇ Download button instead to save your code locally.
I submitted my upgrade request — when will it be approved? ▼
Upgrades are usually approved within a few hours during business hours. You'll receive a confirmation email when your account is upgraded.
I can't log in — what should I do? ▼
First, check that you're using the right email address. Then try resetting your password using the Forgot password? link on the login page. Make sure your email is verified — check your spam folder for the verification email.
Can I do the PHP and SQL courses without finishing HTML, CSS, and JS first? ▼
Yes — there's no forced order. But PHP and SQL will make much more sense if you have a solid understanding of web fundamentals first. We recommend working through HTML, CSS, and JS before starting PHP.
Is my code saved in the playground between sessions? ▼
Only if you're a Pro user and you use the 💾 Save button. Otherwise the playground resets when you close or refresh the tab. Always download important code before leaving.

Still have a question?

✉ Contact Support