Table Of Contents

Week 1: HTML Fundamentals...................................................................................................12

Day 1: Introduction to HTML Basics...................................................................................... 12
Objective:................................................................................................................... 12
Session Breakdown:........................................................................................................ 12
What is HTML?.......................................................................................................... 12
Basic HTML Document Structure.................................................................................... 12
Hands-On Task:......................................................................................................... 13
Basic HTML Tags (45 minutes)........................................................................................13
Headings:...................................................................................................................13
Paragraphs:............................................................................................................... 14
Lists:...........................................................................................................................14
Links:..........................................................................................................................15
Hands-On Task:......................................................................................................... 15
Inline Elements:......................................................................................................... 15
Exercise (30 minutes):..................................................................................................... 16
Day 2: Building the Page Structure........................................................................................17
Objective:................................................................................................................... 17
Introduction to Semantic HTML (30 minutes).................................................................. 17
Building a Complete Page Structure (1 hour).................................................................. 18
Hands-On Task:......................................................................................................... 18
Linking Pages Together (30 minutes).............................................................................. 19
Hands-On Task:......................................................................................................... 20
Exercise (30 minutes)...................................................................................................... 21
Day 3: Working with Forms and Inputs.................................................................................. 22
Objective:................................................................................................................... 22
Introduction to HTML Forms (45 minutes)....................................................................... 22
Form Structure........................................................................................................... 22
Input Fields and Types ( 1 hour)...................................................................................... 23
Input Types:............................................................................................................... 23
Hands-On Task:......................................................................................................... 24
Adding Labels, Placeholder, and Fieldset (45 minutes)...................................................24
Labels and Placeholders:...........................................................................................24
Fieldset and Legend:................................................................................................. 25
Hands-On Task:......................................................................................................... 25
Building a Simple Search Bar (30 minutes)..................................................................... 26
How to Create a Search Bar:..................................................................................... 26
Exercise (30 minutes)...................................................................................................... 26
Task:...........................................................................................................................26
Day 4: Nesting, Tables, and Divs...........................................................................................27
 Objective:................................................................................................................... 27
Grouping Content with <div> (30 minutes)...................................................................... 27
What is a <div>?........................................................................................................ 27
Hands-On Task:......................................................................................................... 27
Nesting HTML Elements (45 minutes)............................................................................. 27
What is Nesting?........................................................................................................27
Hands-On Task:......................................................................................................... 28
Introduction to Tables (1 hour)......................................................................................... 28
What is a Table?........................................................................................................ 28
Hands-On Task:......................................................................................................... 29
Adding Table Headings and Captions (30 minutes).........................................................29
Table Headings and Captions:................................................................................... 29
Advanced Table Features: Merging Cells (30 minutes)................................................... 30
Merging Cells with colspan and rowspan:..................................................................30
Exercise (30 minutes)...................................................................................................... 31
Task:...........................................................................................................................31
Day 5: Applying What We've Learned to the Project............................................................. 32
Objective:................................................................................................................... 32
Review of HTML Concepts (30 minutes)......................................................................... 32
Building the Header and Navigation (45 minutes)........................................................... 32
Hands-On Task:......................................................................................................... 32
Creating the Main Hero Section (45 minutes)..................................................................33
Hands-On Task:......................................................................................................... 33
Structuring the Product Section (45 minutes).................................................................. 34
Hands-On Task:......................................................................................................... 34
Exercise: Expanding the Landing Page (30 minutes)...................................................... 35
Task:...........................................................................................................................35
Recap and Final Touches (15 minutes)........................................................................... 36
Recap:........................................................................................................................36
End of Day Outcome:.......................................................................................................36
Week 2: CSS Basics and Layouts............................................................................................ 37
Day 1: Introduction to CSS – Syntax, Selectors, and Basic Styling.......................................37
Objective:......................................................................................................................... 37
Introduction to CSS (20 minutes).....................................................................................37
What is CSS?.............................................................................................................37
Basic CSS Syntax:.....................................................................................................37
Linking CSS to HTML (30 minutes)................................................................................. 38
Three Ways to Add CSS:........................................................................................... 38
Hands-On Task:......................................................................................................... 38
CSS Selectors (45 minutes).............................................................................................39
Types of CSS Selectors:............................................................................................ 39
 Hands-On Task:......................................................................................................... 40
Styling Text and Fonts (40 minutes).................................................................................41
Typography in CSS:................................................................................................... 41
Hands-On Task:......................................................................................................... 41
Styling Backgrounds and Borders (35 minutes)...............................................................42
Backgrounds:............................................................................................................. 42
Borders:..................................................................................................................... 42
Recap and Final Touches (10 minutes)........................................................................... 43
Recap:........................................................................................................................43
Final Task:..................................................................................................................43
Introduction to the CSS Box Model (30 minutes).............................................................43
What is the Box Model?............................................................................................. 43
Visual Representation of the Box Model:................................................................... 43
Day 2: Box Model, Margins, Padding, and Borders...............................................................44
Objective:................................................................................................................... 44
Introduction to the CSS Box Model (30 minutes).............................................................44
What is the Box Model?............................................................................................. 44
Visual Representation of the Box Model:................................................................... 44
Hands-On Task:......................................................................................................... 44
Understanding Padding and Margin (45 minutes)........................................................... 45
Padding:.....................................................................................................................45
Margins:..................................................................................................................... 45
Hands-On Task:......................................................................................................... 46
Borders and Border Radius (45 minutes)........................................................................ 46
Borders:..................................................................................................................... 46
Border Radius:........................................................................................................... 47
Hands-On Task:......................................................................................................... 48
Box Sizing and Width/Height (40 minutes)...................................................................... 48
Width and Height:...................................................................................................... 48
Box Sizing:................................................................................................................. 48
Hands-On Task:......................................................................................................... 49
Exercise: Building a Product Card (30 minutes).............................................................. 49
Task: Create a product card layout using the box model........................................... 49
Day 3: CSS Layouts – Flexbox Introduction.......................................................................... 51
Objective:......................................................................................................................... 51
Introduction to Flexbox (30 minutes)................................................................................51
What is Flexbox?....................................................................................................... 51
Basic Flexbox Terms:.................................................................................................51
Hands-On Task:......................................................................................................... 52
Flexbox Properties for Containers (45 minutes).............................................................. 52
Key Flexbox Properties for Containers:..................................................................... 52
 Hands-On Task:......................................................................................................... 53
Flexbox Properties for Flex Items (45 minutes)............................................................... 53
Key Flexbox Properties for Items:..............................................................................53
Hands-On Task:......................................................................................................... 54
Responsive Design with Flexbox (40 minutes)................................................................ 54
Making Layouts Responsive:..................................................................................... 54
Hands-On Task:......................................................................................................... 55
Exercise: Building a Responsive Navigation Bar (30 minutes)........................................ 56
Task: Use Flexbox to create a responsive navigation bar..........................................56
Day 4: Advanced Flexbox Techniques and Responsive Design............................................57
Objective:................................................................................................................... 57
Nested Flexbox Layouts (45 minutes)............................................................................. 57
What is a Nested Flexbox Layout?............................................................................ 57
Hands-On Task:......................................................................................................... 58
Advanced Flexbox Alignment Techniques (40 minutes).................................................. 58
Aligning Items with align-self:.....................................................................................58
Hands-On Task:......................................................................................................... 59
Combining Flexbox with Media Queries (50 minutes)..................................................... 60
Creating a Responsive Flexbox Layout:.................................................................... 60
Hands-On Task:......................................................................................................... 61
Flexbox Practice: Building a Responsive Portfolio Layout (45 minutes)..........................61
Task: Build a simple portfolio layout using Flexbox. The portfolio will feature three
sections:.....................................................................................................................61
Steps:.........................................................................................................................61
Explanation:..................................................................................................................... 64
Hands-On Task:......................................................................................................... 64
Final Exercise: Creating a Responsive Web Page (30 minutes)..................................... 64
Task: Combine everything you’ve learned in Week 2 to create a fully responsive web
page. The page should include:.................................................................................64
Steps:.........................................................................................................................64
Day 5: Building the First Part of the ShopMaster Project – Responsive Product Grid.......... 65
Objective:................................................................................................................... 65
Review and Setup for the Day (20 minutes).................................................................... 65
Recap of Key Concepts:............................................................................................ 65
Project Focus:............................................................................................................ 65
Setting Up the Product Grid (45 minutes)........................................................................ 65
Task: Create a product grid section on the ShopMaster page where products are
displayed in a grid layout using Flexbox.................................................................... 65
Steps:.........................................................................................................................65
Making the Product Grid Responsive (45 minutes)......................................................... 67
Task: Apply media queries to make the product grid responsive. On smaller screens
(like tablets and mobile), the grid should adjust to display fewer items per row or
 stack items vertically.................................................................................................. 67
Steps:.........................................................................................................................67
Adding Hover Effects to Product Cards (30 minutes)...................................................... 68
Task: Add interactive hover effects to the product cards to enhance the user
experience................................................................................................................. 68
Steps:.........................................................................................................................68
Exercise: Adding Product Data Dynamically (30 minutes)...............................................68
Task: Use JavaScript (if time permits) to add product data dynamically from an array
of objects. This allows you to practice integrating JavaScript with your layout..........68
Steps:.........................................................................................................................68
Week 3: Advanced CSS Techniques........................................................................................ 70
Day 1: CSS Transitions and Hover Effects............................................................................ 70
Introduction to CSS Transitions (45 minutes).................................................................. 70
What are CSS Transitions?:.......................................................................................70
Transition Properties:................................................................................................. 70
Hover Effects and Pseudo-Classes (45 minutes)............................................................ 72
What is the :hover Pseudo-Class?:............................................................................72
Examples of Hover Effects:........................................................................................72
Creating Hover Menus on Product Cards (1 hour).......................................................... 74
What is a Hover Menu?:............................................................................................ 74
Steps to Create Hover Menus:...................................................................................74
Hands-On Task:......................................................................................................... 75
Hands-On Task: Applying Transitions and Hover Effects (30 minutes)........................... 75
Task 1: Apply Transitions:.......................................................................................... 75
Task 2: Hover Menus:................................................................................................ 75
Stretch Goal (Explore Further):..................................................................................75
Day 2: CSS Animations and Smooth Scrolling...................................................................... 76
Introduction to CSS Animations (1 hour)......................................................................... 76
What are CSS Animations?:...................................................................................... 76
Key Concepts of CSS Animations:............................................................................ 76
Creating Simple Animations (45 minutes)........................................................................79
Examples of Simple Animations:............................................................................... 79
Smooth Scrolling with CSS (45 minutes)......................................................................... 80
What is Smooth Scrolling?:........................................................................................80
CSS for Smooth Scrolling:......................................................................................... 80
Hands-On Task: Animations and Smooth Scrolling (30 minutes).................................... 81
Task 1: Keyframe Animation:..................................................................................... 81
Task 2: Smooth Scrolling:.......................................................................................... 81
Day 3: Responsive Design with Media Queries.....................................................................82
Introduction to Media Queries (1 hour)............................................................................ 82
What are Media Queries?:......................................................................................... 82
 Common Breakpoints:............................................................................................... 82
Adjusting Layouts for Different Screen Sizes (45 minutes)..............................................83
Responsive Layout Adjustments:...............................................................................83
Hands-On Task: Implementing Media Queries:......................................................... 84
Mobile-First Design Approach (30 minutes).....................................................................85
What is the Mobile-First Approach?:..........................................................................85
How to Implement Mobile-First Design?:................................................................... 85
Example:.................................................................................................................... 85
Hands-On Task: Mobile-First Design:........................................................................ 86
Testing Responsiveness with Browser DevTools (30 minutes)........................................86
Testing in Browser DevTools:.....................................................................................86
Hands-On Task: Testing the Landing Page:...............................................................86
Final Hands-On Task (30 minutes).................................................................................. 86
Final Task:..................................................................................................................86
Stretch Task:.............................................................................................................. 86
Day 4: Debugging and Polishing the Landing Page.............................................................. 87
Debugging with DevTools (1 hour)...................................................................................87
Introduction to Chrome DevTools:..............................................................................87
How to Access DevTools:.......................................................................................... 87
Key Features of the Elements Panel:........................................................................ 87
Common Debugging Issues:......................................................................................87
Hands-On Task:......................................................................................................... 88
Task 1: Overflow Issue:..............................................................................................88
Cross-Browser Testing (45 minutes)................................................................................90
Importance of Cross-Browser Compatibility:..............................................................90
Steps for Cross-Browser Testing:.............................................................................. 90
Fixing Browser Compatibility Issues:......................................................................... 91
Hands-On Task:......................................................................................................... 91
CSS Improvement Task:............................................................................................ 92
Polishing the Landing Page (45 minutes)........................................................................ 92
Final Touches for Polishing the Page:........................................................................92
Stretch Task (Optional):............................................................................................. 92
Hands-On Task:......................................................................................................... 93
Final Debugging Task (30 minutes)................................................................................. 93
Task:...........................................................................................................................93
Day 5: Integrating Components into the Landing Page......................................................... 94
Implement Hover Effects on Product Cards (1 hour)....................................................... 94
Task 1: Add Hover Menus to the Product Grid...........................................................94
Step-by-Step Guide:.................................................................................................. 94
Hands-On Task:......................................................................................................... 95
Add Smooth Scrolling to Links (30 minutes).................................................................... 95
 Task 2: Implement Smooth Scrolling for Internal Links.............................................. 95
Step-by-Step Guide:.................................................................................................. 95
Hands-On Task:......................................................................................................... 96
Finalize the Hero Section (45 minutes)............................................................................96
Task 3: Apply Animations to the Hero/Banner Section.............................................. 96
Step-by-Step Guide:.................................................................................................. 96
Hands-On Task:......................................................................................................... 97
Responsive Design for the Product Grid (45 minutes).....................................................98
Task 4: Ensure the Product Grid is Fully Responsive................................................ 98
Step-by-Step Guide:.................................................................................................. 98
Hands-On Task:......................................................................................................... 99
Final Hands-On Task (30 minutes).................................................................................. 99
Task: Full Integration of Components........................................................................ 99
Week 4 - Introduction to JavaScript.......................................................................................100
Day 1: Introduction to JavaScript and Basic Syntax............................................................ 100
What is JavaScript? (15 minutes).................................................................................. 100
Explanation:............................................................................................................. 100
Integration with HTML:.............................................................................................100
Basic Syntax and Structure (45 minutes).......................................................................101
Variables in JavaScript:............................................................................................101
Analogy: Imagine a variable as a labeled box. You can store something inside (like a
number, a word, etc.), and whenever you need it, you can retrieve it using the label...
101
Syntax for Variables:................................................................................................ 101
Data Types:..............................................................................................................102
Basic Operations:.....................................................................................................102
Hands-On Task:....................................................................................................... 102
Console Operations (30 minutes).................................................................................. 103
Using the Console:...................................................................................................103
How to Open the Console:.......................................................................................103
Hands-On Task:....................................................................................................... 103
Hands-On Task: Creating and Linking a JavaScript File (30 minutes)...........................104
Steps:.......................................................................................................................104
5. Wrap-Up (30 minutes)................................................................................................105
Review the Key Concepts:.......................................................................................105
Exercise for the End of Class:..................................................................................105
Day 2: Conditionals and Functions...................................................................................... 106
Conditionals (1.5 hours).................................................................................................106
Understanding Conditionals:....................................................................................106
Functions (1.5 hours)..................................................................................................... 107
Introduction to Functions:.........................................................................................107
 Wrap-Up and Review (30 minutes)................................................................................109
Consolidation:.......................................................................................................... 109
Exercise:.................................................................................................................. 109
Exercise:.................................................................................................................. 109
Step-by-Step Guide and Example Code:.................................................................109
Day 3: Loops and Basic DOM Manipulation.........................................................................111
What is a Loop?............................................................................................................. 111
Types of Loops:.............................................................................................................. 111
For Loop......................................................................................................................... 111
While Loop..................................................................................................................... 111
Do/While Loop................................................................................................................112
Introduction to DOM Manipulation (1 hour).................................................................... 113
What is the DOM?.................................................................................................... 113
With the object model, JavaScript gets all the power it needs to create dynamic
HTML:.......................................................................................................................114
● JavaScript can change all the HTML elements in the page.................................. 114
● JavaScript can change all the HTML attributes in the page..................................114
● JavaScript can change all the CSS styles in the page..........................................114
● JavaScript can remove existing HTML elements and attributes........................... 114
● JavaScript can add new HTML elements and attributes.......................................114
● JavaScript can react to all existing HTML events in the page...............................114
● JavaScript can create new HTML events in the page...........................................114
The HTML DOM is a standard object model and programming interface for HTML. It
defines:.....................................................................................................................114
● The HTML elements as objects............................................................................ 114
● The properties of all HTML elements.................................................................... 114
● The methods to access all HTML elements.......................................................... 114
● The events for all HTML elements........................................................................ 114
In other words: The HTML DOM is a standard for how to get, change, add, or delete
HTML elements........................................................................................................ 114
Accessing Elements:................................................................................................ 114
Hands-On Task and Exercises (30 minutes):.................................................................115
Day 4: Arrays and Objects................................................................................................... 117
What is an Array? (1 hour)............................................................................................. 117
Why Use Arrays?........................................................................................................... 117
Creating an Array........................................................................................................... 117
Accessing Array Elements....................................................................................... 118
Looping Array Elements.................................................................................................118
Introduction to Objects (1 hour)......................................................................................118
Object Properties......................................................................................................119
Object Methods........................................................................................................ 119
 Hands-On Task:....................................................................................................... 120
