Week 1
HTML Basics - Build a CV Page
Learn HTML structure, tags, lists, links, images, and tables by building a complete CV page
Project: 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 connect sections with internal anchors
HTML Structure
Headings & Paragraphs
Lists
Tables
Links & Images
Week 2
HTML Forms & Validation - Build a Registration Form
Learn form elements, input types, validation, select, and textarea
Project: Registration Form
-
1
Create a
<form> with: name, email, password, confirm password, gender <radio>, country <select>
-
2
Add a
<textarea> for bio, <checkbox> for terms, and a <datalist> for city suggestions
-
3
Apply HTML5 validation:
required, type="email", minlength, pattern for phone numbers
-
4
Use new HTML5 input types:
date, number, range, color, url
-
5
Group fields with
<fieldset> and <legend>, add proper <label> elements for accessibility
Forms
Input Types
HTML5 Validation
Select & Textarea
Fieldset & Legend
Labels
Week 3
Semantic HTML5 + Multimedia + Accessibility
Learn semantic elements, audio, video, and accessibility best practices by building a blog article page
Project: Blog Article Page
-
1
Structure the page with semantic elements:
<header>, <nav>, <main>, <article>, <aside>, <footer>
-
2
Add a
<video> element with controls and fallback text, and an <audio> player for a podcast section
-
3
Use
<figure> and <figcaption> for images, <blockquote> and <cite> for quotes
-
4
Add accessibility:
alt on all images, aria-label on nav, proper heading hierarchy (h1 > h2 > h3)
-
5
Embed external content with
<iframe> (YouTube video), add <time> for dates and <details>/<summary> for FAQ
Semantic HTML5
Video & Audio
Figure & Figcaption
Accessibility
ARIA Attributes
iframe
Module Project
Complete HTML-Only Portfolio Structure
- Proper semantic structure throughout
- Navigation with internal anchor links
- About section with photo and bio
- Skills table with qualifications
- Contact form with full validation
- Embedded video introduction
- Accessible with proper ARIA labels
- Blog section with article layout
Week 4
CSS Basics - Build a Styled Profile Page
Learn selectors, box model, colors, fonts, and backgrounds
Project: Styled Profile Page
-
1
Link an external CSS file and explore selectors: element, class
.name, ID #header, and combinators
-
2
Style the profile card:
border-radius, box-shadow, padding, margin - understand the Box Model
-
3
Apply colors with
hex, rgb(), hsl() and gradients with linear-gradient for backgrounds
-
4
Import Google Fonts, set
font-family, font-size, font-weight, line-height, and text-transform
-
5
Add pseudo-classes
:hover, :focus, :nth-child and pseudo-elements ::before, ::after for decorations
CSS Selectors
Box Model
Colors & Gradients
Fonts & Typography
Backgrounds
Pseudo-classes
Week 5
CSS Layout - Build a Landing Page
Master Flexbox, Grid, and Positioning by building a professional landing page
Project: Landing Page
-
1
Create a fixed Navbar with
position: fixed containing a logo + horizontal links using display: flex
-
2
Build a Hero Section with a large background image + centered content using
flexbox alignment
-
3
Create a Features section with
CSS Grid: grid-template-columns: repeat(3, 1fr), each with icon + title + description
-
4
Add a Testimonials section with
flexbox + a pricing section with grid cards
-
5
Create a Footer with multi-column layout using
grid, practice position: relative/absolute for overlapping elements
Flexbox
CSS Grid
Positioning
Background Images
Display Property
Z-index
Week 6
CSS Animations + Transitions + Variables
Learn animations, transitions, and CSS custom properties by building an animated portfolio section
Project: Animated Portfolio Section
-
1
Define CSS variables:
:root { --primary: #e94560; --bg: #1a1a2e; } and use them throughout the page
-
2
Add
transition on cards: smooth color, transform, and shadow changes on hover with transition: all 0.3s ease
-
3
Create
@keyframes animations: fadeIn, slideUp, pulse effects for page load and scroll entrance
-
4
Build an image gallery with hover overlay effect using
opacity, transform: scale(), and filter
-
5
Add a loading spinner animation, animated skill bars, and a dark/light theme toggle using CSS variables
CSS Variables
Transitions
@keyframes
Transform
Filter
Animation Timing
Week 7
Responsive Design + Bootstrap 5
Learn responsive design and Bootstrap 5 by building a restaurant website and completing your full portfolio
Project: Restaurant Website + Full Portfolio
-
1
Build a page with
@media queries: change layout at breakpoints (mobile, tablet, desktop)
-
2
Install Bootstrap 5 and build a responsive Navbar with hamburger menu + Hero with Carousel component
-
3
Create a Menu section with Bootstrap Cards + Grid System:
col-lg-4 col-md-6 col-12
-
4
Add a reservation Modal + table booking form with Bootstrap Forms + use Bootstrap utility classes
-
5
Combine everything into a complete Portfolio: responsive, animated, with all HTML/CSS skills applied
Media Queries
Responsive Design
Bootstrap Grid
Bootstrap Components
Bootstrap Utilities
Mobile First
Module Project
Complete Responsive Personal Portfolio Website
- Home page with animated Hero Section
- "About Me" section with photo and bio
- Skills section with animated Progress Bars
- Projects gallery with Cards + Grid
- Complete contact form with styling
- Fixed Navbar + Smooth Scroll
- 100% responsive (mobile + tablet + desktop)
- CSS animations + dark/light theme with variables
Week 8
JS Basics - Build a Calculator + Quiz Game
Learn variables, types, conditions, loops, functions, arrays, and objects
Project: Calculator + Quiz Game
-
1
Start with the Console: try
let, const, arithmetic operations, typeof, strings, and template literals
-
2
Write a function
function calculate(a, op, b) using if/else or switch. Build the calculator UI and connect buttons
-
3
Learn arrays and objects: create an array of question objects with
question, options[], correct
-
4
Use
for, forEach, for...of loops to display quiz questions. Write arrow functions and use destructuring
-
5
Add scoring logic, a timer for each question, and a results screen. Handle edge cases (division by zero, empty input)
Variables & Types
Conditions
Loops
Functions
Arrays
Objects
Arrow Functions
Week 9
JS DOM + Events - Build a To-Do List + Color Picker
Learn DOM manipulation, events, event delegation, and classList
Project: To-Do List + Color Picker
-
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. Toggle completed with
classList.toggle('completed')
-
4
Add task editing on double-click + filtering (All / Completed / Incomplete)
-
5
Build a Color Picker: sliders for RGB values, live preview, hex code display, and a palette of saved colors using
classList.add
querySelector
createElement
addEventListener
classList
Event Delegation
DOM CRUD
Week 10
Fetch API + localStorage - Build a Weather App + Budget Tracker
Learn Fetch API, async/await, JSON, and localStorage
Project: Weather App + Budget Tracker
-
1
Register on OpenWeatherMap, get an API Key, and test the API with
fetch() in the Console
-
2
Write
async function getWeather(city) using await fetch() and response.json(). Handle errors with try/catch
-
3
Display weather data: temperature, humidity, wind, weather icon. Use
map and filter for a 5-day forecast
-
4
Save the last searched city in
localStorage.setItem() and load it on page open with getItem()
-
5
Build a Budget Tracker: add income/expenses, calculate balance, categorize, save all data in
localStorage as JSON
Fetch API
async/await
Promises
JSON
try/catch
localStorage
map & filter
Module 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 11
PHP Basics + Forms + Sessions + OOP
Learn PHP fundamentals, form handling, sessions, and OOP by building profile cards and a contact form
Project: Profile Cards + Contact Form
-
1
Install XAMPP and create your first
index.php file in htdocs. Use echo, variables, arrays, and foreach
-
2
Create an associative array of people and use
foreach + if/else to display styled profile cards dynamically
-
3
Build a contact form: receive data with
$_POST, sanitize with htmlspecialchars, validate with filter_var
-
4
Create a simple login page with
$_SESSION: start session, store user data, protect pages, logout
-
5
Introduce OOP: create
class User and class Message with __construct, properties, and methods
PHP Basics
Variables & Arrays
$_POST / $_GET
Validation
Sessions
OOP
Week 12
MySQL & SQL - Build an E-Store Database
Learn SQL, CRUD operations, JOINs, GROUP BY, and database design
Project: E-Store Database + SQL Queries
-
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 (product linked to category, order linked to 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, try LEFT JOIN for empty categories
CREATE TABLE
Data Types
Primary / Foreign Keys
CRUD Operations
JOINs
GROUP BY / ORDER BY
Week 13
PHP + MySQL CRUD + Auth - Build a Student Management System
Learn connecting PHP with MySQL using PDO, prepared statements, CRUD, authentication, and pagination
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 with
password_hash(), sign in with password_verify(), protect pages with $_SESSION
PDO
Prepared Statements
CRUD with PHP
Search & Pagination
Login System
SQL Injection Prevention
Capstone Project
Complete Student Management System
- User system (register/login/logout)
- Dashboard with statistics
- Full CRUD for students
- Search by name and filter by major
- Pagination for large datasets
- Secure with prepared statements
- Password hashing with bcrypt
- Responsive design with Bootstrap
Al-Aqsa University