Web-1 Front-end Design & User Experience

Learning Outcomes

By the end of this course, you will be able to:

• Build responsive websites using HTML5 and CSS3
• Create interactive user experiences with JavaScript
• Develop a professional portfolio of web projects

Program Overview

Learn HTML and CSS fundamentals through hands-on projects. Build 4 real websites including your professional portfolio.

Prerequisites

• Computer with internet connection
• Text editor (VS Code recommended)
• Basic computer skills

Web1- Program C: Fundamental Web Design (HTML and CSS) - Session Logistics

Lesson	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 Division Concept 06: CSS Grid & Modern CSS	Activity 05: HTML Division Activity 06: CSS Box Model	-	ET-5 ET-6	Submit Activity
8	CSS Display + CSS Flexbox	Master display properties and Flexbox layouts	Concept 07: Why CSS Frameworks Concept 08: Introduction to Tailwind CSS	Activity 07: CSS Display Activity 08: CSS Flexbox	-	ET-7 ET-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 Bar Concept 12: Bootstrap Carousel	Activity 11: Bootstrap Navigation Bar Activity 12: Bootstrap Carousel	-	ET-11 ET-12	Submit Activity
18	Bootstrap Cards + Progress Bar	Build cards and progress indicators	Concept 13: Bootstrap Cards Concept 14: Bootstrap Progress Bar	Activity 13: Bootstrap Cards Activity 14: Bootstrap Progress Bar	-	ET-13 ET-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	-

Resources

• Course Materials on GitHub
• VS Code Download
• Bootstrap Documentation