Combining Arrays and Objects with Loops (30 minutes)............................................... 120
Hands-On Tasks (1 hour)...............................................................................................121
Task 1: Create and Display an Array....................................................................... 121
Task 2: Modifying Array Elements............................................................................121
Task 3: Finding Elements in an Array...................................................................... 122
Task 4: Modifying Object Properties........................................................................ 122
Task 5: Nested Objects............................................................................................ 123
Day 5: Integrating JavaScript into the Landing Page...........................................................124
Dynamic Product Grid (1.5 hours)................................................................................. 124
Interactive Buttons (1 hour)............................................................................................124
Form Validation (Optional) (30 minutes)........................................................................ 125
Week 5 : Advanced JS Concepts........................................................................................... 126
Day 1: Advanced DOM Manipulation...................................................................................126
Creating Elements: (30 mins)........................................................................................ 126
Hands-On Exercise: Create and Append Elements.................................................126
2. Removing Elements (30 minutes)..............................................................................127
Hands-On Exercise: Remove Elements.................................................................. 127
Hands-On Exercise: Modify Elements..................................................................... 128
Hands-On Tasks (1 hour)...............................................................................................128
Create a Dynamic Product Card.............................................................................. 128
Remove a Product Card on Button Click................................................................. 129
Day 2: Introduction to Array Methods.................................................................................. 130
Introduction to forEach (30 mins)...................................................................................130
Introduction to filter (30 mins)........................................................................................ 130
Introduction to map (30 mins)........................................................................................ 131
Integrating Array Methods into the Project (30 mins).....................................................132
Task 1: Display Products Using forEach.................................................................. 132
Task 2: Filter Products Below a Price Threshold..................................................... 133
Task 3: Apply a Discount Using map....................................................................... 134
Review and Enhancement Task...............................................................................135
Day 3: Basic Algorithms and Sorting................................................................................... 136
1. Sorting Arrays (1 hour)...............................................................................................136
2. Simple Search Algorithms (45 mins)..........................................................................137
3. Hands-On Task (1 hour 15 mins)............................................................................... 137
Day 4: JavaScript Events and Form Handling..................................................................... 138
1. Handling Forms with JavaScript (1 hour)...................................................................138
2. Prevent Default Form Behavior (30 mins)..................................................................138
3. Displaying Feedback (30 min)................................................................................... 139
4. Hands-On Task (1 hour).............................................................................................140
Day 5: Applying JavaScript to the Project............................................................................141
 Dynamic Product Grid (1 hour)...................................................................................... 141
Interactive Buttons (45 mins)......................................................................................... 142
Search and Filter Functionality (45 mins)...................................................................... 142
Objective:
Implement features allowing users to search and filter products based on their
preferences.............................................................................................................. 142
Form Handling for Login/Register (30 mins).................................................................. 143
Week 6 - Fetch API and Asynchronous Processing.............................................................144
Day 1: Introduction to Fetch API and Promises...................................................................144
What is an API? (30 mins)............................................................................................. 144
History of Fetch API and AJAX................................................................................ 144
Fetch API Syntax..................................................................................................... 144
Sending a Request.................................................................................................. 145
Making POST Requests.......................................................................................... 145
Error Handling................................................................................................................146
Hands-On Task (1 hour).................................................................................................146
Day 2: Introduction to Async/Await and More API Integration............................................. 148
Async/Await (1 hour)......................................................................................................148
Hands-On Task:....................................................................................................... 148
Refining API Integration................................................................................................. 149
Hands-On Task (1 hour).................................................................................................151
Day 3: Working with Dynamic Data and Advanced Array Methods..................................... 153
Advanced Array Methods (1 hour 30 mins)................................................................... 153
Using Dynamic Data (1 hour).........................................................................................154
Hands-On Tasks (30 mins)............................................................................................ 154
Day 4: Error Handling and Debugging in JavaScript........................................................... 156
Error Handling with try...catch (1 hour).......................................................................... 156
Debugging JavaScript with Developer Tools (1 hour).................................................... 157
Handling Asynchronous Errors (30 mins)................................................................ 157
Hands-On Tasks (30 mins)............................................................................................ 158
Day 5: Applying Dynamic API Data to the Cart and Login Pages....................................... 159
Dynamic Cart Implementation (1 hour).......................................................................... 159
Login/Register Page Functionality (1 hour)..............................................................160
Integrating API Data on Other Pages (30 mins)............................................................ 161
Week 7 : Local Storages, SessionStorages and Validations...............................................162
Day 1: Introduction to Local Storage and Cart Functionality............................................... 162
Understanding Local Storage and Session Storage (1 hour)........................................ 162
Managing Local Storage:......................................................................................... 163
Managing Session Storage......................................................................................164
Cart Implementation Using Local Storage (1 hour)........................................................165
Hands-On Tasks............................................................................................................ 166
 Day 2: Dynamic Product Details Page.................................................................................168
Designing the Product Details Page.............................................................................. 168
Dynamically Displaying Product Information..................................................................168
Interactivity on the Product Details Page....................................................................... 169
Hands-On Task.............................................................................................................. 169
Day 3: Checkout Page and Form Validation........................................................................ 171
Checkout Page Layout...................................................................................................171
Form Validation.............................................................................................................. 171
Dynamically Calculating Totals...................................................................................... 172
Hands-On Task.............................................................................................................. 173
Day 4: Building the Account Page and User-Specific Data................................................. 174
Designing the Account Page..........................................................................................174
Simulating User Data..................................................................................................... 174
Editing User Information................................................................................................ 175
Hands-On Task.............................................................................................................. 176
Day 5: Integrating Local Storage and Finalizing Dynamic Pages........................................177
Cart Integration with Local Storage................................................................................177
Dynamic Product Display...............................................................................................178
Checkout and Account Page Finalization...................................................................... 178
Debugging and Error Handling...................................................................................... 179
Hands-On Task........................................................................................................ 179
Week 8 : Adding Finishing Touches...................................................................................... 180
Day 1: Finalizing All Pages and Features............................................................................180
Review of All Pages....................................................................................................... 180
Polishing and Refining User Experience........................................................................180
Interactive and Dynamic Elements................................................................................ 181
Hands-On Task.............................................................................................................. 181
Day 2: Debugging and Error Handling.................................................................................182
Common JavaScript Errors............................................................................................182
2. Error Handling with try...catch.................................................................................... 182
3. Debugging Tools........................................................................................................ 183
4. Hands-On Task.......................................................................................................... 183
Day 3: Testing and Cross-Browser Compatibility.................................................................185
1. Cross-Browser Testing...............................................................................................185
2. Mobile Responsiveness............................................................................................. 185
3. Manual Testing...........................................................................................................185
4. Hands-On Task.......................................................................................................... 186
Day 4: Finalizing the Visual Design..................................................................................... 187
1. Enhancing CSS Styling..............................................................................................187
2. Preparing for Presentation......................................................................................... 188
Day 5: Project Presentation Day..........................................................................................189
 1. Final Review and Rehearsal...................................................................................... 189
2. Presentation of Projects.............................................................................................189

Week 1: HTML Fundamentals

Day 1: Introduction to HTML Basics

Objective:

By the end of this lesson, students will understand what HTML is, its purpose, and the basic
structure of an HTML document. They will learn how to create basic elements like headings,
paragraphs, lists, and links.

Session Breakdown:

1. Introduction to HTML (30 minutes)

○ What is HTML?
○ Structure of an HTML document
○ Creating your first webpage

What is HTML?

● HTML stands for HyperText Markup Language. It's the standard language used to
create web pages.
● HTML is used to structure content on the web by using various tags to define different
parts of a webpage.

Basic HTML Document Structure

● Every HTML document starts with a <!DOCTYPE html> declaration to tell the browser
what type of document it is.
● The main components of an HTML document are:
1. <html>: The root element that wraps all the content on the page.
2. <head>: Contains metadata about the document, like the title, links to
stylesheets, etc.
3. <body>: Contains the content that is displayed on the page.
Explanation:

● The <!DOCTYPE html> declaration is a required preamble.

● The <html> element is the root of the page.
● Inside the <head>, we define the title of the page that appears in the browser tab.
● The <meta charset="UTF-8"> sets the character encoding for the document.
● The <body> element contains all the content that will be displayed on the webpage.

Hands-On Task:

● Task: Create your first HTML file.

● Steps:
1. Open your code editor (e.g., VSCode, Sublime Text).
2. Create a new file and save it as index.html.
3. Copy the Basic HTML Structure code above and paste it into your file.
4. Open the file in your browser (e.g., right-click the file and select “Open with
Chrome”).

Basic HTML Tags (45 minutes)

5. Headings
6. Paragraphs
7. Lists
8. Links
Headings:

● HTML provides six levels of headings (<h1> to <h6>).

● <h1> is the highest (largest) level heading, and <h6> is the lowest (smallest).

Paragraphs:

● Paragraphs are created using the <p> tag. This is used for regular text content

Lists:
● HTML provides two types of lists: unordered lists (<ul>) and ordered lists (<ol>).
● List items are wrapped inside <li> tags.
Links:

● Links are created using the <a> (anchor) tag. The href attribute defines the destination
of the link.

Hands-On Task:

● Task: Create a webpage with headings, paragraphs, lists, and a link.

● Steps:
1. Add a main heading (<h1>) for your webpage title.
2. Add a few paragraphs (<p>) explaining what your webpage is about.
3. Add an unordered list (<ul>) of items (e.g., hobbies or skills).
4. Add a link (<a>) that points to your favorite website.

Attributes and Inline Elements (45 minutes)

● Explain attributes (e.g., href, src, alt, target).

● Introduce inline elements like <span>, <strong>, and <em>.
Inline Elements:

● Inline elements appear inside other elements without breaking the flow of the document
(e.g., within paragraphs).

Exercise (30 minutes):

● Task: Add a section to your webpage that includes:

○ A heading (<h2>), some paragraphs (<p>), a list (<ul>), and a link (<a>).
○ Use inline elements like <strong>, <em>, and <span> to style specific parts of
your text.
Day 2: Building the Page Structure
Objective:

By the end of Day 2, students will have a clear understanding of how to create a structured
HTML page using semantic HTML elements like <header>, <nav>, <main>, <section>,
and <footer>. They will also understand the importance of semantics in HTML for accessibility
and SEO purposes.

Introduction to Semantic HTML (30 minutes)

What is Semantic HTML?

● Semantic HTML introduces meaning to the web content. Instead of using generic tags
like <div>, semantic elements describe the content in a meaningful way.
● Examples of semantic elements include:
○ <header>: Represents the header of the page or section.
○ <nav>: Defines a navigation section.
○ <main>: Represents the main content of the page.
○ <section>: A standalone section of related content.
○ <footer>: Represents the footer of the page or section.

Code Example 1: Basic Semantic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section>
 <h2>Main Section</h2>
<p>This is the main content of the webpage.</p>
</section>
</main>

<footer>
<p>&copy; 2024 My Webpage</p>
</footer>
</body>
</html>

Building a Complete Page Structure (1 hour)

Hands-On Task:

● Task: Create the full structure of the landing page using semantic HTML elements.

Steps:

1. Header Section:
○ Create a <header> element that contains a website title and navigation
menu.
○ Inside the <nav>, add a list of links (<ul>) pointing to different sections of
the page.
2. Main Content:
○ Use a <main> element for the primary content.
○Inside <main>, use <section> tags to divide the content logically (e.g., a
product section, service section, etc.).
3. Footer Section:
○ Add a <footer> element that includes some footer information (e.g.,
copyright).

Code Example 2: Creating a Structured Webpage

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShopMaster</title>
</head>
<body>

<header>
<h1>ShopMaster</h1>
 <nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section id="home">
<h2>Welcome to ShopMaster</h2>
<p>Your one-stop shop for the best products!</p>
</section>

<section id="products">
<h2>Our Products</h2>
<p>Check out our latest products below.</p>
</section>
</main>

<footer>
<p>&copy; 2024 ShopMaster</p>
</footer>

</body>
</html>

Linking Pages Together (30 minutes)

How to Create Internal Links:

● Links (<a> elements) can link to different sections within the same page using the
id attribute.
● For example, clicking "About Us" in the navigation should scroll the user to the
"About Us" section.
Hands-On Task:

● Task: Create an additional page for "About Us" and link it to the main webpage.
● Steps:
1. Create a new file called about.html.
2. Add a simple structure with a header, main section, and footer.
3. Link the "About Us" navigation item in the main webpage to this new page.

Code Example 4: Creating an External Link to Another Page

Main Page (index.html)

