Module 1: Web Development Fundamentals
This module introduces the core technologies that form the foundation of web development. You'll learn HTML for structure, CSS for styling, JavaScript for interactivity, and get your first introduction to PHP. By the end of this module, you'll be able to build static websites and understand the basics of dynamic web content.
Duration
2 weeks (10 sessions of 3 hours each)
Prerequisites
None - this is where we start!
Topics Covered
HTML, CSS, JavaScript, Bootstrap, jQuery, PHP Intro
Final Project
5-page static website with navigation
Week 1: HTML, CSS, and Development Environment
Session 1: Introduction to Web Development & Setup
- Course introduction and expectations
- How the web works: servers, browsers, HTTP
- Setting up your development environment
- Installing a code editor (VS Code)
- Understanding file structures
- Browser developer tools
- Introduction to containerization with Docker
- Installing Docker Desktop
- Creating your first HTML page
- Homework: Set up personal GitHub account, create first repository, and install Docker
Session 2: HTML Fundamentals
- HTML document structure and syntax
- Essential HTML tags
- Headings, paragraphs, links
- Lists, tables, images
- Semantic HTML elements
- HTML forms and inputs
- HTML validation and best practices
- Homework: Create a personal profile page with HTML
Session 3: CSS Basics
Session 4: CSS Layout & Responsive Design
- CSS layout techniques
- Positioning (relative, absolute, fixed)
- Float-based layouts
- Flexbox
- CSS Grid basics
- Introduction to responsive design
- Media queries
- Mobile-first approach
- Homework: Make your profile page responsive
Week 2: JavaScript and Introduction to PHP
Session 6: JavaScript Fundamentals
Session 7: DOM Manipulation with JavaScript
Session 8: Modern JavaScript & jQuery
Session 9: Introduction to PHP
Session 10: Mini-Project: Static Website
Learning Resources
Required Materials
- VS Code or preferred code editor
- XAMPP or MAMP (will be installed in Session 9)
- GitHub account
- Modern web browser (Chrome, Firefox, or Edge)