Learn modern web design techniques including HTML, CSS, responsive design, and Bootstrap to create accessible, mobile-friendly, and visually appealing web pages.
Get ready to embark on an exciting learning journey
By the end of this course, you will be able to:
Learn HTML and CSS fundamentals through hands-on projects. Build 4 real websites including your professional portfolio.
| Session | Topic | Objectives | Notes/File Link | Activities Link | Projects | Exit Ticket | Submission Link |
|---|---|---|---|---|---|---|---|
| 1 | Introduction to Web Design | Learn web design fundamentals and development tools | Concept 01: Introduction to Web Design | Activity 01: Introduction to Web Design | - | ET-1 | Submit Activity |
| 2 | Introduction to HTML | Learn HTML structure, tags, and semantic markup | Concept 02: Introduction to HTML | Activity 02: Introduction to HTML | - | ET-2 | Submit Activity |
| 3 | Project One: HTML Mini Project | Build first webpage with HTML | - | - | Project One: Mini Project | - | Submit Project |
| 4 | Introduction to CSS | Learn CSS styling, colors, and fonts | Concept 03: Introduction to CSS | Activity 03: Introduction to CSS | - | ET-3 | Submit Activity |
| 5 | CSS Selector | Master CSS selectors and specificity | Concept 04: CSS Selector | Activity 04: CSS Selector | - | ET-4 | Submit Activity |
| 6 | Project 2: My Superhero | Create superhero-themed webpage with CSS styling | - | - | Project 2: My Superhero | - | Submit Project |
| 7 | HTML Division + CSS Box Model | Learn div elements and CSS box model | Concept 05: HTML DivisionConcept 06: CSS Grid & Modern CSS | Activity 05: HTML DivisionActivity 06: CSS Box Model | - | ET-5ET-6 | Submit Activity |
| 8 | CSS Display + CSS Flexbox | Master display properties and Flexbox layouts | Concept 07: Why CSS FrameworksConcept 08: Introduction to Tailwind CSS | Activity 07: CSS DisplayActivity 08: CSS Flexbox | - | ET-7ET-8 | Submit Activity |
| 9 | Project 3: My Holiday (Part 1) | Plan and design holiday website structure | - | - | Project 3: My Holiday | - | - |
| 10 | Project 3: My Holiday (Part 2) | Build HTML structure and navigation | - | - | Project 3: My Holiday | - | - |
| 11 | Project 3: My Holiday (Part 3) | Apply CSS styling and responsive design | - | - | Project 3: My Holiday | - | - |
| 12 | Project 3: My Holiday (Part 4) | Implement advanced layouts with Flexbox | - | - | Project 3: My Holiday | - | - |
| 13 | Project 3: My Holiday (Part 5) | Complete and polish final project | - | - | Project 3: My Holiday | - | Submit Project |
| 14 | Revision + Quiz 1 | Review HTML and CSS fundamentals | Quiz 1 Revision | Quiz 1 | - | - | - |
| 15 | Introduction to Bootstrap | Learn Bootstrap framework and components | Concept 09: Introduction to Bootstrap | Activity 09: Introduction to Bootstrap | - | ET-9 | Submit Activity |
| 16 | Bootstrap Grid System | Master responsive grid system | Concept 10: Bootstrap Grid System | Activity 10: Bootstrap Grid System | - | ET-10 | Submit Activity |
| 17 | Bootstrap Navigation Bar + Bootstrap Carousel | Create navigation bars and carousels | Concept 11: Bootstrap Navigation BarConcept 12: Bootstrap Carousel | Activity 11: Bootstrap Navigation BarActivity 12: Bootstrap Carousel | - | ET-11ET-12 | Submit Activity |
| 18 | Bootstrap Cards + Progress Bar | Build cards and progress indicators | Concept 13: Bootstrap CardsConcept 14: Bootstrap Progress Bar | Activity 13: Bootstrap CardsActivity 14: Bootstrap Progress Bar | - | ET-13ET-14 | Submit Activity |
| 19 | Revision + Quiz 2 | Review Bootstrap concepts | Quiz 2 Revision | Quiz 2 | - | - | - |
| 20 | Final Project: My Profile (Part 1) | Plan personal profile website | - | - | Final Project: My Profile | - | - |
| 21 | Final Project: My Profile (Part 2) | Build responsive layout with Bootstrap | - | - | Final Project: My Profile | - | - |
| 22 | Final Project: My Profile (Part 3) | Complete website with custom CSS | - | - | Final Project: My Profile | - | - |
| 23 | Final Project: My Profile (Part 4 - Presentation) | Present completed project | - | - | Final Project: My Profile | - | Submit Project |
| 24 | Graduation | Project evaluation and course completion | Download Graduation Background | Complete Feedback Form | - | Submit Testimonial | - |
Telebort/web1-resources