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