Week 1
Build a Resume Page
Learn HTML by building a complete CV page from scratch
Project: Resume Page (CV Page)
-
1
Create an
index.html file and write the basic structure: <!DOCTYPE>, <html>, <head>, <body>
-
2
Add your name as a heading
<h1>, a description with <p>, and your photo with <img>
-
3
Create a skills section as an unordered list
<ul> and an experience section as an ordered list <ol>
-
4
Add a
<table> for educational qualifications (Year, University, Major)
-
5
Add links
<a> to your accounts (GitHub, LinkedIn) and structure the page with semantic elements: <header>, <main>, <section>, <footer>
HTML Structure
Headings & Paragraphs
Lists
Tables
Links & Images
Semantic HTML5
Week 2
Build a Registration Form + Style with CSS
Learn forms and basic CSS by building a beautiful sign-up page
Project: Sign Up Page
-
1
Create a
<form> with: name, email, password, confirm password, gender <radio>, country <select>
-
2
Add HTML5 validation:
required, type="email", minlength, pattern
-
3
Link an external CSS file and choose fonts and colors for the page
-
4
Style the form: rounded borders, shadows, background, spacing with
padding and margin
-
5
Style buttons with colors and hover effects using
:hover and :focus
Forms
Input Types
HTML5 Validation
CSS Selectors
Colors & Fonts
Box Model
Week 3
Build a Product Landing Page
Learn Flexbox, Grid, and Positioning by building a professional Landing Page
Project: Mobile App Landing Page
-
1
Create a fixed Navbar with
position: fixed containing a logo + horizontal links using flexbox
-
2
Create a Hero Section with a large background image + centered heading + CTA button
-
3
Create a Features section with
CSS Grid: 3 columns, each with an icon + title + description
-
4
Add a Testimonials section with
flexbox + a contact section
-
5
Create a Footer with links + copyright using
grid or flexbox
Flexbox
CSS Grid
Positioning
Background Images
Display Property
Week 4
Build a Responsive Restaurant Website with Bootstrap
Learn Responsive Design and Bootstrap by building a full website that works on all screens
Project: Responsive Restaurant Website
-
1
Build a page without Bootstrap first and try
@media queries to change layout based on screen size
-
2
Install Bootstrap and rebuild the page: responsive Navbar with hamburger menu + Hero with Carousel
-
3
Create a Menu section with Cards + Grid System:
col-lg-4 col-md-6 col-12
-
4
Add a reservation Modal + table booking form with Bootstrap Forms
-
5
Add CSS animations:
transition on buttons and @keyframes for element entrance effects
Media Queries
Responsive Design
Bootstrap Grid
Bootstrap Components
Transitions
Animations
Monthly Project
Complete Responsive Personal Portfolio Website
- Home page with Hero Section
- "About Me" section with photo and bio
- Skills section with Progress Bars
- Projects gallery with Cards + Grid
- Complete contact form
- Fixed Navbar + Smooth Scroll
- 100% responsive (mobile + tablet + desktop)
- CSS Animation effects
Week 5
Build an Interactive Calculator
Learn JS fundamentals by building a calculator that works on click
Project: Calculator
-
1
Start with the Console: try
let, const, arithmetic operations, typeof
-
2
Write a function
function calculate(a, op, b) that uses if/else or switch to execute the operation
-
3
Design the calculator interface with HTML + CSS (number buttons + operation buttons + display screen)
-
4
Connect buttons with JS: clicking a number shows it on screen, clicking = calculates the result
-
5
Add a C button to clear, handle division by zero, and support decimal numbers
Variables
Data Types
Operators
if/else & switch
Functions
Events Basics
Week 6
Build an Interactive Quiz Game
Learn arrays, objects, and loops by building a quiz game
Project: Quiz Game
-
1
Create an array of Objects, each containing:
question, options[], correct
-
2
Use
forEach or for...of to display questions one by one
-
3
Write an Arrow Function that checks the answer and calculates the score
-
4
Use Destructuring:
const { question, options } = questions[i]
-
5
Add a Timer for each question + final results screen with Template Literals
Arrays
Objects
Loops
Arrow Functions
Destructuring
Template Literals
Week 7
Build a To-Do List App
Learn DOM Manipulation and events by building a complete To-Do List
Project: To-Do List
-
1
Create an input field + "Add" button and use
querySelector and addEventListener('click')
-
2
On click:
createElement('li'), set the text with textContent, and appendChild to the list
-
3
Add a delete button for each task + use Event Delegation on the parent list instead of each button
-
4
Add a "completed" feature by clicking on a task:
classList.toggle('completed')
-
5
Add task editing on double-click + filtering (All / Completed / Incomplete)
querySelector
createElement
addEventListener
classList
Event Delegation
DOM CRUD
Week 8
Build a Weather App with API
Learn Fetch API, async/await, and localStorage by building a Weather App
Project: Weather App
-
1
Register on OpenWeatherMap and get an API Key, test the API with
fetch() in the Console
-
2
Write a function
async function getWeather(city) using await fetch() and response.json()
-
3
Use
try/catch to handle errors (city not found, no internet)
-
4
Display data with a nice design: temperature, humidity, wind, weather icon. Use
map and filter to show a 5-day forecast
-
5
Save the last searched city in
localStorage and display it automatically when the app opens
Fetch API
async/await
Promises
JSON
try/catch
localStorage
map & filter
Monthly Project
Personal Budget Tracker App
- Add income and expenses
- Automatic balance calculation
- Categorize expenses (food, transport...)
- Filter by category and date
- Save data in localStorage
- Simple chart using CSS
- Delete and edit transactions
- Responsive and beautiful design
Week 9
Build a Dynamic Profile Cards Website
Learn PHP basics by building pages that change based on data
Project: Profile Card Generator
-
1
Install XAMPP and create your first
index.php file in htdocs and display "Hello" with echo
-
2
Create an Associative array with people's data and use
foreach to display a card for each person
-
3
Use
if/else to change card color based on role (developer = blue, designer = green)
-
4
Create a function
function renderCard($person) that takes data and returns the card's HTML
-
5
Display the number of people and current date with
date() and try string functions: strtoupper, strlen
PHP Basics
Variables
Arrays
Loops
Functions
String Functions
Week 10
Build a Contact & Registration System
Learn forms, sessions, and OOP by building a real contact system
Project: Contact Messages System + Simple Registration
-
1
Create a contact form and receive data with
$_POST, sanitize with htmlspecialchars and trim
-
2
Add full validation: name required, valid email with
filter_var, message over 10 characters
-
3
Save messages in a JSON file using
file_put_contents and json_encode
-
4
Create a simple registration + login page with
$_SESSION (without a database)
-
5
Create
class User and class Message with OOP including __construct and methods
$_POST / $_GET
Validation
Sessions
File Handling
OOP
Security Basics
Week 11
Build an E-Commerce Database
Learn SQL by designing and building a real database and querying it
Project: E-Store Database
-
1
Open phpMyAdmin and create a database
store with tables: users, products, categories, orders
-
2
Define data types:
INT AUTO_INCREMENT, VARCHAR, DECIMAL, DATE + Primary Keys
-
3
Add Foreign Keys (each product linked to a category, each order linked to a user) and
INSERT sample data
-
4
Write queries: top 5 expensive products
ORDER BY ... LIMIT, product count per category GROUP BY
-
5
Use
JOIN to display orders with user name and product name, and try LEFT JOIN for empty categories
CREATE TABLE
Data Types
Primary / Foreign Keys
CRUD Operations
JOINs
GROUP BY / ORDER BY
Week 12
Build a Complete Student Management System
Learn connecting PHP with MySQL by building a real CRUD system
Project: Student Management System
-
1
Connect to the database with
new PDO() and display a student list in an HTML table
-
2
Create an add student page: form that saves with
INSERT INTO using Prepared Statements prepare() + execute()
-
3
Create an edit page: fetch student data with
SELECT WHERE id = ? and update with UPDATE
-
4
Add delete with confirmation + search by name
WHERE name LIKE ? + Pagination with LIMIT/OFFSET
-
5
Add a login system: register, sign in, protect pages with
$_SESSION
PDO
Prepared Statements
CRUD with PHP
Search & Pagination
Login System
SQL Injection Prevention
Monthly Project
Book Library Management System
- Login and permissions (Admin / User)
- Full CRUD for books with cover image upload
- Categorize books by genre
- Advanced search and filtering
- Pagination
- Book borrowing system
- Simple statistics dashboard
- Responsive design with Bootstrap
Week 13
Build a Multi-Page Website with Laravel
Learn Laravel basics by building a company website with Routing and Blade
Project: Company Website
-
1
Install Composer then Laravel:
composer create-project laravel/laravel company and explore the directory structure
-
2
Add Routes in
web.php: Home, About, Services, Contact. Create a PagesController
-
3
Create a base Layout with Blade:
@extends('layout'), @section, @yield with shared Navbar and Footer
-
4
Pass data from Controller:
return view('services', compact('services')) and display with @foreach
-
5
Add
@include('partials.card') for shared components + use @if and {{ }} for dynamic display
Laravel Setup
MVC Pattern
Routing
Controllers
Blade Templates
Layouts
Week 14
Build a Product CRUD System with Eloquent
Learn Migrations and Eloquent ORM by building a product management system
Project: Product Manager
-
1
Configure
.env and create a Migration: php artisan make:migration create_products_table, define columns, and migrate
-
2
Create a Model:
php artisan make:model Product, define $fillable, then create a Seeder for sample data
-
3
Display products:
Product::orderBy('created_at','desc')->paginate(10) in a table with pagination
-
4
Add creation: form with
@csrf + Product::create($request->validated())
-
5
Add edit
find + update and delete delete + Flash Messages for confirmation
Migrations
Eloquent ORM
CRUD Operations
Seeders
Pagination
CSRF Protection
Week 15
Build a Blog with Authentication
Learn relationships, validation, and authentication by building a complete blog
Project: Complete Blog System
-
1
Install Breeze:
composer require laravel/breeze and php artisan breeze:install - ready-made register + login + logout
-
2
Create tables:
posts and categories with relationships: Post belongsTo User and belongsTo Category
-
3
Create Resource Controller + Validation:
'title' => 'required|min:5', 'body' => 'required' and display @error
-
4
Add image upload:
$request->file('image')->store('posts', 'public') and display the image
-
5
Protect routes with
middleware('auth') - users can only view and edit their own posts
Laravel Breeze
Authentication
Relationships
Validation
File Upload
Middleware
Week 16
Final Capstone Project
Combine everything you learned into one large professional project
Project: Task Manager
-
1
Plan the project: sketch tables and relationships on paper, create Migrations for: users, tasks, categories, task_category
-
2
Create Models with relationships: Task
belongsTo User, Task belongsToMany Category + Auth with Breeze
-
3
Build full CRUD for tasks with Validation + file attachments + task statuses (pending/in_progress/completed)
-
4
Build a Dashboard showing: statistics, today's tasks, filter by status/category, search by name
-
5
Style everything with Bootstrap 5 + test on mobile + review code + prepare for submission
Full Stack
Project Planning
Many-to-Many
Dashboard
Filtering
File Upload
Capstone Project
Complete Task Manager with Laravel
- User system (register/login/logout)
- Dashboard for each user
- Full CRUD for tasks
- Categories (Many-to-Many)
- Statuses: pending / in progress / completed
- Advanced filtering and search
- File attachments
- Pagination + Bootstrap design
Al-Aqsa University