Learn the fundamentals of web design and development, understand how to structure web pages, and gain hands-on experience through creative projects.
Get ready to embark on an exciting learning journey
Learn web development using visual blocks with EduBlocks. Master HTML, CSS, responsive design, and create beautiful websites through hands-on projects.
By completing this course, students will be able to:
| Session | Topic | Objectives | Notes/File Link | Activities Link | Projects | Exit Ticket | Submission Link |
|---|---|---|---|---|---|---|---|
| 1 | Introduction to Webpages and EduBlocks + Introduction to HTML | Learn web basics, EduBlocks environment, and HTML structure | Concept 01: Introduction to Webpages & EduBlocksConcept 02: Introduction to HTML | Activity 01: Introduction to Webpages & EduBlocksActivity 02: Introduction to HTML | - | ET-1ET-2 | Submit Activity |
| 2 | HTML Media | Embed images, videos, and audio in webpages | Concept 03: HTML Media | Activity 03: HTML Media | - | ET-3 | Submit Activity |
| 3 | HTML Lists | Create ordered and unordered lists for content organization | Concept 04: HTML Lists | Activity 04: HTML Lists | - | ET-4 | Submit Activity |
| 4 | Project One: My Hobby | Build personal hobby webpage with HTML fundamentals | - | - | Project One: My Hobby | - | Submit Project |
| 5 | Introduction to CSS | Learn CSS syntax, selectors, and basic styling | Concept 05: Introduction to CSS | Activity 05: Introduction to CSS | - | ET-5 | Submit Activity |
| 6 | HTML Division | Organize content with div elements and semantic HTML | Concept 06: HTML Division | Activity 06: HTML Division | - | ET-6 | Submit Activity |
| 7 | CSS Selector | Master CSS selectors, specificity, and class/ID targeting | Concept 07: CSS Selector | Activity 07: CSS Selector | - | ET-7 | Submit Activity |
| 8 | CSS Properties | Apply typography, colors, sizing, and background effects | Concept 08: CSS Properties | Activity 08: CSS Properties | - | ET-8 | Submit Activity |
| 9 | CSS Box Model | Master padding, borders, margins, and layout calculations | Concept 09: CSS Box Model | Activity 09: CSS Box Model | - | ET-9 | Submit Activity |
| 10 | Project 2: My Biodata | Create styled personal biodata with advanced CSS | - | - | Project 2: My Biodata | - | Submit Project |
| 11 | Revision + Quiz 1 | Review HTML/CSS fundamentals and complete assessment | Quiz 1 Revision | Quiz 1 | - | - | - |
| 12 | HTML Table | Create structured data tables with proper formatting | Concept 10: HTML Table | Activity 10: HTML Table | - | ET-10 | Submit Activity |
| 13 | Project 3: My Timetable | Build styled class timetable with HTML tables | - | - | Project 3: My Timetable | - | Submit Project |
| 14 | HTML Form | Create interactive forms with input fields and validation | Concept 11: HTML Form | Activity 11: HTML Form | - | ET-11 | Submit Activity |
| 15 | Project 4: Registration Form | Build complete user registration form with styling | - | - | Project 4: Registration Form | - | Submit Project |
| 16 | CSS Animation | Create smooth animations and interactive hover effects | Concept 12: CSS Animation | Activity 12: CSS Animation | - | ET-12 | Submit Activity |
| 17 | CSS Flexbox | Master flexible layouts with Flexbox system | Concept 13: CSS Flexbox | Activity 13: CSS Flexbox | - | ET-13 | Submit Activity |
| 18 | CSS Grid | Create complex layouts with CSS Grid system | Concept 14: CSS Grid | Activity 14: CSS Grid | - | ET-14 | Submit Activity |
| 19 | HTML Navigation Bar and Footer | Build responsive navigation and footer components | Concept 15: HTML Navigation Bar & Footer | Activity 15: HTML Navigation Bar & Footer | - | ET-15 | - |
| 20 | Revision + Quiz 2 | Review advanced concepts and complete assessment | Quiz 2 Revision | Quiz 2 | - | - | - |
| 21 | Final Project: Zoo Blog (Part 1) | Plan and structure comprehensive zoo blog website | - | - | Final Project: Zoo Blog | - | - |
| 22 | Final Project: Zoo Blog (Part 2) | Implement responsive design with advanced CSS layouts | - | - | Final Project: Zoo Blog | - | - |
| 23 | Final Project: Zoo Blog (Part 3 - Presentation) | Complete project and prepare presentation | - | - | Final Project: Zoo Blog | - | - |
| 24 | Graduation | Project evaluation and course completion | Download Graduation Background | Complete Feedback Form | - | Submit Testimonial | - |