BBW Block-Based Web Development with EduBlocks

Learn web development using visual blocks with EduBlocks. Master HTML, CSS, responsive design, and create beautiful websites through hands-on projects.

Learning Outcomes

By completing this course, students will be able to:

• Create web applications using visual programming - Build complete websites using EduBlocks' intuitive drag-and-drop interface
• Understand HTML/CSS/JavaScript through blocks - Learn web technologies through visual representations that make complex concepts accessible
• Build interactive websites without writing code - Develop responsive, professional websites using block-based tools while understanding underlying web principles

Prerequisites

• Basic computer skills
• No coding experience needed
• Creativity and curiosity about web development

Lesson Structure

BBW Block-Based Web - Session Logistics

Lesson	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 & EduBlocks Concept 02: Introduction to HTML	Activity 01: Introduction to Webpages & EduBlocks Activity 02: Introduction to HTML	-	ET-1 ET-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	Submit Activity
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	-	Submit Project
24	Graduation	Project evaluation and course completion	Download Graduation Background	Complete Feedback Form	-	Submit Testimonial	-

Resources

• EduBlocks Platform
• HTML Reference
• CSS Reference