<nav>
<ul>
<li><a href="about.html">About Us</a></li>
</ul>
</nav>
About Page (about.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About ShopMaster</title>
</head>
<body>
<header>
<h1>About ShopMaster</h1>
</header>

<main>
<section>
<h2>Who We Are</h2>
<p>ShopMaster is an online platform that brings you the best products from around
the world.</p>
</section>
</main>

<footer>
<p>&copy; 2024 ShopMaster</p>
</footer>
</body>
</html>

Exercise (30 minutes)

Task:

● Build a structured webpage for a simple website:

○ A header with a title and navigation menu.
○ A main section with two subsections (e.g., "Services" and "About Us").
○ A footer with contact information.
● Use semantic HTML to structure your content.
● Add links to navigate to different sections of the webpage.
Day 3: Working with Forms and Inputs
Objective:

By the end of Day 3, students will have a solid understanding of how to create and structure
forms in HTML. They will learn to create input fields, buttons, and how to gather user data with
forms.

Introduction to HTML Forms (45 minutes)

What is a Form?

● HTML forms are used to collect user input.

● Forms are created using the <form> element. Inside the form, we place various input
types like text fields, checkboxes, radio buttons, and submit buttons.

Form Structure

● A basic form consists of:

1. The <form> tag which wraps around all form elements.
2. The action attribute, which specifies where the form data should be sent.
3. The method attribute, which specifies how to send the form data (usually GET or
POST).

Explanation:

● The action attribute specifies the server endpoint where form data will be submitted.
 ● The method attribute defines how the data is sent (POST is commonly used for form
submissions).
● The <label> tags provide labels for the input fields, and the for attribute connects the
label with the input’s id.
● The <input> fields collect user data, and the <button> submits the form.

Input Fields and Types ( 1 hour)

Input Types:

● HTML offers a variety of input types that allow users to enter different types of data.
These include text, email, password, checkbox, radio, date, and many more.
● The most common input types include:
○ text: A single line of text.
○ password: Masks the input for passwords.
○ email: Validates that an email format is entered.
○ radio: Select one option from a set of options.
○ checkbox: Allows multiple selections.

Code Example 2: Different Input Types

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>

<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>

<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>

<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<br>

<label for="subscribe">Subscribe to newsletter:</label>

<input type="checkbox" id="subscribe" name="subscribe">
<br>

<button type="submit">Register</button>
</form>

Explanation:

● <input type="text">: Allows users to enter plain text.

● <input type="password">: Masks the user input to protect passwords.
● <input type="radio">: Radio buttons allow users to choose one option from a
group.
● <input type="checkbox">: Checkbox allows users to select multiple options

Hands-On Task:

● Task: Create a registration form with the following fields:

1. Username
2. Password
3. Email
4. Gender (radio buttons)
5. A checkbox to subscribe to the newsletter

Adding Labels, Placeholder, and Fieldset (45 minutes)

Labels and Placeholders:

● Labels are essential for accessibility, as they help users (especially those using screen
readers) understand what input is required.
● The placeholder attribute shows a hint inside the input box before the user types.
Explanation:

● Placeholder Text: A short hint that appears in the input field until the user starts typing.
● Textareas: Used for multi-line input, typically for a comment or bio.

Fieldset and Legend:

● The <fieldset> tag groups related fields within a form, while <legend> provides a
caption for the grouped fields.
Code Example 4: Grouping Form Elements with Fieldset

Explanation:

● Fieldset: Used to group related form elements, making the form more structured and
easier to understand.
● Legend: Provides a title or description for the grouped fields.

Hands-On Task:

● Task: Expand the registration form from the previous task by grouping the fields inside
<fieldset> and using <legend> for the form title.

Building a Simple Search Bar (30 minutes)

How to Create a Search Bar:

● A search bar is an input field that allows users to search for specific content on the site.
The form can be sent via the GET method to process the search.
Explanation:

● The action attribute is set to /search, indicating that the form will be submitted to the
search endpoint.
● The form method is GET, which is commonly used for search forms because the data is
appended to the URL.

Exercise (30 minutes)

Task:

● Create a complete registration form that includes:

1. Username, Password, Email (with validation).
2. Gender selection (radio buttons).
3. Newsletter subscription (checkbox).
4. Date of birth (date picker).
5. A short bio (textarea).
● Bonus: Add a search bar at the top of the form with a submit button.
Day 4: Nesting, Tables, and Divs
Objective:

By the end of Day 4, students will understand how to group and structure content using <div>
elements and how to organize data in tables. They will learn to nest elements within each other
and use tables for data presentation.

Grouping Content with <div> (30 minutes)

What is a <div>?

● The <div> tag is a block-level container used to group HTML elements together.
● It is often used to apply styles or organize content in sections.

Explanation:

● The <div> tag allows you to group elements together into one section. It does not have
a visual appearance but can be styled with CSS.
● Commonly used for layout and structure.

Hands-On Task:

● Task: Group related content on your page using <div>.

● Steps:
1. Create a <div> for your website's header.
2. Inside the <div>, add a heading and a paragraph.

Nesting HTML Elements (45 minutes)

What is Nesting?

● Nesting means placing one HTML element inside another. This is how most complex
HTML structures are built.
Explanation:

● In this example, an unordered list is nested inside a <div>. The list is further nested
inside the category <h2> heading.
● Nesting helps create a clear hierarchy and structure for the content

Hands-On Task:

● Task: Add a section to your webpage that includes a heading, a paragraph, and a list.
Nest the elements inside a <div>.
● Steps:
1. Create a section called "Product Categories".
2. Inside the <div>, add a heading for the section and an unordered list of
products.

Introduction to Tables (1 hour)

What is a Table?

● Tables are used to display data in a structured, grid format.

● A table consists of rows (<tr>), and each row contains cells (<td>). The table can also
have header cells (<th>).
Explanation:

● The <table> tag creates the table.

● <tr> defines a row, <th> defines a header cell, and <td> defines a data cell.
● The border="1" attribute is used to create visible borders for the table cells.

Hands-On Task:

● Task: Create a simple pricing table for your webpage.

● Steps:
1. Add a table with three columns: "Product", "Price", and "Quantity".
2. Populate the table with at least three rows of product data.

Adding Table Headings and Captions (30 minutes)

Table Headings and Captions:

● The <caption> tag is used to add a title to the table.

● The <th> tag is used for header cells, which are bold and centered by default.
Explanation:

● The <caption> tag adds a title to the table, which is typically placed above the table.
● <th> is used for table headings, which make the table easier to read and understand.

Advanced Table Features: Merging Cells (30 minutes)

Merging Cells with colspan and rowspan:

● You can merge table cells using the colspan and rowspan attributes. colspan
merges columns, and rowspan merges rows.
Explanation:

● colspan="2" merges two columns into one.

● rowspan="2" merges two rows into one.

Exercise (30 minutes)

Task:

● Create a product price table that includes at least three columns: "Product", "Price",
and "Quantity".
● Add a caption for the table.
● Use colspan and rowspan to merge cells where appropriate (e.g., merge product
details like price and warranty into one row).
Day 5: Applying What We've Learned to the Project
Objective:

By the end of Day 5, students will apply the HTML concepts they’ve learned throughout the
week to begin building the structure of the ShopMaster landing page, using semantic HTML,
forms, tables, and grouped elements.

Review of HTML Concepts (30 minutes)

● Recap the key HTML concepts learned during the week, ensuring students have a solid
understanding of:
1. The basic structure of an HTML document.
2. Semantic HTML elements: <header>, <main>, <footer>, <section>, etc.
3. Forms and form elements.
4. Grouping content with <div>.
5. Creating and structuring tables.

Interactive Review:

● Ask students questions about the concepts.

● Show small examples on the screen and have students identify what each part does
(e.g., form elements, table headers, etc.).

Building the Header and Navigation (45 minutes)

Hands-On Task:

● Task: Build the header and navigation bar for the ShopMaster landing page using
semantic HTML.

Steps:

1. Inside the <header>, create the main title of the website using an <h1> tag.
2. Inside the <nav>, add a navigation bar with links for "Home", "Products", "About Us",
and "Contact".
3. Group the navigation links using an unordered list (<ul>), with each link inside a list item
(<li>).
Explanation:

● The <header> contains the main title of the page, which is important for accessibility.
● The <nav> wraps around the navigation links, and each link is placed in a list item
(<li>).
● Ensure that links use meaningful text and point to the correct sections or pages.

Creating the Main Hero Section (45 minutes)

Hands-On Task:

● Task: Create the hero section of the ShopMaster landing page with a welcome
message and call-to-action (CTA) button.

Steps:

1. Inside a <section> tag, add an <h2> for the welcome message.

2. Below the heading, add a paragraph that describes the website.
3. Add a "Shop Now" button using the <button> element.
Explanation:

● The <section> groups the welcome message and CTA.

● The <h2> introduces the main content, and the <button> encourages users to take
action (in this case, navigate to the product section).

Structuring the Product Section (45 minutes)

Hands-On Task:

● Task: Add a product section that introduces the list of available products.

Steps:

1. Create another <section> with the id="products" to represent the product section.
2. Add a table to display product names, prices, and available quantities.
Explanation:

● The product section introduces a simple table to display the available products.
● The table contains a header row (<th>) and two product rows (<tr>), each with a
product name, price, and quantity.

Exercise: Expanding the Landing Page (30 minutes)

Task:

● Expand the landing page by adding more sections or pages based on what students
have learned. Suggested additions include:
○ A form in the "Contact" section where users can submit their name, email, and a
message.
○ A footer with contact details and links to social media.
Code Example 4: Contact Form and Footer

<section id="contact">
<h2>Contact Us</h2>
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>

<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<br>

<button type="submit">Send</button>
</form>
</section>

<footer>
<p>&copy; 2024 ShopMaster</p>
<p>Follow us on <a href="#">Twitter</a>, <a href="#">Facebook</a></p>
</footer>

Explanation:

● The contact form collects user data (name, email, message).

● The footer provides basic copyright information and links to social media.

Recap and Final Touches (15 minutes)

Recap:

● Review what has been built so far, emphasizing how the concepts from the entire week
come together in the landing page project.
● Answer any final questions.

End of Day Outcome:

● By the end of Day 5, students will have applied the HTML concepts they’ve learned
throughout the week to build the basic structure of the ShopMaster landing page,
including the header, navigation, hero section, product list, contact form, and footer.
 Week 2: CSS Basics and Layouts
Day 1: Introduction to CSS – Syntax, Selectors, and Basic
Styling
Objective:

By the end of this session, students will understand the basics of CSS syntax, how to link CSS
to HTML, and how to apply basic styling using selectors. They will learn to style text,
backgrounds, and create simple layouts.

Introduction to CSS (20 minutes)

What is CSS?

● CSS stands for Cascading Style Sheets. It’s used to control the appearance and layout
of web pages.
● CSS works by targeting HTML elements and applying styles like colors, fonts, margins,
and more.

Basic CSS Syntax:

● CSS syntax consists of selectors and declarations:

○ Selector: Specifies which HTML elements to style.
○ Declaration: The style you want to apply, consisting of a property and a value.

Explanation:

● h1 is the selector (it targets all <h1> elements).

● color, font-size, and text-align are properties, and blue, 24px, and center
are their values.
Linking CSS to HTML (30 minutes)

Three Ways to Add CSS:

1. Inline CSS: Add styles directly inside HTML tags.

○ Example: <h1 style="color: red;">Hello World</h1>
2. Internal CSS: Write CSS inside a <style> tag in the HTML document’s <head>.
○ Example:

External CSS: Link to an external stylesheet using the <link> tag inside the <head>.

● Example:

Hands-On Task:

● Task: Link an external CSS file to your HTML document.

● Steps:
1. Create a new CSS file called styles.css.
2. Link it to the HTML document using the <link> tag.
3. Add some basic styles in the styles.css file (e.g., change the background
color of the page).
CSS Selectors (45 minutes)

Types of CSS Selectors:

1. Element Selector: Targets all elements of a specific type (e.g., all <p> tags).
○ Example: p { color: red; }
2. Class Selector: Targets elements with a specific class. The class selector is written with
a dot (.).
 ○ Example: .highlight { background-color: yellow; }
3. ID Selector: Targets a specific element with an ID. The ID selector is written with a hash
(#).
○ Example: #main-title { font-size: 24px; }
4. Universal Selector: Targets all elements on the page (*).
○ Example: * { margin: 0; padding: 0; }
5. Grouping Selectors: Apply the same styles to multiple selectors by separating them
with a comma.
○ Example: h1, h2, p { color: black; }

Hands-On Task:
 ● Task: Add a class and an ID to your HTML elements and apply CSS styles to them.
● Steps:
1. Create a class called .highlight to change the background color of important
text.
2. Use an ID selector to style the main title.

Styling Text and Fonts (40 minutes)

Typography in CSS:

● Font family: Sets the font for text. You can use system fonts or import custom fonts (like
Google Fonts).
● Font size: Defines the size of the text (e.g., 16px, 1.5em).
● Font weight: Sets the thickness of the font (e.g., bold, normal, 100).
● Text align: Controls the alignment of text (e.g., left, right, center).
● Text color: Changes the text color using names, HEX, RGB, or HSL values.

Hands-On Task:

● Task: Apply typography styles to your webpage.

● Steps:
1. Set the default font for the entire page.
 2. Change the color and size of headings and paragraphs.

Styling Backgrounds and Borders (35 minutes)

Backgrounds:

● You can style the background using colors or images.

● The background-color property is used to set a background color.
● The background-image property allows you to add an image in the background.

Borders:

● The border property defines a border around an element. You can specify border
width, style, and color.

Hands-On Task:

● Task: Add background colors and borders to different sections of your page.
● Steps:
1. Add a background color to the <body> tag.
 2. Apply a border and padding to your paragraphs.

Recap and Final Touches (10 minutes)

Recap:

● Review the key concepts covered:

○ CSS syntax and how to link it to HTML.
○ The importance of selectors (element, class, ID) and how to use them.
○ Basic text and background styling.

Final Task:

● Have students review their webpage, ensuring that all styles are applied correctly

Introduction to the CSS Box Model (30 minutes)

What is the Box Model?

● Every HTML element is represented as a rectangular box, which consists of four areas:
1. Content: The innermost part where the text or images appear.
2. Padding: Space between the content and the border.
3. Border: The edge surrounding the padding (and content).
4. Margin: Space outside the border, separating the element from others.

Visual Representation of the Box Model:

● Draw a visual on the board or show an image to represent how the content, padding,
border, and margin relate to one another.
Day 2: Box Model, Margins, Padding, and Borders
Objective:

By the end of this session, students will understand how the CSS box model works, including
margins, padding, and borders. They will learn to control the spacing around and inside
elements, and how to use the box model to structure layouts.

Introduction to the CSS Box Model (30 minutes)

What is the Box Model?

● Every HTML element is represented as a rectangular box, which consists of four areas:
1. Content: The innermost part where the text or images appear.
2. Padding: Space between the content and the border.
3. Border: The edge surrounding the padding (and content).
4. Margin: Space outside the border, separating the element from others.

Visual Representation of the Box Model:

● Draw a visual on the board or show an image to represent how the content, padding,
border, and margin relate to one another.

Explanation:

● The width is 200px, but the total size of the box includes padding, border, and margin.
○ Total width: 200px (width) + 20px (padding) + 5px (border) = 230px.
○ The element will also have an additional 10px of margin outside of it.

Hands-On Task:
 ● Task: Create a simple box element in HTML and apply the box model properties to it.
● Steps:
1. Create a <div> with the class box in your HTML file.
2. Style the .box in CSS with specific width, padding, border, and margin values.

Understanding Padding and Margin (45 minutes)

Padding:

● Padding adds space inside the element, between the content and the border.
● You can control padding for each side individually or set the same padding for all sides.

Explanation:

● padding: 10px; applies 10px of padding to all sides.

● You can also apply padding to individual sides using padding-top, padding-right,
padding-bottom, and padding-left.

Margins:

● Margins create space outside the element, pushing it away from other elements.
● Similar to padding, you can control margins for each side individually or set the same
margin for all sides.
Explanation:

● margin: 15px; applies a 15px margin around the element.

● Individual sides can be adjusted using margin-top, margin-right, etc.

Hands-On Task:

● Task: Apply different margin and padding values to various elements on your webpage.
● Steps:
1. Add padding to your headings and paragraphs.
2. Add margins to your images or <div> elements.

Borders and Border Radius (45 minutes)

Borders:

● Borders are applied around the padding and content. You can control the width, style,
and color of borders.
● Border styles include:
○ solid: A solid line.
○ dashed: A dashed line.
○ dotted: A dotted line.
Explanation:

● Borders add a visual edge around an element. You can control how thick and what style
the border is.

Border Radius:

● The border-radius property makes the corners of an element rounded.

● You can apply different values to create more rounded or less rounded corners.

Explanation:

● A border-radius of 10px creates rounded corners. If you set the radius to 50%, it will
create a circular shape.
Hands-On Task:

● Task: Add borders to your <div>, <p>, or image elements and experiment with different
border styles and border-radius values.
● Steps:
1. Add a border to your product section.
2. Round the corners of your buttons or images using border-radius.

Box Sizing and Width/Height (40 minutes)

Width and Height:

● The width and height properties define the size of an element's content area,
excluding padding, border, and margin.
● You can set width and height using pixels (px), percentages (%), or other units.

Explanation:

● In this example, the content area of the <div> will be 300px wide and 200px high, but
the total size will include padding, borders, and margins.

Box Sizing:

● By default, the width and height only apply to the content area. However, you can
change this behavior using box-sizing: border-box;.
● With border-box, padding and borders are included in the element's total width and
height.
Explanation:

● box-sizing: border-box; makes sure the total width is 300px, including padding
and border, rather than adding padding and border to the width.

Hands-On Task:

● Task: Experiment with width, height, and box-sizing.

● Steps:
1. Set the width and height for your <div> elements.
2. Apply box-sizing: border-box; to ensure consistent element sizes when
using padding and borders.

Exercise: Building a Product Card (30 minutes)

Task: Create a product card layout using the box model.

Steps:

1. Create a <div> for the product card.

2. Add a product image, product title, and price inside the card.
3. Apply padding, borders, and margins to style the card.
4. Set the card’s width and height and use box-sizing: border-box; to ensure the
padding and border don’t affect the size.
Day 3: CSS Layouts – Flexbox Introduction
Objective:

By the end of this session, students will understand the basics of Flexbox, a powerful CSS
layout tool used to create responsive and flexible layouts. They will learn how to use Flexbox
properties to align, distribute, and order elements on a webpage.

Introduction to Flexbox (30 minutes)

What is Flexbox?

● Flexbox (Flexible Box Layout) is a CSS layout model that allows you to arrange
elements in rows or columns, distribute space, and align items.
● It simplifies creating flexible, responsive designs compared to using floats or manually
setting margins.

How Flexbox Works:

● To use Flexbox, you need to set a container's display property to flex, making the
container a flex container, and its direct children become flex items.

Basic Flexbox Terms:

● Main Axis: The primary axis along which the flex items are laid out (can be horizontal or
vertical).
● Cross Axis: The axis perpendicular to the main axis.
Explanation:

● The .container is set to display: flex, making it a flex container.

● Each .item becomes a flex item. The flex: 1; property makes the items grow
equally to fill the available space.

Hands-On Task:

● Task: Create a basic flex container with three items.

● Steps:
1. Create a <div> container with three child items.
2. Set the container to display: flex; and use flex: 1; to make the items
grow equally.

Flexbox Properties for Containers (45 minutes)

Key Flexbox Properties for Containers:

1. flex-direction:
○ Specifies the direction of the flex items (row or column).
○ Values: row (default), column, row-reverse, column-reverse.
2. justify-content:
○ Aligns flex items along the main axis (horizontally by default).
○ Values: flex-start (default), center, flex-end, space-between,
space-around.
3. align-items:
○ Aligns flex items along the cross axis (vertically by default).
○ Values: stretch (default), center, flex-start, flex-end.
4. flex-wrap:
○ Allows flex items to wrap onto multiple lines.
○ Values: nowrap (default), wrap, wrap-reverse.
Explanation:

● flex-direction: row; arranges the flex items horizontally.

● justify-content: space-between; distributes space between the items, ensuring
equal space between them.
● align-items: center; aligns the items vertically in the middle of the container.

Hands-On Task:

● Task: Modify your flex container to experiment with different Flexbox properties
(justify-content, align-items, and flex-direction).
● Steps:
1. Try using justify-content: center;, align-items: flex-start;, and
flex-direction: column; to see how the layout changes.

Flexbox Properties for Flex Items (45 minutes)

Key Flexbox Properties for Items:

1. flex-grow:
○ Controls how much the flex item grows relative to the others.
○ Values: Any number (default is 0, meaning no growth).
2. flex-shrink:
○ Controls how much the flex item shrinks relative to the others.
○ Values: Any number (default is 1, meaning items shrink as needed).
3. flex-basis:
○ Defines the default size of the flex item before any growing or shrinking.
○ Values: Can be a length (e.g., 100px) or percentage.
4. order:
 ○ Specifies the order of the flex items. Lower numbers appear first.
○ Values: Any number (default is 0).

Explanation:

● flex-grow: 2; makes the item grow twice as fast as other items with flex-grow:
1.
● flex-basis: 100px; sets the initial size of the item to 100px before applying growth
or shrink.

Hands-On Task:

● Task: Apply flex-grow, flex-shrink, and flex-basis to your flex items to experiment with
how they grow and shrink within the container.
● Steps:
1. Apply flex-grow: 2; to one item and flex-grow: 1; to others.
2. Experiment with flex-shrink and flex-basis.

Responsive Design with Flexbox (40 minutes)

Making Layouts Responsive:

● Flexbox simplifies building responsive layouts that adjust to different screen sizes.
● By using Flexbox and media queries, you can change the layout for smaller devices.
Explanation:

● flex-wrap: wrap; allows the items to wrap onto the next line if there's not enough
space.
● The media query adjusts the layout on small screens (e.g., smartphones), setting
flex-basis: 100%; to make each item take up the full width.

Hands-On Task:

● Task: Build a responsive product grid using Flexbox.

● Steps:
1. Create a flex container with multiple product cards.
2. Use flex-basis to adjust the size of the product cards.
3. Add a media query to change the layout for smaller screens.
Exercise: Building a Responsive Navigation Bar (30 minutes)

Task: Use Flexbox to create a responsive navigation bar.

Steps:

1. Create a navigation bar with links for "Home", "Products", "About", and "Contact".
2. Use display: flex; to align the links in a row.
3. Add a media query to stack the links vertically on smaller screens.

Code Example 5: Responsive Navigation Bar

/* Navigation bar */
nav {
display: flex;
justify-content: space-around;
background-color: #333;
padding: 10px;
}

nav a {
color: white;
text-decoration: none;
padding: 10px;
}

@media (max-width: 600px) {

nav {
flex-direction: column;
}

nav a {
text-align: center;
padding: 15px;
}
}

Explanation:

● On larger screens, the navigation links are displayed in a row.

● On smaller screens, the links stack vertically using flex-direction: column;.
Day 4: Advanced Flexbox Techniques and Responsive
Design
Objective:

By the end of this session, students will understand advanced Flexbox techniques, including
nested Flexbox layouts and combining Flexbox with media queries for complex responsive
designs. They will apply these techniques to create a more complex, fully responsive layout.

Nested Flexbox Layouts (45 minutes)

What is a Nested Flexbox Layout?

● A nested Flexbox layout refers to placing a flex container inside another flex container.
This is useful for creating complex layouts where different sections of the page need
separate alignments or arrangements.

Code Example 1: Nested Flexbox Layout

Explanation:

● The .outer-container is a flex container that arranges the .left-section and

.right-section side by side.
● Inside each section, there’s another flex container using flex-direction: column;
to arrange the .item elements vertically.

Hands-On Task:

● Task: Build a nested Flexbox layout with two main sections: a left and a right section.
Each section should contain vertically aligned items.
● Steps:
1. Create a Flexbox container for the entire layout.
2. Nest two flex containers inside it, one for each section (left and right).
3. Arrange the items in each section using flex-direction: column;.

Advanced Flexbox Alignment Techniques (40 minutes)

Aligning Items with align-self:

● While align-items applies to all flex items within a container, align-self allows you
to align individual items differently from the others.
Code Example 2: Using align-selfCode Example 2: Using align-self

Explanation:

● align-self: flex-end; moves the first item to the bottom of the container, while
align-self: center; centers the second item vertically.

Hands-On Task:
 ● Task: Create a Flexbox container with three items, each aligned differently using
align-self.
● Steps:
1. Set up a flex container and add three flex items.
2. Use align-self to align one item to the top, one to the center, and one to the
bottom.

Combining Flexbox with Media Queries (50 minutes)

Creating a Responsive Flexbox Layout:

● Flexbox makes it easy to create responsive layouts that adapt to different screen sizes.
By combining Flexbox with media queries, we can adjust the layout based on the
screen width.
● This is important for creating layouts that work well on both desktops and mobile
devices.

Code Example 3: Responsive Layout with Media Queries

Explanation:

● On larger screens, the .item elements take up 30% of the container’s width.
● For screens smaller than 768px (e.g., tablets or mobile devices), the media query
applies, making each .item take up 100% of the container width (stacking the items
vertically).

Hands-On Task:

● Task: Create a responsive product grid using Flexbox and media queries. The grid
should display multiple items side by side on larger screens and stack the items
vertically on smaller screens.
● Steps:
1. Set up a Flexbox container with multiple items.
2. Use flex-basis to arrange the items side by side on large screens.
3. Add a media query to make the items stack on small screens (e.g.,
smartphones).

Flexbox Practice: Building a Responsive Portfolio Layout (45 minutes)

Task: Build a simple portfolio layout using Flexbox. The portfolio will feature three
sections:

1. Profile Section: A section with a profile picture and a short bio.

2. Skills Section: A section displaying skill tags.
3. Projects Section: A grid of project cards.

Steps:

1. Profile Section:
○ Create a flex container with an image and bio aligned next to each other.
○ Use align-items: center; to vertically center the content.
2. Skills Section:
 ○ Use Flexbox to display skill tags in a row. Wrap the items using flex-wrap:
wrap;.
3. Projects Section:
○ Create a responsive grid of project cards. Use flex-basis to control the card
size on large screens and a media query to stack them on smaller screens.

Code Example 4: Portfolio Layout

<div class="portfolio-container">
<!-- Profile Section -->
<div class="profile-section">
<img src="profile.jpg" alt="Profile Picture" width="150px">
<div class="bio">
<h2>John Doe</h2>
<p>Web Developer with a passion for creating beautiful and responsive
websites.</p>
</div>
</div>

<!-- Skills Section -->

<div class="skills-section">
<div class="skill">HTML</div>
<div class="skill">CSS</div>
<div class="skill">JavaScript</div>
<div class="skill">React</div>
</div>

<!-- Projects Section -->

<div class="projects-section">
<div class="project-card">
<h3>Project 1</h3>
<p>A responsive e-commerce website.</p>
</div>
<div class="project-card">
<h3>Project 2</h3>
<p>A social media app built with React.</p>
</div>
<div class="project-card">
<h3>Project 3</h3>
<p>A portfolio site with responsive design.</p>
</div>
</div>
</div>

CSS for the Portfolio Layout:

/* Portfolio container */
.portfolio-container {
display: flex;
flex-direction: column;
padding: 20px;
}

/* Profile section */
.profile-section {
display: flex;
align-items: center;
margin-bottom: 30px;
}

.bio {
margin-left: 20px;
}

.bio h2 {
font-size: 24px;
margin-bottom: 10px;
}

/* Skills section */
.skills-section {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}

.skill {
background-color: #3498db;
color: white;
padding: 10px 15px;
border-radius: 5px;
}

/* Projects section */
.projects-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.project-card {
flex-basis: 30%;
background-color: #f4f4f4;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive design */
@media (max-width: 768px) {
.projects-section {
flex-direction: column;
}

.project-card {
flex-basis: 100%;
}
}

Explanation:

1. Profile Section:
○ The profile section uses flex-direction: row; and align-items:
center; to align the image and bio next to each other and center them
vertically.
2. Skills Section:
○ The skill tags are displayed in a row using Flexbox with flex-wrap:
wrap; so that they wrap onto the next line if there are too many to fit in one
row.
3. Projects Section:
○ Each project card is given a flex-basis of 30%, so three cards can fit side
by side on large screens.
○ A media query is added to make the cards stack vertically on smaller
screens, adjusting flex-basis to 100%.

Hands-On Task:

● Task: Build a portfolio layout similar to the one above.

● Steps:
1. Create a profile section with an image and bio.
2. Add a skills section using Flexbox.
3. Create a responsive grid of project cards using Flexbox and media queries.

Final Exercise: Creating a Responsive Web Page (30 minutes)

Task: Combine everything you’ve learned in Week 2 to create a fully responsive web
page. The page should include:

1. A header with navigation links.

2. A main section with content arranged using Flexbox.
3. A footer with links and copyright information.
Steps:

1. Create a navigation bar using Flexbox.

2. Add a main content area with a Flexbox layout.
3. Style the footer using Flexbox and ensure the page is responsive using media
queries.
Day 5: Building the First Part of the ShopMaster Project –
Responsive Product Grid
Objective:

By the end of this session, students will apply everything they’ve learned in the past week
(especially Flexbox and responsive design) to create a responsive product grid for the
ShopMaster landing page. This will be their first major step towards completing the full project
by the end of the course.

Review and Setup for the Day (20 minutes)

Recap of Key Concepts:

● Briefly review Flexbox properties, media queries, and responsive design techniques
covered earlier in the week.
● Ensure students are comfortable with using Flexbox for creating layouts and media
queries for responsive design.

Project Focus:

● The main task of the day is to create the responsive product grid section for the
ShopMaster website. This will feature multiple products arranged in a flexible grid that
adjusts depending on screen size.

Setting Up the Product Grid (45 minutes)

Task: Create a product grid section on the ShopMaster page where products are displayed in a
grid layout using Flexbox.

Steps:

1. Create the HTML Structure:

○ Create a <section> for the product grid.
○ Inside the section, create multiple product cards using <div> elements.
2. Apply Flexbox to the Product Grid:
○ Set the product grid container to display: flex;.
○ Use flex-wrap: wrap; to allow products to wrap to the next row if they
overflow.
○ Set a reasonable flex-basis for the product cards (e.g., 30%).
Code Example 2: Flexbox Grid CSS

/* Product Grid */
.product-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
padding: 20px;
}

/* Product Card */
.product-card {
flex-basis: 30%;
background-color: #f4f4f4;
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}

.product-card img {
max-width: 100%;
height: auto;
 border-radius: 5px;
}

.product-card h3 {
margin: 15px 0 10px;
font-size: 18px;
}

.product-card p {
color: #888;
margin-bottom: 15px;
}

.product-card button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}

.product-card button:hover {
background-color: #2980b9;
}

Making the Product Grid Responsive (45 minutes)

Task: Apply media queries to make the product grid responsive. On smaller screens (like tablets
and mobile), the grid should adjust to display fewer items per row or stack items vertically.

Steps:

1. Add Media Queries:

○ Add a media query to adjust the layout for screens smaller than 768px.
○ Set the flex-basis of the product cards to 100% to make them stack vertically
on smaller screens.
Adding Hover Effects to Product Cards (30 minutes)

Task: Add interactive hover effects to the product cards to enhance the user experience.

Steps:

1. Change Card Style on Hover:

○ Change the background color or apply a shadow effect when the user hovers
over the product card.
○ Add hover effects to buttons to change their appearance when hovered over.

Hands-On Task:

● Task: Apply hover effects to your product grid. Add animations or transitions for smooth
interactions.
● Steps:
1. Add hover effects to the product card container (e.g., change the box shadow).
2. Apply hover effects to the “Add to Cart” button.

Exercise: Adding Product Data Dynamically (30 minutes)

Task: Use JavaScript (if time permits) to add product data dynamically from an array of objects.
This allows you to practice integrating JavaScript with your layout.

Steps:

1. Create an Array of Products:

○ Define an array of product objects, each containing properties like name, price,
and image URL.
 2. Generate HTML Dynamically:
○ Use JavaScript to loop through the array and generate the HTML for each
product card dynamically.

Code Example 5: Adding Products Dynamically

<section id="product-grid"></section>

<script>
const products = [
{ name: 'Product 1', price: '$19.99', image: 'product1.jpg' },
{ name: 'Product 2', price: '$29.99', image: 'product2.jpg' }
];

const productGrid = document.getElementById('product-grid');

products.forEach(product => {
const productCard = `
<div class="product-card">
<img src="${product.image}" alt="${product.name}">
<h3>${product.name}</h3>
<p>${product.price}</p>
<button>Add to Cart</button>
</div>
`;
productGrid.innerHTML += productCard;
});
</script>
 Week 3: Advanced CSS Techniques

Day 1: CSS Transitions and Hover Effects

Introduction to CSS Transitions (45 minutes)

What are CSS Transitions?:

CSS Transitions allow changes in CSS property values to occur over a specified duration rather
than happening instantly. This makes visual changes smoother and more appealing.

Transition Properties:

1. transition-property:
○ Defines the specific CSS properties that will change smoothly (e.g.,
background-color, transform, width, opacity).
○ If multiple properties need transitions, they can be listed, separated by commas.
○ Default: all (all properties will transition).

2. Transition-duration:
● Specifies how long the transition should take to complete (e.g., 0.5s for 500
milliseconds).
● If different properties have different durations, they can be listed in the same
order as transition-property.
3. transition-timing-function:
● Defines how the intermediate states of the transition are calculated. Common values are:
○ ease: Start slow, speed up, then slow down (default).
○ linear: Constant speed from start to end.
○ ease-in: Start slow, then speed up.
○ ease-out: Start fast, then slow down.
○ ease-in-out: Slow at both the start and end.
○ Cubic-bezier functions: Custom timing functions like cubic-bezier(0.25,
0.1, 0.25, 1).

4. transition-delay:
● Sets a delay before the transition starts (e.g., 1s will wait 1 second before starting the
transition).
Hover Effects and Pseudo-Classes (45 minutes)

What is the :hover Pseudo-Class?:

● The :hover pseudo-class applies styles when the user hovers over an element (e.g.,
buttons, links, product cards). It's widely used for interactive effects.
● It can be applied to any element, not just links.

Examples of Hover Effects:

● Hover on Buttons:
○ Change background color, add shadows, scale up the size, or change the text
color on hover.
● Hover on Links:
○ Change the color or underline the text.

● Hover on Product Cards:

○ Apply hover effects to product cards to increase the scale slightly, add a box
shadow, or change the border.
Creating Hover Menus on Product Cards (1 hour)

What is a Hover Menu?:

● A hover menu is a hidden element that becomes visible only when its parent (e.g., a
product card) is hovered. Common uses include quick view, add to wishlist, and
compare buttons on product cards.

Steps to Create Hover Menus:

1. Positioning the Hover Menu:

○ Use absolute positioning to place the hover menu inside the product card.
○ Initially hide the menu using opacity: 0 and visibility: hidden.
○ Change these properties to opacity: 1 and visibility: visible on
hover.
2. Transitions for Smooth Visibility:
○ Add transition to the opacity property to ensure a smooth fade-in effect
when the product card is hovered.

CSS Example:

/* Hover menu for product card */

.product-card {
position: relative; /* Ensure that child elements can be absolutely positioned */
overflow: hidden; /* Hide anything that spills out */
}

.product-menu {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

.product-card:hover .product-menu {
opacity: 1;
visibility: visible;
}
 3. Adding Menu Buttons:
● Use basic buttons for quick view, add to wishlist, and compare options.

Hands-On Task:

● Implement hover menus that contain Quick View, Add to Wishlist, and Compare
buttons.
● Ensure smooth transitions so the menu fades in when the product card is hovered.

Hands-On Task: Applying Transitions and Hover Effects (30 minutes)

Task 1: Apply Transitions:

● Students will apply CSS transitions to buttons, links, and product cards to create smooth
hover effects (e.g., changing background color, scaling, and adding shadows).

Task 2: Hover Menus:

● Students will implement hover menus on product cards. The menu should contain Quick
View, Add to Wishlist, and Compare buttons that appear smoothly when the product
card is hovered.

Stretch Goal (Explore Further):

● CSS Animations: Introduce CSS animations as an advanced topic for further

exploration. CSS animations can be used for more complex movements, not just
transitions.
Day 2: CSS Animations and Smooth Scrolling

Introduction to CSS Animations (1 hour)

What are CSS Animations?:

CSS animations allow the values of CSS properties to change smoothly over time, using
keyframes. Unlike transitions, which define changes between two states (e.g., normal and
hover), animations can define multiple stages and apply more complex effects.

Key Concepts of CSS Animations:

1. @keyframes:
○ @keyframes defines the stages of the animation.
○ Each keyframe represents a percentage of the animation duration (0% is the
start, 100% is the end).

2. Animation-name:
○ Specifies the name of the @keyframes animation to apply to an element.
3. Animation-duration:
● Specifies how long the animation will take to complete (e.g., 1s for 1 second).

4. Animation-iteration-count:
● Defines how many times the animation will play (e.g., 1, infinite, or any
specific number).

5. animation-timing-function:
● Specifies the speed curve of the animation (similar to
transition-timing-function).
● Common values are ease, linear, ease-in, ease-out, and ease-in-out.

6. Animation-delay:
● Sets a delay before the animation starts.
 7. Animation-fill-mode:
● Defines what styles should apply to the element before and after the animation.
Common values:
○ forwards: Retains the final state of the animation.
○ backwards: Applies the starting styles during the delay period.
○ both: Combines both behaviors.

Simple Animation Example:

Creating Simple Animations (45 minutes)

Examples of Simple Animations:

1. Fade-in Effect for Headers:

○ Create a simple fade-in effect for headers on the page.

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

h1 {
animation-name: fadeIn;
animation-duration: 2s;
}

2. Bounce Effect for Buttons:

● Apply a bounce effect to a button to make it more engaging.
● Example:

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}

button {
animation-name: bounce;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
 3. Slide-in Animation for Banners:
● Create a slide-in effect for banners to make the page more dynamic.
● Example:

@keyframes slideIn {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}

.banner {
animation-name: slideIn;
animation-duration: 1s;
}

Smooth Scrolling with CSS (45 minutes)

What is Smooth Scrolling?:

Smooth scrolling allows for a more fluid user experience when navigating between sections on a
page, especially with anchor links (<a href="#section">). Instead of an instant jump, the
page scrolls smoothly to the target section.

CSS for Smooth Scrolling:

● You can achieve smooth scrolling with a single CSS property: scroll-behavior:
smooth.
● This property can be applied to the html or body element to make all anchor link clicks
scroll smoothly.

Use Case: Internal Links:

● Smooth scrolling is often applied to internal links within a page (e.g., "Back to Top"
button or navigational links).
 ● Example of an internal anchor link:

Hands-On Task:

● Apply smooth scrolling to the landing page by adding anchor links and applying
scroll-behavior: smooth in the CSS.
● Add a “Back to Top” button that scrolls smoothly to the top of the page.

Hands-On Task: Animations and Smooth Scrolling (30 minutes)

Task 1: Keyframe Animation:

● Students will create a simple keyframe animation for an element on the landing page.
This can include:
○ A fade-in effect for headers.
○ A bounce effect for buttons.
○ A slide-in animation for a promotional banner.

Task 2: Smooth Scrolling:

● Students will implement smooth scrolling for anchor links on the landing page.
● They will add a “Back to Top” button and ensure that it scrolls the page smoothly.
Day 3: Responsive Design with Media Queries

Introduction to Media Queries (1 hour)

What are Media Queries?:

● Media Queries are a feature of CSS that allows the application of different styles based
on the properties of the user’s device, such as screen width, height, orientation, and
resolution.
● Media queries are most commonly used to make websites responsive, adjusting layout
and design elements based on the viewport size.

● Media queries can target specific breakpoints (e.g., mobile, tablet, desktop).
● Min-width applies the styles to screen sizes greater than or equal to the specified
width.
● Max-width applies the styles to screen sizes less than or equal to the specified width.

Common Breakpoints:

1. Mobile (small devices):

○ Typically used for devices with a screen width of up to 600px.
○ Example:

2. Tablet (medium devices):

● Target screens with a width between 600px and 900px.
● Example:
 3. Desktop (large devices):
● Generally for screens wider than 900px.
● Example:

Adjusting Layouts for Different Screen Sizes (45 minutes)

Responsive Layout Adjustments:

1. Font Sizes and Spacing:

○ Adjust font sizes, line heights, and padding to ensure readability on smaller
screens.
○ Example:

@media (max-width: 600px) {

h1 {
font-size: 1.5rem; /* Smaller font size on mobile */
}
}

@media (min-width: 900px) {

h1 {
font-size: 3rem; /* Larger font size on desktop */
}
}

2. Product Grid Adjustments:

● On smaller screens, display product grids as single-column layouts, and switch
to multi-column grids for larger screens.
 ● Example:

/* Mobile: Single-column grid */

@media (max-width: 600px) {
.product-grid {
grid-template-columns: 1fr;
}
}

/* Tablet: Two-column grid */

@media (min-width: 601px) and (max-width: 900px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
}

/* Desktop: Four-column grid */

@media (min-width: 900px) {
.product-grid {
grid-template-columns: repeat(4, 1fr);
}
}

3. Header and Navigation Adjustments:

● For mobile views, simplify the navigation into a hamburger menu or stack the
links vertically.
● Example:

@media (max-width: 600px) {

nav ul {
flex-direction: column;
align-items: center;
}
}

@media (min-width: 900px) {

nav ul {
flex-direction: row;
justify-content: space-between;
}
}

Hands-On Task: Implementing Media Queries:

● Students will implement media queries to adjust the product grid and header layout for
mobile, tablet, and desktop views.
 ● Task: Ensure that the product grid switches between single-column on mobile,
two-column on tablets, and four-column on desktops. The header should be stacked
vertically on mobile devices and displayed horizontally on desktops.

Mobile-First Design Approach (30 minutes)

What is the Mobile-First Approach?:

● The mobile-first approach means designing the website layout and styles for mobile
devices first, and then scaling up the design for larger screens. This approach ensures
that the website is optimized for smaller screens, where space is limited, and
progressively enhances the design for larger screens.
● Why is this important?:
○ Mobile traffic now represents the majority of website visits, making it essential to
prioritize mobile usability.
○ It helps with performance optimization, ensuring that mobile users receive a
faster experience.

How to Implement Mobile-First Design?:

● Start with the default styles for small screens (mobile).

● Add media queries for larger screens (tablet, desktop) as needed.
Example:
Hands-On Task: Mobile-First Design:

● Students will adjust their layouts to follow a mobile-first design approach.

● They will start with a simple single-column layout for mobile and progressively
enhance the design for tablets and desktops.

Testing Responsiveness with Browser DevTools (30 minutes)

Testing in Browser DevTools:

● Chrome DevTools and other browsers provide a powerful device simulation feature to
test websites across multiple screen sizes without needing physical devices.
● Students will learn how to:
○ Open DevTools (right-click -> Inspect or press Ctrl + Shift + I).
○ Click on the Toggle Device Toolbar button (Ctrl + Shift + M) to simulate different
devices.
○ Select from a list of common devices (iPhone, iPad, etc.) or enter custom screen
sizes to test the responsiveness of their design.

Hands-On Task: Testing the Landing Page:

● Students will use browser DevTools to test the responsiveness of their landing page.
● They will ensure that the product grid, header, and other elements adapt correctly
across different screen sizes.

Final Hands-On Task (30 minutes)

Final Task:

● Responsive Product Grid and Header:

○ Ensure that the product grid and header are fully responsive using media
queries.
○ Apply the mobile-first design approach to the landing page, and make sure it
works well on mobile, tablet, and desktop views.

Stretch Task:

● For advanced students, they can attempt to implement a hamburger menu for the
mobile version of the navigation bar.
● Explore Further: Encourage students to explore responsive images (using srcset) or
CSS Grid for even more complex layouts.
Day 4: Debugging and Polishing the Landing Page

Debugging with DevTools (1 hour)

Introduction to Chrome DevTools:

● Chrome DevTools is a powerful suite of tools that allow developers to inspect and
debug HTML, CSS, and JavaScript directly in the browser. Other browsers like Firefox
and Safari offer similar tools.

How to Access DevTools:

● Open DevTools by right-clicking on any part of the webpage and selecting "Inspect" or
pressing Ctrl + Shift + I.
● Elements Panel: Allows you to inspect and modify the HTML and CSS of the page.
● Console Panel: Useful for debugging JavaScript (though this will be covered in later
weeks).
● Network Panel: To inspect API calls and resources loaded (useful for debugging
slow-loading elements).

Key Features of the Elements Panel:

1. Inspecting Elements:
○ Hover over HTML elements in the Elements panel to see the corresponding part
of the webpage highlighted.
○ Click on an element in the HTML tree to view its CSS box model, styles, and
attributes.
2. CSS Box Model:
○ The box model represents how elements are sized and positioned on the page.
It consists of:
■ Content: The main content area of the element.
■ Padding: Space between the content and the border.
■ Border: The outline around the padding (if any).
■ Margin: Space between the border and adjacent elements.
○ DevTools provides a visual representation of this model, allowing students to
easily spot issues like extra margins or padding.
3. Live Editing of Styles:
○ DevTools allows you to temporarily modify CSS styles in real-time.
○ Example: Adjust the width, height, margin, or padding of an element directly in
the Styles panel.
○ Example: A product grid is overflowing the page on small screens. The student
can adjust the padding or width to fix the issue.

Common Debugging Issues:

 1. Overflowing Elements:
○ An element (e.g., product cards) may spill over the boundaries of its container.
Use DevTools to inspect the box model and adjust the width or overflow
property to prevent this.
○ Example: Use overflow: hidden to prevent content from overflowing outside
its container.
2. Incorrect Spacing:
○ Margins and padding can sometimes cause layout issues. Inspect elements in
DevTools to check their spacing and adjust as needed.
○ Example:

3. Inconsistent Responsiveness:
○ Test media queries by resizing the viewport in DevTools. Ensure that
breakpoints are applied correctly and that no elements are misaligned or
overflowing on smaller screens.

Hands-On Task:

● Students will use DevTools to inspect their landing page and identify any layout or
spacing issues.
● They will adjust margins, padding, and other styles to ensure that their landing page
appears correctly across different screen sizes.

Task 1: Overflow Issue:

Expected Outcome:

● When you inspect the page, the .box overflows the .container.
● Students should identify the problem using DevTools and fix it by either adjusting the
.box width or applying overflow: hidden to the container.

Task 2: Margin Collapsing:

Issue:

● The margin might collapse, causing unexpected spacing.

● Ask students to identify this using DevTools and explain what’s happening in the box
model.
Task 3: Flexbox Layout Issue:

Issue:

● On small screens, the .item might break the layout, causing overflow or misalignment.
● Ask students to use DevTools to spot the issue and fix it by either adding a media query
or adjusting the width of .item in percentages.

Cross-Browser Testing (45 minutes)

Importance of Cross-Browser Compatibility:

● Different browsers (Chrome, Firefox, Safari, Edge) may render HTML and CSS slightly
differently. It's essential to test websites across multiple browsers to ensure they look
and function consistently.

Steps for Cross-Browser Testing:

1. Testing in Different Browsers:

 ○
Students will test their landing page in at least three browsers: Chrome, Firefox,
and Safari (or Edge).
○ They can do this by manually opening the page in each browser and using the
browser developer tools (similar to Chrome DevTools).
2. Common Browser Compatibility Issues:
○ Flexbox differences: Older versions of certain browsers may have incomplete
Flexbox support.
○ CSS Grid support: While modern browsers support CSS Grid, older browsers
may not.
○ Vendor prefixes: Sometimes it's necessary to use browser-specific prefixes for
certain CSS properties (e.g., -webkit- for Safari, -moz- for Firefox).
○ Fonts: Some fonts might render differently across browsers, especially
non-standard or custom web fonts.

Fixing Browser Compatibility Issues:

1. Add Vendor Prefixes:

○ For compatibility with older browsers, vendor prefixes may be required for certain
properties (e.g., Flexbox, animations).
○ Example:

2. Testing Media Queries:

○ Test the responsiveness of the landing page in each browser to ensure that
media queries are applied correctly across all browsers.

Hands-On Task:

● Students will test their landing page in at least three browsers (Chrome, Firefox,
Safari/Edge).
● They will identify and fix any browser-specific compatibility issues (e.g., Flexbox bugs,
inconsistent spacing, or font rendering issues).
● Use vendor prefixes to ensure backward compatibility with older browsers if necessary.
CSS Improvement Task:

Provide a partially styled product grid or header that is inconsistent or not responsive, and
students will be tasked with fixing it using their skills.

Ask students to:

● Add media queries for smaller screens.

● Ensure there is no overflow or misalignment on tablet or mobile views.

Polishing the Landing Page (45 minutes)

Final Touches for Polishing the Page:

1. Visual Consistency:
○ Ensure consistent margins, padding, and fonts throughout the page.
○ Check for any unintended overflow or gaps that may have been missed earlier.
2. Refining Hover Effects and Animations:
○ Make sure hover effects and animations are smooth across all devices and
browsers.
○ Ensure that animations like the hover menu on product cards work seamlessly
on mobile, tablet, and desktop.
3. Testing Forms and Buttons:
○ Test any form elements (like search bars or login forms) to ensure they are
functioning properly.
○ Ensure that buttons have the correct hover effects and are clickable across all
screen sizes.

Stretch Task (Optional):

● Debugging with Lighthouse: Introduce students to Lighthouse in Chrome DevTools, a

tool that helps analyze page performance, accessibility, and SEO.
● Performance Optimization: Check for any large images or CSS files that might be
slowing down the page, and suggest optimizations.
Hands-On Task:

● Students will perform a final polishing session where they will refine the layout, fix any
lingering issues, and ensure the landing page is fully responsive and functional.

Final Debugging Task (30 minutes)

Task:

● Perform responsive testing and debugging on their landing page using browser
DevTools.
● Ensure that the product grid, header, and footer are responsive and correctly aligned
across all screen sizes.
● Test the landing page in different browsers to ensure compatibility and fix any
browser-specific issues.
● Optional Task: Students who finish early can run a Lighthouse audit in Chrome
DevTools and work on improving their page’s performance and accessibility.
Day 5: Integrating Components into the Landing Page

Implement Hover Effects on Product Cards (1 hour)

Task 1: Add Hover Menus to the Product Grid

Students will apply hover effects on product cards, adding menus for Quick View, Add to
Wishlist, and Compare options. These menus will become visible when hovering over a
product card, adding an interactive element to the page.

Step-by-Step Guide:

1. HTML Setup for Product Cards:

○ Ensure each product card has a structure similar to this:

2. CSS for Hover Effects:

 3. Adding Transitions and Hover States:
● Ensure smooth transitions with the hover effect:

Hands-On Task:

● Implement hover effects on the product cards, adding interactive menus that appear
when the user hovers over a product.
● Students will ensure the hover effects are smooth and responsive, providing a visually
appealing interaction.

Add Smooth Scrolling to Links (30 minutes)

Task 2: Implement Smooth Scrolling for Internal Links

Students will add smooth scrolling functionality to anchor links (e.g., "Back to Top" or internal
navigation links). This feature ensures a seamless scrolling experience when users navigate
between sections of the landing page.

Step-by-Step Guide:
 1. Applying Smooth Scrolling with CSS:
○ Add the scroll-behavior property to the html element:

2. Anchor Link Setup:

● Ensure there are anchor links on the page, for example:

Hands-On Task:

● Students will add smooth scrolling functionality to any internal links on the page.
● They will test the scroll behavior using DevTools by clicking the links to ensure smooth
transitions between sections.

Finalize the Hero Section (45 minutes)

Task 3: Apply Animations to the Hero/Banner Section

The hero/banner section of the landing page will be polished with CSS animations. This
includes adding fade-in effects for text and button animations to create a more dynamic and
engaging landing experience.

Step-by-Step Guide:

1. Fade-In Animation for Hero Text:

○ Add a fade-in animation to the hero text:
 2. Button Animations:
● Add hover animations for call-to-action buttons:

Hands-On Task:

● Students will apply animations to the hero section of the landing page, ensuring the
text fades in and the buttons respond to hover actions.
● They will focus on making the animations smooth and responsive.
Responsive Design for the Product Grid (45 minutes)

Task 4: Ensure the Product Grid is Fully Responsive

Students will ensure that the product grid is responsive across all devices—mobile, tablet, and
desktop. They will use media queries to adjust the layout, ensuring that product cards display
as a single column on mobile and as multiple columns on larger screens.

Step-by-Step Guide:

1. Mobile-First Grid:
○ Start with a single-column layout for mobile:

2. Media Queries for Tablets and Desktops:

○ Adjust the grid for larger screens using media queries:
Hands-On Task:

● Students will implement media queries to ensure the product grid is responsive across
all screen sizes.
● They will test their designs on mobile, tablet, and desktop views using DevTools to
ensure the grid adjusts properly.erly.

Final Hands-On Task (30 minutes)

Task: Full Integration of Components

● Students will integrate all the components they've worked on throughout the day:
○ Implementing hover effects on product cards.
○ Adding smooth scrolling between sections.
○ Finalizing the hero section with animations.
○ Ensuring the product grid is fully responsive.
● Goal: By the end of this session, students should have a fully functioning landing page
that is visually engaging, responsive, and interactive.
 Week 4 - Introduction to JavaScript

Day 1: Introduction to JavaScript and Basic Syntax

What is JavaScript? (15 minutes)

Explanation:

● JavaScript is a programming language that allows us to make web pages interactive.

While HTML and CSS only deal with content and style, JavaScript lets us create
dynamic interactions like responding to clicks, form submissions, and more.

Integration with HTML:

● JavaScript can be added to an HTML file either by using a <script> tag within the
HTML file or by linking to an external .js file.
Basic Syntax and Structure (45 minutes)

Variables in JavaScript:

○ What Are Variables

Explanation: A variable is like a container that stores information we can use later. Just like
how you might store books in a box, in programming, we store values (like numbers or words) in
variables.

Analogy: Imagine a variable as a labeled box. You can store something inside (like a
number, a word, etc.), and whenever you need it, you can retrieve it using the label.

○ let name = "Sara"; is like labeling a box "name" and putting "Sara" inside it.

Syntax for Variables:

● Explain the three ways to declare variables:

○ let: Used when we might want to change the value later.
○ const: Used when the value should stay the same.
 ○ var: The old way of declaring variables, but we avoid using this now.

Data Types:

● Strings: Text enclosed in single (') or double (") quotes.

● Numbers: Integers and decimals (e.g., 5, 12.99).
● Booleans: true or false.

Basic Operations:

● Arithmetic: +, -, *, /, % (remainder).
● String Concatenation: Combine strings using the + operator.

Hands-On Task:

1. Ask students to create a JavaScript file and link it to their landing page.
2. Students will declare variables for a product name and price, and log the result in the
console:
Console Operations (30 minutes)

Using the Console:

● The console is a tool that allows developers to output messages, inspect code behavior,
and debug.

How to Open the Console:

● In Chrome or Firefox, open DevTools (F12 or Ctrl+Shift+I) and go to the Console

tab.
● console.log() is used to print output to the console for debugging purposes.

Hands-On Task:

1. Students will write a simple JavaScript script that logs:

○ A welcome message.
○ The product name and price from earlier.
○ A simple calculation (e.g., the total price of two items):
Hands-On Task: Creating and Linking a JavaScript File (30 minutes)

Steps:

1. Create a new JavaScript file named main.js.

2. Link the JavaScript file to their landing page HTML file.

Write JavaScript to:

● Log a welcome message.

● Declare variables for a product name, price, and quantity.
● Calculate the total price of multiple products and log the result in the console.
5. Wrap-Up (30 minutes)

Review the Key Concepts:

● What is JavaScript?
● How to declare variables and perform basic operations.
● Using console.log to debug and output messages.

Exercise for the End of Class:

● Ask students to:

1. Create a JavaScript file that logs the name and price of three products.
2. Calculate the total price for all three products.
3. Use console.log to print the result in the console.
Day 2: Conditionals and Functions

Conditionals (1.5 hours)

Understanding Conditionals:

Definition:

● Conditionals in JavaScript are used to perform different actions based on different

conditions. They help the program decide what to do next.

Real-World Analogy:

● Think of conditionals like a traffic light:

○ If the light is green, you go.
○ If the light is red, you stop.
○ If the light is yellow, you prepare to stop.

If/Else Statements:

● Syntax:

● Example:
Logical Operators:

● Explain how to make more complex decisions using operators like == (equality), ===
(strict equality), > (greater than), < (less than), && (and), || (or), and ! (not).

Hands-On Task:

● Create a script that checks the time of day and outputs a greeting:

Functions (1.5 hours)

Introduction to Functions:

Definition:

● A function is a reusable block of code designed to perform a particular task, which can
be called as many times as needed.

Real-World Analogy:

● Think of a function as a recipe in a cookbook. You can follow the recipe (function) to
make a meal (complete a task) whenever you’re hungry (need to execute the task).

Creating Functions:

● Syntax:
 ● Example:

Parameters and Return Values:

● Parameters are like ingredients for your recipe. They allow you to pass values into
functions.
● Return values let you get something back from a function, like the final dish from your
recipe.

Example of Parameters and Return Values:

● Function to calculate area of a rectangle:

Hands-On Task:
● Create a function to check if a given year is a leap year:

Wrap-Up and Review (30 minutes)

Consolidation:

● Review the conditional statements and function examples given throughout the day.
● Encourage students to think of scenarios where they could use conditionals and
functions to solve problems or automate tasks.

Exercise:

● Ask students to create a small script that uses both conditionals and functions to
simulate a simple user login:
Exercise:

● Students should write a function that takes a temperature in Celsius and converts it to
Fahrenheit, then use a conditional to print whether it's hot or cold based on the
Fahrenheit temperature.

Step-by-Step Guide and Example Code:

1. Function to Convert Celsius to Fahrenheit:

● Formula to convert Celsius to Fahrenheit:
Fahrenheit=(Celsius×95)+32\text{Fahrenheit} = (\text{Celsius} \times \frac{9}{5})
+ 32Fahrenheit=(Celsius×59​)+32
2. Conditional to Determine Temperature Description:
● After converting the temperature, use a conditional statement to determine if the
temperature is hot or cold. We'll assume that any temperature above 75°F is hot
and below or equal to 75°F is cold.

3. Calling the Function:

● Test the function with different temperatures to show how the conditional
evaluates the results.

4. Explanation:
● Explain the Function: Describe how the celsiusToFahrenheit function
works, emphasizing the mathematical formula used for the conversion.
● Explain the Conditional Logic: Detail how the checkTemperature function
uses the result from the celsiusToFahrenheit function to determine if the
output message should say it's hot or cold.
● Test Cases: Explain why different values are tested and what the expected
outcomes are based on the input temperatures.
Day 3: Loops and Basic DOM Manipulation
What is a Loop?
● Definition: A loop in programming is a control flow statement that repeats a block of
code multiple times based on a condition.
● Real-World Analogy: Think of checking every mailbox in an apartment building one by
one; this repetitive action is similar to what loops do in a program.

Types of Loops:

For Loop

● Explanation: Used when the number of iterations is known before the loop starts.
● Syntax:

● Example

While Loop

● Explanation: Used when the condition needs to be evaluated before each iteration, and
the number of iterations is not known beforehand.
● Syntax
 ● Example:

Do/While Loop

● Explanation: Similar to the while loop, but guarantees that the loop will execute at
least once.
● Syntax:

● Example:
Hands-On Task:

● Task students with writing a for loop to iterate over an array of their favorite foods and
print each one.

Introduction to DOM Manipulation (1 hour)

What is the DOM?

● Definition: The DOM (Document Object Model) is a programming API for HTML and
XML documents. It represents the page so that programs can change the document
structure, style, and content.
● Diagram/Visual: Provide a simple visual of a DOM tree with elements like <html>,
<body>, <div>, <p>, and text nodes.
● When a web page is loaded, the browser creates a Document Object Model of the page.
● The HTML DOM model is constructed as a tree of Objects:
With the object model, JavaScript gets all the power it needs to create dynamic HTML:

● JavaScript can change all the HTML elements in the page

● JavaScript can change all the HTML attributes in the page
● JavaScript can change all the CSS styles in the page
● JavaScript can remove existing HTML elements and attributes
● JavaScript can add new HTML elements and attributes
● JavaScript can react to all existing HTML events in the page
● JavaScript can create new HTML events in the page

The HTML DOM is a standard object model and programming interface for HTML. It defines:

● The HTML elements as objects

● The properties of all HTML elements
● The methods to access all HTML elements
● The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML
elements.

Accessing Elements:

● getElementById:
○ Retrieves an element by its ID.
○ Example:

● querySelector:
○ Returns the first element matching a specified CSS selector.
○ Example:

● querySelectorAll:
○ Returns all elements matching a specified CSS selector as a NodeList.
 ○ Example:

Hands-On Task and Exercises (30 minutes):

● Update the background color of all <p> tags on a sample webpage.

Change the Header Color:

● Use a for loop to change the color of all header tags (<h1> to <h6>) on a page.

Update Item Descriptions:

● Find all elements with the class description and update their text content to "Updated
description".
Create an Interactive Alert:

● Use a while loop to keep asking the user for their name until they enter it, then display it
in an alert.
Day 4: Arrays and Objects
What is an Array? (1 hour)

● Definition: An array is a special variable that can hold more than one value at a time,
organized in a list.

Why Use Arrays?

If you have a list of items (a list of car names, for example), storing the cars in single variables
could look like this:

However, what if you want to loop through the cars and find a specific one? And what if you had
not 3 cars, but 300?

The solution is an array!

An array can hold many values under a single name, and you can access the values by
referring to an index number.

Creating an Array

Using an array literal is the easiest way to create a JavaScript Array.

Syntax:

Examples:

OR
Accessing Array Elements

You access an array element by referring to the index number:

Looping Array Elements

One way to loop through an array, is using a for loop:

Adding and Removing Elements

● Methods:
○ push(): Adds an element to the end of the array.
○ pop(): Removes the last element from the array.
● Example:

Introduction to Objects (1 hour)

What is an Object?

Explanation: An object is a collection of properties, where each property is defined as a

key-value pair. Objects are ideal for storing data about specific items with multiple attributes.
Analogy: Consider an object as a file in a filing cabinet, where each detail about the file is a
property such as name, content, and size.

In real life, objects are things like: houses, cars, people, animals, or any other subjects.

Here is a car object example:

Object Properties

A real life car has properties like weight and color:

car.name = Fiat, car.model = 500, car.weight = 850kg, car.color = white.

Car objects have the same properties, but the values differ from car to car.

Object Methods

A real life car has methods like start and stop:

car.start(), car.drive(), car.brake(), car.stop().

Car objects have the same methods, but the methods are performed at different times.

Creating and Accessing Objects

● Syntax: let objectName = {key1: value1, key2: value2};

● Example:
Hands-On Task:

● Task: Create an object representing a vehicle with properties for make, model, and color.

Updating Object Properties

● Methods: Using dot notation or bracket notation to update properties.

● Example:

Hands-On Task:

● Task: Change the color of the vehicle object to "Blue".

● Code:

Combining Arrays and Objects with Loops (30 minutes)

Application: Use loops to iterate over an array of objects, modifying or accessing each object’s
properties.

Hands-On Task: Create an array of product objects and dynamically generate HTML content
based on this array.
 ● Task: Generate a list of products in HTML from the product array.
● Code:

Hands-On Tasks (1 hour)

Task 1: Create and Display an Array

Objective: Understand how to declare an array and access its elements.

● Task Description: Create an array called seasons containing the names of the four
seasons. Then, write code to print each season in the console.
● Code Example

Task 2: Modifying Array Elements

Objective: Learn how to add and remove elements from an array using push, pop, shift, and
unshift.

● Task Description: Start with an array of fruits. Add 'Mango' to the end, remove 'Banana'
from the beginning, and then add 'Peach' to the beginning.
 ● Code Setup:

● Solution:

Task 3: Finding Elements in an Array

Objective: Practice using methods to find elements in an array.

● Task Description: Given an array of numbers, find the first even number and print its
value.
● Code Setup:

Task 4: Modifying Object Properties

Objective: Learn to update and add new properties to an existing object.

● Task Description: Update the year of the car object to 2021, and add a new property
color with the value 'blue'.
 ● Code Setup:

● Solution:

Task 5: Nested Objects

Objective: Understand how to access properties in nested objects.

● Task Description: Given an object representing a person with a nested address

object, print the city and zip code.
● Code Setup:
Day 5: Integrating JavaScript into the Landing Page
Dynamic Product Grid (1.5 hours)

Task:

● Utilize the array of product objects and JavaScript loops to dynamically generate the
product grid on the landing page.

Implementation:

● Review: Start by reviewing the array of product objects created earlier in the week.
● JavaScript Code

Interactive Buttons (1 hour)

Task:

● Add event listeners to buttons on the product cards to enable interactive functionality
such as adding items to a cart.
Implementation:

● Event Listener Code:

Form Validation (Optional) (30 minutes)

Task:

● If there is a form on the landing page (e.g., a newsletter signup form), implement basic
JavaScript validation to ensure the form is filled out correctly before submission.

Implementation:

● Validation Code:
 Week 5 : Advanced JS Concepts
Day 1: Advanced DOM Manipulation
Objective: Learn how to dynamically add new elements to the webpage using JavaScript
methods.

Creating Elements: (30 mins)

● Explanation: document.createElement() is used to create a new element in the

document. You can then add this element to the document using methods like
appendChild() or insertBefore().
● Example:

Setting Attributes:

● Explanation: Use setAttribute() to modify or add new attributes to elements. This

is particularly useful for setting classes, ids, or data attributes.
● Example:

Hands-On Exercise: Create and Append Elements

● Task: Students create a new div element, set its class to new-div, and append it to a
specific section on their page.
 ● Code:

2. Removing Elements (30 minutes)

Objective: Understand how to remove elements from the DOM, either by using
removeChild() or the more recent remove() method.

Removing Elements:

● Explanation: removeChild() requires a reference to the parent node and then

removes the specified child from it. remove() is a simpler alternative that doesn’t need
a reference to the parent node.
● Example:

Hands-On Exercise: Remove Elements

● Task: Ask students to remove the first item from a list on their web page.
● Code:

3. Modifying Elements (30 minutes)

Objective: Review and practice modifying existing elements in the DOM, including their
attributes and content.
Modifying Elements:

● Explanation: Besides setting attributes, you can directly change the styles, properties,
or inner HTML of an element.
● Example:

Hands-On Exercise: Modify Elements

● Task: Instruct students to change the text color of all paragraph tags to blue on their
page.
● Code:

Hands-On Tasks (1 hour)

Create a Dynamic Product Card

● Objective: Use the skills from earlier sessions to dynamically create product cards with
a button that adds them to a container.
● Implementation:
Remove a Product Card on Button Click

● Objective: Provide a button to remove the last product card from the display.
● Implementation:
Day 2: Introduction to Array Methods
Introduction to forEach (30 mins)

Objective:
Learn how to iterate over array elements using the forEach method to execute a function on
each element.

Explanation:

● Overview: forEach is a method that allows you to loop through each item in an array,
similar to a for loop, but with cleaner syntax and better abstraction.
● Syntax: array.forEach(function(element) { /* actions */ });

Example Code:

Hands-On Task:

● Task: Create an array of colors and use forEach to log each color to the console.
● Code:

Introduction to filter (30 mins)

Objective:
Understand how to use filter to create a new array filled with elements that pass a specified
test.

Explanation:
 ● Overview: filter creates a new array including elements where the test function
returns true and excluding those where it returns false.
● Syntax: let newArray = array.filter(element => condition);

Example Code:

Hands-On Task:

● Task: Filter out all products with a price greater than $20 from a product array.
● Code:

Introduction to map (30 mins)

Objective:
Learn to use map to transform the elements of an array by applying a function to each element
and generating a new array.

Explanation:

● Overview: map modifies each item in the array and creates a new array with the
modified items.
● Syntax: let newArray = array.map(element => element modified);
Example Code:

Hands-On Task:

● Task: Apply a 10% discount to all products and display the updated prices.
● Code:

Integrating Array Methods into the Project (30 mins)

Objective:
Combine forEach, filter, and map to enhance the dynamic features of the landing page,
such as product displays and interactions.

Hands-On Task:

● Task: Utilize the array methods learned today to manage and display products on the
landing page dynamically.
○ Use forEach to display each product.
○ Use filter to show products under a specified price.
○ Use map to adjust product prices and display the new prices.

Task 1: Display Products Using forEach

Objective:
Use the forEach method to iterate over a product array and display each product on the
landing page.

Details:

● Create a list of product objects with names and prices.

 ● Dynamically create HTML content for each product and append it to a specific section on
the landing page.

Example Code and Task:

Task 2: Filter Products Below a Price Threshold

Objective:
Implement the filter method to display only those products that are priced below a specified
threshold.

Details:

● From the existing products array, filter out products that cost more than $500 and display
them.
Example Code and Task:

Task 3: Apply a Discount Using map

Objective:
Use the map method to apply a discount to all products and display the new prices.

Details:

● Apply a 10% discount to all products and update the display to reflect these new prices.

Example Code and Task:

Review and Enhancement Task

Objective:
Encourage students to integrate these tasks into the landing page, enhancing the overall
functionality and user experience.

Task:

● Combine the array methods to offer a comprehensive product management system on

the page.
● Allow users to filter, add, and modify products dynamically.
● Implement UI elements that facilitate these interactions, such as buttons and input fields
for price thresholds and discounts.
Day 3: Basic Algorithms and Sorting
1. Sorting Arrays (1 hour)

Objective:
Learn to use the sort() method for organizing data within arrays, which is pivotal for
enhancing user interfaces like product listings.

Explanation and Demonstration:

● Sorting Basics:
○ Overview: The sort() method sorts the elements of an array in place and
returns the array.
○ Syntax: array.sort([compareFunction])
● Sorting Numbers and Strings:
○ Numbers are sorted by converting them to strings and comparing their
sequences of UTF-16 code units values.
○ Example:

● Sorting Objects:
○ Use Case: Sorting products by price.
○ Example:
2. Simple Search Algorithms (45 mins)

Objective:
Introduce basic techniques for searching through arrays, an essential operation for working with
data-driven applications.

Explanation and Demonstration:

● Linear Search:
○ Overview: A simple method for finding an element within a list by checking each
element in sequence.
○ Application: Finding a product by name.
○ Example:

3. Hands-On Task (1 hour 15 mins)

Task Description:

● Sorting Products:
○ Objective: Use the sort() method to sort the product array by price in
ascending order and dynamically update the product display on the landing page.
○ Implementation:

● Implementing a Search Bar:

○ Objective: Create a functional search bar that allows users to search for
products by name and updates the product display accordingly.
○ Implementation:

document.getElementById('searchBar').addEventListener('input', function(e) {
let filteredProducts = products.filter(product =>
product.name.toLowerCase().includes(e.target.value.toLowerCase()));
displayProducts(filteredProducts); });
Day 4: JavaScript Events and Form Handling
1. Handling Forms with JavaScript (1 hour)

Objective:
Teach students how to effectively capture and validate user input from forms using JavaScript.

Key Concepts and Implementation:

● Capturing User Input:

○ Methods: Utilize getElementById() and querySelector() to access input
elements.
○ Example:

● Validating Form Input:

○ Overview: Check the validity of form data, such as ensuring fields are not empty
and email addresses are in a correct format.
○ Example:

2. Prevent Default Form Behavior (30 mins)

Objective:
Explain how to use event.preventDefault() to stop the form from submitting in the
traditional way, which allows for custom validation and handling via JavaScript.

Example and Explanation:

● Use preventDefault() within an event listener to prevent the form from being
submitted automatically, which is useful for when validation fails or you need to post data
via AJAX.
● Example:

3. Displaying Feedback (30 min)

Objective:
Demonstrate how to provide real-time feedback based on the validation results of form inputs.

Methods and Implementation:

● Show error messages next to the respective form field or use a modal/pop-up to alert the
user.
● Example:
4. Hands-On Task (1 hour)

Task Description:

● Form Creation and Validation:

○ Students will create a login/register form with fields for username, password, and
email.
○ Implement validation checks for each input and provide appropriate feedback.

Example Implementation:

● Creating the Form:

JS Code:

document.getElementById('registerForm').addEventListener('submit', function(event) {
event.preventDefault();
let username = document.getElementById('username').value;
let email = document.getElementById('email').value;
if (!validateForm()) {
displayError('Please correct the errors before submitting.', this);
} else {
console.log('Successfully Registered!');
}
});
Day 5: Applying JavaScript to the Project
Dynamic Product Grid (1 hour)

Objective:
Leverage JavaScript to dynamically render products on the landing page, incorporating sorting
functionalities.

Key Actions:

● Dynamically Display Products:

○ Use the array of product objects to generate product cards dynamically.
○ Example Code:

● Sorting Feature:
○ Implement functionality that allows users to sort products by price or category.
○ Example Code:
Interactive Buttons (45 mins)

Objective:
Add event listeners to product card buttons for interactive actions like adding or removing
products.

Key Actions:

● Add to Cart Functionality:

○ Each product card has an 'Add to Cart' button that updates the cart when clicked.
○ Example Code:

Search and Filter Functionality (45 mins)

Objective:
Implement features allowing users to search and filter products based on their
preferences.

Key Actions:

● Search Products by Name:

○ Implement a search bar that filters products as the user types.
○ Example Code:
 ● Filter Products by Category or Price:
○ Use dropdowns or buttons to let users filter products.
○ Example Code:

document.getElementById('categoryFilter').addEventListener('change', function() {
let category = this.value;
let filteredProducts = products.filter(product => product.category === category);
displayProducts(filteredProducts);
});

Form Handling for Login/Register (30 mins)

Objective:
Implement and validate a simple login/register form, providing immediate feedback based on
user input.

Key Actions:

● Form Validation:
○ Validate input fields and show error messages if inputs are invalid.
○ Example Code:

document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
if (!username || !password) {
alert('Both username and password are required!');
} else {
console.log('Form submitted');
// Proceed with form submission logic
}
});
 Week 6 - Fetch API and Asynchronous
Processing

Day 1: Introduction to Fetch API and Promises

What is an API? (30 mins)

Key Concepts:

● Definition: An API (Application Programming Interface) allows your application to

interact with external software components or resources.
● Real-world Usage: APIs are used to retrieve data from external sources, such as
databases, servers, or other web services. For example, retrieving real-time weather
information or product details from external databases.

Example Explanation:

APIs are like waiters in a restaurant. You request a specific dish (data), and the waiter (API)
communicates your request to the kitchen (server) and brings back your dish (response) once
it's ready.

History of Fetch API and AJAX

The Fetch API is a relatively new web browser feature but builds on older technologies such as
AJAX.

AJAX stands for Asynchronous JavaScript and XML. It was the first widely adopted technology
to allow websites to send requests without needing to reload the entire page. Before AJAX, if
you wanted to update something on your web page, you would need to reload the entire page -
which was clunky and inefficient.

AJAX allowed developers to make HTTP requests without needing a full-page refresh. This
technology revolutionized web development, but it had its limitations. AJAX requests were
limited to retrieving data from the same origin (domain/subdomain) as the page requested.

Enter the Fetch API. Brought about by newer web browsers, this technology had all of the
power of AJAX but with no cross-origin security issues and added support for more HTTP
methods like PUT and DELETE.

Fetch API Syntax

Using the Fetch API is relatively straightforward. All you need is the URL of the resource you
want to fetch, plus some code that tells your browser what to do with the response from the
server.

It's a two-step process. First, you send a request to the desired URL using the fetch() method.
Next, you handle the response with the .then() method. In this case, we're not doing anything
with the code yet, but you could use this same code to parse HTML documents, send data over
POST requests, and more.

Sending a Request

The simplest way to make a request is with the global fetch() method. This method takes two
parameters - the URL of the resource you want to retrieve and an optional configuration object.

For example, if you wanted to get an HTML document from a website, you could use the
following code:

This code will send a GET request to the URL specified and then alert the response (in this
case, an HTML document). It's important to note that if the request fails, the .then() method will
return an error. It is your job as a developer to handle these errors gracefully.

Making POST Requests

You can also use the Fetch API to make POST requests. This is useful if you need to send data
to a web server, such as when submitting forms or uploading files.
To make a POST request, you need to add the configuration object to the fetch() method. This
object should include the HTTP method (in this case, POST) and any data you want to send in
the body of the request.

For example, if you wanted to submit an HTML form with two fields - name and email - your
code might look like this:

This code will collect data from an HTML form and submit it via a POST request. Again, if the
request fails, you'll want to use some error-handling logic to handle the situation gracefully.

Error Handling

No matter what you're trying to accomplish with the Fetch API, it's essential to have a good
error-handling strategy. This is especially true for POST requests, which often require sensitive
data.

The simplest way to handle errors is with a try/catch block. You can wrap your code in this block
and then use the catch() method to alert an error if something goes wrong.

For example, if you were making a POST request, your code could look like this:
Hands-On Task (1 hour)
Fetch Data from a Public API:

● Use the Fetch API to request data from a public API, such as a product catalog or
weather service.
● Task: Display the fetched data on the landing page, enhancing the real-time data
handling capabilities of the project.
Day 2: Introduction to Async/Await and More API Integration

Async/Await (1 hour)

Detailed Explanation and Examples:

● Async Functions:
○ Overview: An async function is a function declared with the async keyword.
Async functions are instances of the AsyncFunction constructor, and the await
keyword is permitted within them.
○ Syntax:

● Properties:
○ Returns a promise.
○ Allows the use of await inside the function body.

● Await Keyword:
○ Usage: The await keyword is used to pause async function execution until a
Promise is fulfilled or rejected, and to resume execution of the async function
after fulfillment.
○ Example:

Hands-On Task:

● Task: Create an async function that fetches user data from an API and logs it.
 ● Example Code:

Refining API Integration

Key Concepts and Activities:

● Fetching Complex Data Sets:

○ Scenario: Work with APIs that provide paginated data or require multiple calls to
fetch complete data sets (e.g., products with additional detail pages).
○ Example:

● Handling Multiple Asynchronous Operations:

○ Combine async/await with Promise.all to handle situations where multiple
independent API calls are necessary.
 ○ Example:

● Hands-On Task:
○ Task: Fetch and display a list of products, handling pagination.
○ Example Code:

● Handling Multiple Asynchronous Operations:

● Hands-On Task:
○ Task: Use Promise.all to fetch details for multiple products simultaneously.
 ○ Example Code:

Hands-On Task (1 hour)

Task Description:

● Rewrite Fetch Request Using Async/Await:

○ Objective: Convert an existing promise-based fetch request to use async/await
for clearer and more straightforward code
○ Example:
Dynamic Product Grid Update:

● Fetch product data using async/await and update the product grid dynamically on the
page.
● Implement error handling to display user-friendly error messages if the API request fails.
Day 3: Working with Dynamic Data and Advanced Array
Methods
Advanced Array Methods (1 hour 30 mins)

Detailed Explanation and Examples:

● Reduce Method:
○ Overview: reduce() is used to execute a reducer function on each element of
the array, resulting in a single output value.
○ Example: Calculate the total price of items in a shopping cart.

● Find Method:
○ Usage: find() returns the value of the first element in the array that satisfies
the provided testing function.
○ Example: Find a specific product by name.

● Some and Every Methods:

○ Some: Returns true if at least one element in the array passes the test
implemented by the provided function.
○ Every: Returns true if all elements in the array pass the test implemented by
the provided function.
○ Examples:
Using Dynamic Data (1 hour)

Detailed Explanation and Examples:

● Dynamic Element Generation:

○ Dynamically generate product cards or other elements based on API data.
○ Example:

Sorting, Filtering, and Searching:

● Implement interactive features that allow users to sort, filter, and search the data
displayed on the page.
● Hands-On Examples:
○ Sort products by price.
○ Filter products based on availability.
○ Implement a search functionality to find products by name.

Hands-On Tasks (30 mins)

Task Descriptions:

● Calculate Total Value Using Reduce:

○ Task: Use reduce() to sum up the total value of products displayed on a cart
page.
○ Example Code:

let totalValue = products.reduce((total, product) => total + product.price, 0);

console.log('Total Cart Value:', totalValue);

● Retrieve and Display Product Details Using Find:

○ Task: Use find() to retrieve a specific product and display its details on the
product details page.
○ Example Code:
let productDetail = products.find(product => product.id === selectedProductId);
displayProductDetails(productDetail);

● Check Product Conditions Using Some and Every:

○ Task: Use some() to determine if any products are on sale and every() to
check if all products are in stock.
○ Example Code:
Day 4: Error Handling and Debugging in JavaScript
Error Handling with try...catch (1 hour)

Objective:
Introduce students to the try...catch statement for handling exceptions in JavaScript code,
which is crucial for maintaining application stability, especially when dealing with external data
sources like APIs.

Detailed Explanation and Examples:

● Try...Catch Basics:
○ Overview: The try...catch structure allows you to test a block of code for
errors while it is being executed.
○ Syntax:

Explanation: This example attempts to parse an invalid JSON string, which

throws a syntax error that is caught in the catch block, logging an error
message to the console.
Debugging JavaScript with Developer Tools (1 hour)

Objective:
Guide students through using browser developer tools to effectively identify and resolve
JavaScript issues.

Step-by-Step Instructions and Example:

● Accessing Developer Tools:

○ Open Developer Tools in your browser (usually F12 or right-click > "Inspect").
○ Navigate to the "Console" tab to see logs or errors.
● Using Breakpoints:
○ Go to the "Sources" tab.
○ Find the JavaScript file you're debugging.
○ Click on the line number where you want to pause execution; this sets a
breakpoint.
○ Example: If your code has a function that updates user data, place a breakpoint
on a line inside this function to see the values of variables when this function
runs.

Handling Asynchronous Errors (30 mins)

Objective:
Instruct students on managing errors in asynchronous operations using async/await with
try...catch for more robust code.

Detailed Steps and Code Example:

● Async/Await Error Handling:

 ○ Write an async function that fetches data and uses try...catch to handle
errors:

Explanation: This function attempts to fetch user data from an API. If the
fetch fails or the data cannot be parsed, the error is caught and logged.

Hands-On Tasks (30 mins)

● Task 1: Implement Error Handling in API Requests:

○ Write a function that uses fetch to load product details and includes error
handling:

async function loadProductDetails(productId) {

try {
const response = await fetch(`https://api.example.com/products/${productId}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const productDetails = await response.json();
console.log('Product Details:', productDetails);
} catch (error) {
console.error('Error fetching product details:', error);
alert('Failed to load product details.');
}
}

Task 2: Debugging Exercise:

● Students will identify and fix a bug where a "Add to Cart" button does not update the cart
count:
○ Use the console to log values and set breakpoints in the event handler function
for the button to trace the execution and find the logic error.
Day 5: Applying Dynamic API Data to the Cart and Login
Pages
Dynamic Cart Implementation (1 hour)

Objective:
Enable students to integrate dynamic data into the Cart Page, enhancing functionality with
JavaScript for a real-time interactive experience.

Detailed Instructions:

● Fetching and Displaying Cart Items:

○ Use fetch() to retrieve product data from an API.
○ Dynamically generate HTML content to display items in the cart.
○ Example Code:

● Calculating Total Cart Value:

○ Implement reduce() to sum the prices of the cart items.
○ Example Code:

● Removing Items from Cart:

○ Add a button for each item that, when clicked, removes the item from the cart.
○ Example Code:
 itemElement.innerHTML += `<button onclick="removeItem(${item.id})">Remove</button>`;
function removeItem(itemId) {
// API call to remove item or update the page state
console.log('Item removed:', itemId);
}

Login/Register Page Functionality (1 hour)

Objective:
Guide students through creating interactive login and registration pages using HTML, CSS, and
JavaScript.

Step-by-Step Process:

● Page Design:
○ Students should first complete the HTML/CSS layout for the Login/Register page.
○ Ensure forms are user-friendly and visually appealing.
● Simulating User Authentication:
○ Use JavaScript to simulate a login process with API requests.
○ Example Code:

● Validating User Inputs:

○ Implement front-end validation to ensure all form fields are correctly filled before
submission.
○ Example Code:
Integrating API Data on Other Pages (30 mins)

Objective:
Start incorporating dynamic data into additional pages, such as the Account Page, to display
user-specific information.

Implementation Guide:

● Fetch and display data relevant to the logged-in user, enhancing the personalization of
the website.
● Example Code:
Week 7 : Local Storages, SessionStorages and
Validations

Day 1: Introduction to Local Storage and Cart Functionality

Understanding Local Storage and Session Storage (1 hour)

Objective:
Provide an in-depth exploration of localStorage and sessionStorage, including their
practical applications, benefits, and limitations.

Detailed Explanation and Instruction:

● Local Storage vs. Session Storage:

○ Local Storage: Preserves data indefinitely until explicitly cleared, useful for
storing user preferences, settings, and long-term data.
○ Session Storage: Maintains data for the duration of the page session and is
cleared when the tab or browser is closed, ideal for sensitive or temporary data
that should not persist.
○ Interactive Example:

● Handling Complex Data:

○ Discuss how to store objects or arrays by converting them to JSON strings using
JSON.stringify() and how to retrieve them with JSON.parse().
○ Practical Example:
Managing Local Storage:
Managing Session Storage
Cart Implementation Using Local Storage (1 hour)

Objective:
Walk students through the creation of a persistent shopping cart using local storage,
demonstrating data addition, retrieval, and removal.

Step-by-Step Guide:

● Adding and Retrieving Products:

○ Show how to add products to local storage when a user clicks "Add to Cart".
○ Demonstrate retrieving the cart data to display on the Cart Page.
○ Code Example:

Removing Items from Cart:

● Explain how to remove items from the cart and update local storage.
● Interactive Task:
Hands-On Tasks

Duration: 1 hour

Task 1: Implementing and Using Local Storage for a Dynamic Cart:

● Add products to a shopping cart and reflect changes immediately on the Cart Page using
local storage.
● Example Task:

Task 2: Modifying and Removing Cart Items:

● Create functionality to remove items from the cart through the user interface, updating
local storage accordingly.
● Example Code:
Day 2: Dynamic Product Details Page
Designing the Product Details Page

Duration: 45 minutes

Objective:
Instruct students on how to structure and style the Product Details Page, incorporating essential
elements that enhance user engagement and product presentation.

Step-by-Step Guide:

● Page Layout: Explain the key components of a product details page including product
images, descriptions, pricing information, and customer reviews.
● Styling Tips: Discuss the importance of a clean layout and responsive design to
accommodate various device sizes.
● Example Layout:

Dynamically Displaying Product Information

Duration: 1 hour

Objective:
Teach students how to retrieve and display product information dynamically, leveraging
JavaScript and local storage or API data.

Detailed Instruction and Code Example:

● Fetching and Displaying Data:

○ Explain how to fetch product details either from local storage or an external API.
○ Discuss passing data via URL parameters and retrieving it using JavaScript.
Code Example:

const queryParams = new URLSearchParams(window.location.search);

const productId = queryParams.get('id');
fetch(`https://api.example.com/products/${productId}`)
.then(response => response.json())
.then(product => {
document.querySelector('.product-name').textContent = product.name;
document.querySelector('.product-price').textContent = `$${product.price}`;
document.querySelector('.product-description').textContent = product.description;
document.querySelector('.product-image').src = product.imageUrl;
});

Interactivity on the Product Details Page

Duration: 45 minutes

Objective:
Implement interactive features that allow users to interact with product details, such as adding
items to the cart.

Interactive Functionality Implementation:

● Add to Cart Function: Explain how to link the "Add to Cart" button with local storage to
update the cart contents.
● Dynamic Content Updates: Show how to handle different product options that may
affect the displayed content (e.g., color choices, sizes).
● Example Functionality:

document.querySelector('.btn-add-to-cart').addEventListener('click', function() {
const product = {
id: productId,
name: document.querySelector('.product-name').textContent,
price: parseFloat(document.querySelector('.product-price').textContent.replace('$', ''))
};
addToCart(product);
alert('Added to cart!');
});

Hands-On Task

Duration: 30 minutes

● Task: Students will create a dynamic product details page that fetches and displays
product information based on user selection or input.
● Expected Outcomes:
○ Properly fetch and display product data.
○ Implement adding products to the cart directly from the product details page
using local storage.
○ Ensure the page updates dynamically when different options are selected.
Day 3: Checkout Page and Form Validation
Checkout Page Layout

Duration: 45 minutes

Objective:
Guide students through the process of creating a detailed checkout page layout that includes
necessary input fields for completing a purchase.

Step-by-Step Guide:

● Designing the Layout: Explain the importance of a user-friendly and intuitive checkout
process.
● Essential Elements:
○ Input Fields: Include fields for name, address, credit card details, and other
necessary billing and shipping information.
○ Example Layout:

Form Validation

Duration: 1 hour

Objective:
Teach students how to implement client-side form validation to ensure data integrity before
submission.
Detailed Instruction and Code Example:

● JavaScript Validation:
○ Discuss the importance of validating input to protect against incorrect or
malicious data.
○ Show how to check for empty fields, validate email formats, and ensure that
numerical inputs are correct.
○ Example Code:

document.getElementById('checkoutForm').addEventListener('submit', function(event) {
const name = document.getElementById('name').value;
const address = document.getElementById('address').value;
const card = document.getElementById('card').value;
if (!name || !address || !/^\d{16}$/.test(card)) {
alert('Please check your inputs.');
event.preventDefault(); // Stop the form from submitting
}
});

Dynamically Calculating Totals

Duration: 45 minutes

Objective:
Enable students to dynamically calculate and display the total costs on the Checkout Page,
enhancing user experience by providing immediate feedback on cost changes.

Interactive Functionality Implementation:

● Calculating Totals: Use JavaScript to sum up the cart items, calculate taxes, and add
shipping costs.
● Displaying the Total: Show how to update the total price dynamically as users change
their cart or enter promo codes.
● Example Functionality:
Hands-On Task

Duration: 30 minutes

● Task: Students will finalize the Checkout Page by implementing dynamic calculations
and robust form validation.
● Expected Outcomes:
○ Build a functional Checkout Page with all required input fields.
○ Ensure all data is validated before allowing the form to submit.
○ Correctly calculate and display the total amount due, updating in real-time as the
user makes adjustments.
Day 4: Building the Account Page and User-Specific Data

Designing the Account Page

Duration: 45 minutes

Objective:
Educate students on how to design and structure an Account Page that enhances user
experience by providing personalized content.

Detailed Explanation:

● Layout Considerations:
○ Discuss the essential elements of an Account Page, including user profile details
and order history.
○ Example Layout:

Simulating User Data

Duration: 45 minutes

Objective:
Show students how to fetch and display dynamic data on the Account Page, simulating a
realistic user experience.

Step-by-Step Instruction:

● Fetching and Displaying Data:

 ○ Explain how to simulate fetching user data from an API or retrieving it from local
storage.
○ Code Example:

function fetchUserData() {
// Simulated API call
const userData = { name: 'John Doe', email: '[email protected]', orders: [123, 456] };
document.getElementById('userName').textContent = userData.name;
document.getElementById('userEmail').textContent = userData.email;
userData.orders.forEach(order => {
const li = document.createElement('li');
li.textContent = `Order ID: ${order}`;
document.getElementById('orderList').appendChild(li);
});
}
fetchUserData();

Editing User Information

Duration: 45 minutes

Objective:
Teach students how to allow users to update their profile information, emphasizing data
persistence and interaction.

Detailed Guide:

● Updating User Details:

○ Implement input fields and a submit button for users to update their name, email,
or password.
○ Use local storage to save updated user information and display a confirmation
message.
○ Example Interaction:

<form id="editProfileForm">
<label for="newEmail">Update Email:</label>
<input type="email" id="newEmail" required>
<button type="submit">Update</button>
</form>
<script>
document.getElementById('editProfileForm').addEventListener('submit', function(event) {
event.preventDefault();
const newEmail = document.getElementById('newEmail').value;
localStorage.setItem('userEmail', newEmail);
alert('Email updated successfully!');
document.getElementById('userEmail').textContent = newEmail;
});
</script>

Hands-On Task

Duration: 45 minutes

● Task: Students will build the Account Page, implementing functionality for displaying and
editing user data.
● Expected Outcomes:
○ Correctly display dynamic user information fetched from simulated sources.
○ Enable users to update their profile details and instantly see the changes on the
page.
○ Manage user data effectively using local storage or simulated API responses.
Day 5: Integrating Local Storage and Finalizing Dynamic
Pages
Cart Integration with Local Storage

Duration: 1 hour

Objective:
Ensure that the cart functionality is fully persistent across user sessions using local storage,
including the ability to add and remove items effectively.

Detailed Guide:

● Persistent Cart Functionality:

○ Implement local storage to save and retrieve cart items even after the browser is
closed or refreshed.
○ Code Example:

function addToCart(product) {
let cart = JSON.parse(localStorage.getItem('cartItems')) || [];
cart.push(product);
localStorage.setItem('cartItems', JSON.stringify(cart));
updateCartDisplay();
}

function removeFromCart(productId) {
let cart = JSON.parse(localStorage.getItem('cartItems'));
cart = cart.filter(item => item.id !== productId);
localStorage.setItem('cartItems', JSON.stringify(cart));
updateCartDisplay();
}

function updateCartDisplay() {
const cart = JSON.parse(localStorage.getItem('cartItems')) || [];
const cartContainer = document.getElementById('cartContents');
cartContainer.innerHTML = ''; // Clear current cart display
cart.forEach(item => {
const itemElement = document.createElement('div');
itemElement.textContent = `${item.name} - $${item.price}`;
cartContainer.appendChild(itemElement);
});
}
Dynamic Product Display

Duration: 30 minutes

Objective:
Ensure that the Product Details Page dynamically retrieves and displays product data from local
storage or an API.

● Product Details Interactivity:

○ Code to handle dynamic product information display and interactions such as
adding to the cart.
○ Interactive Example:

function loadProductDetails(productId) {
// Assuming product details are fetched or retrieved from local storage
const product = JSON.parse(localStorage.getItem('productDetails'));
document.getElementById('productName').textContent = product.name;
document.getElementById('productPrice').textContent = `$${product.price}`;
document.getElementById('addToCartButton').onclick = () => addToCart(product);
}

Checkout and Account Page Finalization

Duration: 1 hour

Objective:
Review and finalize the Checkout and Account Pages to ensure they function correctly with
accurate calculations and valid user interactions.

● Checkout and Account Page Review:

○ Ensure form validations are correct and user data is updated and displayed
properly.
 ○ Validation and Calculation Review:

Debugging and Error Handling

Duration: 1 hour

● Comprehensive Debugging:
○ Instruct students on debugging techniques using browser DevTools.
○ Identify common issues with localStorage, dynamic data handling, and form
submissions.
○ Debugging Tips:

Hands-On Task

Duration: 30 minutes

● Task: Fully integrate and test all dynamic functionalities across the site, particularly
focusing on the cart, checkout, and account features.
● Expected Outcomes:
○ Ensure that the cart updates and persists across sessions.
○ Confirm that the checkout process calculates totals correctly and validates user
input effectively.
○ Verify that the account page displays and updates user information correctly.
 Week 8 : Adding Finishing Touches

Day 1: Finalizing All Pages and Features

Review of All Pages

Duration: 1 hour

Objective:
Conduct a thorough review of each page within the project to ensure completeness,
functionality, and cohesiveness across the website.

Step-by-Step Review Guide:

● Comprehensive Page Reviews:

○ Landing Page: Verify all links, dynamic data displays, and user interactions like
scrolling and navigation are functioning.
○ Cart Page: Check for correct cart item additions, updates, and deletions.
○ Product Details Page: Ensure all product information displays correctly and can
be updated dynamically.
○ Checkout Page: Confirm that all forms validate user input accurately and that
totals are calculated correctly.
○ Account Page: Make sure user data is accurately retrieved and can be updated
seamlessly.

Polishing and Refining User Experience

Duration: 1 hour

Objective:
Enhance the overall aesthetics and usability of the site, ensuring a seamless experience across
different devices.

Detailed Enhancement Plan:

● UI Enhancements:
○ Improve navigation consistency and accessibility.
○ Refine hover effects on buttons and links for better visual feedback.
○ Ensure responsiveness across devices—test on mobile, tablet, and desktop for
layout integrity.
 ○ Example CSS for Refined Hover Effects:

Interactive and Dynamic Elements

Duration: 1 hour

Objective:
Final testing of all interactive and dynamic elements to ensure they are error-free and enhance
the user experience.

Interactive Elements Checklist:

● Product Grid: Confirm that sorting, filtering, and searching functionalities are working as
intended.
● Add-to-Cart: Test adding, removing, and updating items in the cart.
● Form Operations: Verify form submissions on the Checkout and Account Pages for
accuracy and responsiveness to user input.

Hands-On Task

Duration: 1 hour

● Task: Conduct a final review and polish of the project. Students will iteratively refine
each page based on feedback and testing.
● Expected Outcomes:
○ Each page should load correctly with all functionalities intact.
○ User interactions like adding to cart, checking out, and updating profile details
should work without errors.
○ Enhance user interface elements for a polished, professional look.
Day 2: Debugging and Error Handling
Common JavaScript Errors

Duration: 1 hour

Objective:
Equip students with the skills to identify and resolve frequent JavaScript errors, enhancing their
debugging capabilities.

Detailed Instruction:

● Types of Common Errors:

○ Undefined or Null Values: Explain scenarios where these might occur, such as
improperly initialized variables or failing to fetch data.
○ Syntax and Runtime Errors: Discuss errors like missing brackets, incorrect
function calls, and type errors.
○ Network Issues: Cover errors related to failed API calls or resources not loading.
● Using console.log() for Debugging:
○ Demonstrate how to effectively use console.log() to trace values and
function flows.
○ Example: Show how to log variables and function outputs to trace the source of
errors.

2. Error Handling with try...catch

Duration: 1 hour

Objective:
Reinforce the use of try...catch blocks to manage exceptions and ensure applications
handle errors gracefully.

Comprehensive Guide to Error Handling:

● Practical Usage of try...catch:

○ Discuss how to wrap potentially error-prone code blocks within try...catch to
prevent the application from crashing.
○ Example:
 ● Asynchronous Error Handling:
○ Explain the importance of handling errors in asynchronous operations,
particularly in contexts like fetch requests or async functions.

3. Debugging Tools

Duration: 45 minutes

Objective:
Introduce students to powerful browser developer tools that aid in debugging JavaScript and
web applications.

Step-by-Step Instruction:

● Using Developer Tools:

○ Show how to open and navigate browser developer tools (e.g., Chrome
DevTools).
○ Breakpoints: Teach how to set and use breakpoints to pause code execution
and inspect variables.
○ Inspect Elements: Demonstrate how to inspect HTML and CSS to see live
changes.
○ Network Tab: Explain how to monitor network requests to debug issues with API
calls.
○ Console and Sources Panels: Show how these can be used to debug
JavaScript and view loaded resources.

4. Hands-On Task
Duration: 30 minutes

● Task: Students will perform a comprehensive debugging session on their projects.

● Expected Outcomes:
○ Identify and fix issues using try...catch and console outputs.
○ Use developer tools to diagnose problems with JavaScript, network requests, or
UI glitches.
○ Ensure that all functionalities are robust and that error messages are informative
and helpful.
Day 3: Testing and Cross-Browser Compatibility
1. Cross-Browser Testing

Duration: 1 hour

Objective:
Teach students the importance of ensuring their web application works consistently across
different web browsers.

Detailed Explanation:

● Browser Differences:
○ Discuss how different browsers can render HTML, CSS, and JavaScript
differently, leading to potential issues in layout and functionality.
○ Explain the concept of "browser quirks" and common pitfalls.
● Testing Tools:
○ Introduce tools like BrowserStack for testing web applications on multiple
browser versions and operating systems.
○ Demonstrate how to use built-in browser developer tools to simulate different
environments.

2. Mobile Responsiveness

Duration: 1 hour

Objective:
Ensure that the project is fully responsive and functions effectively on mobile devices, utilizing
modern CSS techniques.

Responsive Design Techniques:

● Media Queries Review:

○ Reinforce the use of media queries to adjust the layout based on the device
screen size.
○ Discuss breakpoints and their role in responsive design.
● Flexbox and Grid:
○ Recap how these CSS frameworks help in creating flexible and responsive
layouts.
○ Show practical examples of responsive design adjustments using these
technologies.

3. Manual Testing

Duration: 45 minutes
Objective:
Engage students in hands-on testing of their web applications, focusing on usability and
interactive elements.

Manual Testing Procedures:

● Interactive Elements:
○ Guide students to test all interactive components such as buttons, forms, links,
and navigation menus.
○ Check for smooth operation and user-friendly feedback.
● Form Functionality:
○ Test all forms on the website for proper data capture and validation.
○ Ensure that error handling and success messages display correctly.

4. Hands-On Task

Duration: 45 minutes

● Task: Conduct a comprehensive testing session on the project.

● Expected Outcomes:
○ Perform cross-browser tests to identify and fix compatibility issues.
○ Ensure the website is responsive on various devices, adjusting layouts and
elements as needed.
○ Manually test all website functionalities to confirm that they operate smoothly and
efficiently.
Day 4: Finalizing the Visual Design
1. Enhancing CSS Styling
Duration: 1.5 hours

Objective:
Guide students through the process of refining the CSS styling to give the website a unique and
professional appearance.

Detailed Activities:

● Unique Styling Concepts:

○ Discuss the importance of a consistent and appealing visual theme that aligns
with the project's purpose.
○ Encourage creativity in using CSS for styling elements like backgrounds, fonts,
and color schemes.
● Advanced CSS Techniques:
○ Introduce more advanced CSS properties such as gradients, shadows, and
transitions for sophisticated visual effects.
○ Example Code:
2. Preparing for Presentation
Duration: 1.5 hours

Objective:
Prepare students to effectively present their projects, focusing on the ability to explain and
demonstrate the project's features and the challenges they overcame.

Presentation Preparation Guide:

● Presentation Skills:
○ Teach students how to structure a clear and engaging presentation.
○ Discuss the key points to cover: introduction to the project, demonstration of
features, discussion of technologies used, and challenges faced during
development.
● Practice Sessions:
○ Have students practice their presentations in small groups or in a simulated
environment.
○ Provide feedback on their delivery, clarity, and the overall flow of the
presentation.
Day 5: Project Presentation Day
1. Final Review and Rehearsal
Duration: 1 hour

Objective:
Conduct a final review and rehearsal to ensure that all students are prepared and confident in
their presentation skills.

Activities:

● Technical Check:
○ Ensure that all technical aspects such as project deployment, live demo
readiness, and presentation equipment are functioning properly.
● Rehearsal:
○ Allow each student or group to do a final run-through of their presentation.
○ Make last-minute adjustments based on feedback and technical checks.

2. Presentation of Projects
Duration: 2 hours

Objective:
Each student or group presents their project to the class, instructors, or a panel of invited
guests.

Presentation Format:

● Introduction: Briefly introduce the project and its objectives.

● Demonstration: Show a live demo or walkthrough of the project, highlighting key
features.
● Technical Discussion: Explain the technologies used, particularly focusing on any
innovative solutions or challenging aspects.
● Q&A: Open the floor for questions from the audience to engage in a discussion and
provide further clarifications.