Web Development Bootcamp

2.1 Design Principles

• Colour theory basics
• 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

Practical Exercise

• Design portfolio site which should include:
• Home page: introduction and navigation menu
• About page: personal information
• Project Page: list of projects

Tools

• 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 basics

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

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

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 basics

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

4.2 Display and Layout basics

• 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, Loops, 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 basics
• 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 basics

• On-Page SEO basics
• 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 Basics
• 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 the 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