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
:star2: Hey there, future web developer! :star2:
Have you ever wondered how your favorite websites like YouTube, Instagram, or online games are made? Get ready for an amazing adventure where YOU will learn to create your own websites! Just like building with LEGO blocks, you'll use colorful coding blocks in EduBlocks to bring your ideas to life on the internet. By the end of this course, you'll be building websites that you can show off to your friends and family!
Before we begin this exciting journey, here's what you should know:
START HERE → Learn What Websites Are → Master HTML (The Building Blocks)
↓ ↓
Design Beautiful Pages ← Learn CSS (The Style Magic) ← Create Your First Webpage
↓
Make Things Move! → Animations & Effects → Responsive Design
↓
Build Real Projects → Create a Zoo Blog → Become a Web Developer! 🎉
Welcome to BBW Block-Based Web Development with EduBlocks! This comprehensive course is designed to introduce you to the exciting world of web development through a visual, block-based approach. Through 24 carefully structured lessons, you'll learn HTML fundamentals, CSS styling, responsive design principles, and advanced layout techniques to create beautiful, functional websites.
| Lesson | Topic | Objectives | Notes/File Link | Activities Link | Exit Ticket | Submission Link |
|---|---|---|---|---|---|---|
| 1 | Introduction to Webpages and EduBlocks + Introduction to HTML | • Understand what webpages are and how they work• Introduction to EduBlocks environment• Learn basic HTML structure and syntax• Create your first HTML document | Introduction to Webpages & EduBlocksIntroduction to HTML | Introduction to Webpages & EduBlocksIntroduction to HTML | ET-1ET-2 | Submit |
| 2 | HTML Media | • Learn to embed images in webpages• Understand image attributes and optimization• Add videos and audio to HTML• Explore multimedia best practices | HTML Media | HTML Media | ET-3 | Submit |
| 3 | HTML Lists | • Create ordered and unordered lists• Understand list structure and nesting• Apply list styling and formatting• Use lists for navigation and content organization | HTML Lists | HTML Lists | ET-4 | Submit |
| 4 | Project One: My Hobby | • Apply HTML fundamentals to create a personal hobby webpage• Integrate text, images, and lists effectively• Practice proper HTML structure and semantics• Document your learning process | Project One: My Hobby | - | Project-1 | Submit |
| 5 | Introduction to CSS | • Understand what CSS is and its role in web design• Learn CSS syntax and basic selectors• Apply colors, fonts, and basic styling• Connect CSS to HTML documents | Introduction to CSS | Introduction to CSS | ET-5 | Submit |
| 6 | HTML Division | • Understand div elements and document structure• Learn semantic HTML elements• Organize content with containers• Prepare for CSS layout techniques | HTML Division | HTML Division | ET-6 | Submit |
| 7 | CSS Selector | • Master different types of CSS selectors• Understand selector specificity and inheritance• Apply class and ID selectors effectively• Practice advanced selector techniques | CSS Selector | CSS Selector | ET-7 | Submit |
| 8 | CSS Properties | • Explore essential CSS properties for styling• Learn typography and color properties• Understand sizing and spacing properties• Apply background and border effects | CSS Properties | CSS Properties | ET-8 | Submit |
| 9 | CSS Box Model | • Understand the CSS box model concept• Learn about padding, borders, and margins• Practice box model calculations• Apply box model for layout control | CSS Box Model | CSS Box Model | ET-9 | Submit |
| 10 | Project 2: My Biodata | • Create a comprehensive personal biodata webpage• Apply advanced CSS styling techniques• Integrate HTML structure with CSS design• Build responsive and visually appealing layouts | Project 2: My Biodata | - | Project-2 | Submit |
| 11 | Revision + Quiz 1 | • Review HTML and CSS fundamentals from Lessons 1-10• Complete comprehensive assessment• Identify areas for improvement | Quiz 1 Revision | Quiz 1 | - | - |
| 12 | HTML Table | • Learn HTML table structure and syntax• Create data tables with headers and cells• Apply table styling and accessibility features• Understand when to use tables appropriately | HTML Table | HTML Table | ET-10 | Submit |
| 13 | Project 3: My Timetable | • Design and build a personal class timetable• Apply HTML table structure effectively• Style tables with CSS for better presentation• Practice data organization and layout | Project 3: My Timetable | - | Project-3 | Submit |
| 14 | HTML Form | • Learn HTML form elements and structure• Create input fields, buttons, and form controls• Understand form validation and accessibility• Apply proper form semantics and labels | HTML Form | HTML Form | ET-11 | Submit |
| 15 | Project 4: Registration Form | • Build a complete user registration form• Implement various input types and validation• Style forms with CSS for better user experience• Apply form best practices and usability principles | Project 4: Registration Form | - | Project-4 | Submit |
| 16 | CSS Animation | • Learn CSS animation and transition properties• Create smooth animations and hover effects• Understand keyframes and animation timing• Apply animations to enhance user experience | CSS Animation | CSS Animation | ET-12 | Submit |
| 17 | CSS Flexbox | • Master CSS Flexbox layout system• Learn flex container and item properties• Create responsive layouts with flexbox• Apply flexbox for modern web design | CSS Flexbox | CSS Flexbox | ET-13 | Submit |
| 18 | CSS Grid | • Understand CSS Grid layout system• Learn grid container and item properties• Create complex layouts with CSS Grid• Compare Grid vs Flexbox applications | CSS Grid | CSS Grid | ET-14 | Submit |
| 19 | HTML Navigation Bar and Footer | • Design and implement navigation systems• Create responsive navigation bars• Build functional website footers• Apply navigation best practices and accessibility | HTML Navigation Bar & Footer | HTML Navigation Bar & Footer | ET-15 | Submit |
| 20 | Revision + Quiz 2 | • Review advanced HTML and CSS concepts from Lessons 12-19• Complete comprehensive assessment• Prepare for final project work | Quiz 2 Revision | Quiz 2 | - | - |
| 21 | Final Project: Zoo Blog (Part 1) | • Plan and design comprehensive zoo blog website• Create project wireframes and structure• Set up HTML foundation and content strategy• Begin implementation of core pages | Final Project: Zoo Blog | - | - | - |
| 22 | Final Project: Zoo Blog (Part 2) | • Implement advanced CSS styling and layouts• Apply flexbox and grid for responsive design• Add animations and interactive elements• Optimize for different screen sizes | Final Project: Zoo Blog | - | - | - |
| 23 | Final Project: Zoo Blog (Part 3 - Presentation) | • Complete final project implementation• Prepare project presentation and documentation• Demonstrate technical skills and design decisions• Present to class and receive feedback | Final Project: Zoo Blog | - | Project-5-P3 | Submit |
| 24 | Graduation | • Project evaluation• Course completion | Download Graduation Background | Complete Feedback Form | Submit Testimonial | - |
By completing this program, you will have gained:
We're excited to guide you through your web development journey and look forward to seeing the amazing websites you'll create!
Here's what makes this course AWESOME:
Every app, game, and website you use was created by someone just like you who learned web development. After this course, you could be the one creating the next cool website that everyone talks about! Whether you want to be a game developer, app creator, or tech entrepreneur, web development is your first step into the digital world.
Put on your developer hat, fire up EduBlocks, and let's create something amazing together! Your journey from web development newbie to website wizard starts NOW!
Remember: Every expert was once a beginner. Today, you begin your story as a web developer! :dart::sparkles:
What you'll achieve by the end of this course
Create visually appealing and functional web pages
Develop complete web applications
Establish core web development skills
Build a professional portfolio through hands-on projects