Web Development

2.1 Design Principles

• Colour theory basic
• Typography basic
• Spacing and alignment
• Visual hierarchy

2.2 Introduction to UI/UX

• What makes a website good?
• Good vs bad design examples
• Accessibility basic
• Mobile-first thinking

2.3 Design Tools

• Introduction to Figma
• Familiarizing with Figma – Simple Portfolio Site

Design portfolio site which should include :

• Home page: introduction and navigation menu
• About page: personal information
• Project Page: list of projects

https://colourcontrast.cc/

Learning Outcomes

• ✓ Understand basic design rules
• ✓ Create simple UI layouts
• ✓ Think like a designer

Development Environment Setup

• Installing VS Code
• Creating project folders
• Using browser developer tools

3.1 HTML basic

• Document structure
• Tags and elements
• Headings and paragraphs
• Class and Id
• Assignment:

3.2 Links, Lists & Images

• Navigation with anchor tags
• Ordered and unordered lists
• Images and alt text
• Table
• Assignment:
• Other Common HTML Tags

3.3 Semantic HTML

• Introduction
• Why structure matters
• Assignment:

3.4 Forms & Input Elements

• Introduction to Forms
• input – All Input Types
• Labels & Grouping
• textarea – Multi-line Text Input
• select, option – Dropdown Menus
• datalist – Autocomplete Suggestions
• button – Buttons
• Common Form Attributes (Summary)
• Media Elements – audio & video
• Embedding External Content – iframe
• Complete Form Example

Learning Outcomes

• ✓ Create structured HTML documents
• ✓ Use semantic tags properly

4.1 CSS basic

• Introduction to CSS
• Cascading Rules
• Spacing and Box Model
• Background properties
• Gradient

4.2 Display And Layout basic

• Display and Positioning
• Flexbox (basic usage)
• Overflow Content
• CSS Grid (Advanced Layout)
• Practical Exercise

4.3 Visual Effect , CSS Interaction & Advanced Selectors

• Pseudo-classes and Pseudo-elements
• Visual Effects
• Transition And Animations

4.4 Mobile First Responsive

• What responsive design means
• responsive / relative units
• Media queries
• Breakpoints
• Mobile first design

Practical Exercise

• Style your HTML website
• Create a responsive home , about and portfolio page

Learning Outcomes

• ✓ Style websites using CSS
• ✓ Create clean layouts
• ✓ Build responsive pages

5.1 JavaScript Fundamentals

• Introduction to JavaScript
• Variables and Data Types
• Operators, Conditions, loop and strings
• Array and Objects
• Functions and Methods
• Built in Function : Intervals

5.2 Working with the DOM

• Introduction to DOM
• Changing Webpage Content
• Class Manipulation
• Creating and Removing Elements
• Forms and Input Handling
• Browser Storage (Teach when making To -Do list)

5.3 Modern JavaScript Development

• OOP
• sync js ,async js ,call-back , call-back hell , promises and async await
• IIFE and Error handling in JS
• API and Data fetching

Learning Outcomes

• ✓ Understand programming basic
• ✓ Add interactivity to web pages
• ✓ Build small functional projects

6.1 Introduction to Backend Development :

• The Request-Response Cycle: How servers and browsers communicate.

Development Environment Setup:

• Installing XAMPP/MAMP/WAMP (Local server stacks)
• Configuring Apache and MySQL services
• Setting up the htdocs directory

PHP Basics:

• PHP tags and file structure (.php)
• Variables, Data Types, and Constants
• Echo vs Print

6.2 Control Structures & Functions

Logic and Flow:

• Conditional statements: if, else, elseif, switch
• Comparison and Logical operators

Loops:

• while, do-while, for, and foreach

Functions:

• Defining and calling functions.
• Function arguments and return values
• Global vs. Local scope

6.3 Working with MySQL Databases

Introduction to Relational Databases:

• What is a Database? Tables, Rows, and Columns.
• Introduction to phpMyAdmin.

SQL Fundamentals (CRUD):

• Create: INSERT INTO
• Read: SELECT, WHERE, ORDER BY
• Update: UPDATE
• Delete: DELETE

Database Relationships: Primary keys and Foreign keys.

6.4 Connecting PHP to MySQL

Database Connection:

• Using mysqli (Procedural vs. Object-Oriented).
• Handling connection errors.

PHP & Forms:

• $_GET vs. $_POST methods
• Sanitizing user input to prevent SQL Injection

Data Persistence:

• Fetching data from MySQL and displaying it in HTML tables
• Building a basic Login/Registration system

State Management:

• Introduction to $_SESSION and $_COOKIE.

6.5 Advanced Concepts & Integration

• File Handling: Uploading images and files to the server.
• Error Handling: Try-Catch blocks and custom error messages.

Project Architecture:

• Including files: include vs. require
• Separating logic from presentation (Basic MVC concept)

Learning Outcomes

• ✓ Connect a dynamic frontend to a MySQL backend.
• ✓ Perform secure CRUD operations on a database.
• ✓ Manage user sessions and form data effectively.

6.1 Introduction to SEO

• What is SEO?
• Keywords – What People Search For

6.2 SEO basic

• On-Page SEO basic
• Semantic HTML & Accessibility
• Mobile-Friendly & Responsive Design
• Page Content & URLs
• Structured Data for SEO

6.3 Writing for the Web

• Writing good headings
• Writing meta descriptions
• Structuring Content Properly

6.4 Performance basic

• Image Optimization
• Why page speed Matters?

Learning Outcomes

• ✓ Understand website visibility
• ✓ Apply basic SEO techniques
• ✓ Structure content properly

• Introduction to AI for Developers
• Prompt Writing basic
• Using AI for Coding
• Using AI for Design
• Responsible AI Usage
• Practical Workflow – Developer + AI

8.1 Basic Git Introduction

• What is version control?
• Basic commit concept (simple explanation)
• Using VS Code Source Control panel

8.2 Simple Deployment

• Uploading site to GitHub Pages.
• Making your site live

8.3 Portfolio Introduction

• Showcasing projects
• Writing Project Descriptions

8.4 Project Planning

• Choosing project type
• Wireframing basic layout
• Planning structure
• Project Management Tools: Trello

CAPSTONE PROJECT OPTIONS