Web Development for Beginners

A comprehensive tutorial series covering HTML, CSS, and JavaScript fundamentals.

Instructors

Taught by Lin, Kai Jie and Elleron Asia

Getting Started

1. Download all files to your computer
2. Open index.html in your web browser
3. Follow the lessons in order (Lesson 1 through Lesson 8)

Requirements

• Any modern web browser (Chrome, Firefox, Safari, or Edge)
• A text editor (Notepad, VS Code, Sublime Text, etc.)

Lesson Overview

HTML Lessons

• Lesson 1: HTML Basics - Structure and Common Tags
• Lesson 2: HTML Elements - Lists, Tables, and Forms

CSS Lessons

• Lesson 3: CSS Basics - Styling Your Pages
• Lesson 4: CSS Layout - Box Model and Flexbox

JavaScript Lessons

• Lesson 5: JavaScript Basics - Variables and Functions
• Lesson 6: JavaScript Interactivity - Events and DOM

GitHub Lessons

• Lesson 7: Local Server & Git Basics - Run Locally and Version Control
• Lesson 8: GitHub - Push & Collaborate

File Structure

Each lesson consists of:

• .html file - Main lesson content
• .css file - Styling for demonstrations
• .js file - Interactive code examples (Lessons 5 & 6)

GitHub lessons (7 & 8) use only .html and shared lesson-styles.css.

Shared files:

• lesson-styles.css - Common styles for all lessons
• index.html - Main navigation page

How to Use

1. Read through each lesson in your browser
2. View the page source (Right-click → View Page Source)
3. Complete the exercises at the end of each lesson
4. Modify the example code and experiment
5. Use browser Developer Tools (F12) for debugging

Tips for Success

• Complete lessons in order
• Type out examples yourself rather than copy-pasting
• Complete all exercises before moving to the next lesson
• Experiment and don't be afraid to break things

License

Free to use for educational purposes.