TBU Web Programming Basic (HTML/CSS)

This repository contains practical teaching material for the Web Programming Basic course, focused on core frontend skills with HTML, CSS, and Bootstrap 5.

Course Goal

By the end of the course, students should be able to:

• Build valid, semantic HTML pages
• Apply CSS for typography, spacing, color, and layout
• Use Bootstrap 5 to create responsive multi-page websites
• Combine framework classes with custom CSS in a clean way
• Organize a small frontend project with consistent structure

Course Structure (4 Lessons)

Lesson 1: HTML Fundamentals

• HTML document skeleton and metadata
• Core tags: headings, paragraphs, lists, links, images
• Semantic layout: header, main, section, article, footer
• Basic accessibility habits (alt, meaningful link text, heading order)

Lesson 2: CSS Fundamentals

• CSS syntax, selectors, and the cascade
• Box model and spacing system
• Shared external stylesheet across multiple pages
• Basic site styling: navigation, content areas, footer

Lesson 3: Bootstrap 5 Basic

• Bootstrap setup via CDN
• Responsive layout with container, row, and columns
• Common components: navbar, cards, alerts, badges, forms
• Utility classes for spacing, display, and alignment

Lesson 4: Bootstrap + Custom CSS

• Extending Bootstrap with project-specific styles
• Reusable design tokens with CSS variables
• Safe style overrides without breaking consistency
• Final polish for a complete multi-page website

Expectations

• Attend class and participate actively in exercises
• Complete lesson tasks on time
• Write readable, consistently formatted code
• Use meaningful names for files, classes, and sections
• Test pages on desktop and mobile screen sizes

Suggested Folder Convention

Lesson_01/
Lesson_02/
Lesson_03/
Lesson_04/
project/
students/

Students Workspace (students/)

Each student can create a personal practice folder, for example students/lesson_01/.

Important notes:

• The students/ folder is ignored by Git (configured in .gitignore).
• Students may freely experiment there without affecting lesson materials.
• Core lesson content in Lesson_01 to Lesson_04 should remain unchanged unless instructed.

Recommended Tools

• Browser: Chrome, Edge, or Firefox
• Editor: VS Code (recommended)
• Optional preview helper: Live Server extension

How to Use This Repository

1. Open the repository in your editor.
2. Start with Lesson_01, then continue in order.
3. Read each lesson README.md before coding.
4. Complete tasks in each PRACTICE.md.
5. Test your output in the browser and refine.

Academic Integrity

• You may discuss concepts and design ideas with classmates.
• Final submitted code must be your own work.
• Copying code without understanding is not acceptable.