ONE MONTH WEB DEVELOPMENT COURSE
HTML, CSS & JAVASCRIPT
Beginner to Intermediate Level
COURSE OVERVIEW
Course Duration
4 Weeks (1 Month)
Class Schedule
5 Days Per Week
2–3 Hours Per Class
Technologies Covered
HTML5
CSS3
JavaScript (ES6)
Tools Needed
VS Code
Google Chrome
Internet Browser
Live Server Extension
WEEK 1 – HTML FUNDAMENTALS
DAY 1 – INTRODUCTION TO WEB DEVELOPMENT & HTML BASICS
Lecture Objectives
At the end of this class, students should be able to:
Understand what web development is
Understand frontend and backend
Install VS Code
Create an HTML file
Write basic HTML structure
Run a webpage in browser
WHAT IS WEB DEVELOPMENT?
Web development is the process of creating websites and web applications.
There are 3 main parts:
1. Frontend
What users see
HTML, CSS, JavaScript
2. Backend
Server logic
Databases
Authentication
3. Database
Stores information
WHAT IS HTML?
HTML means:
Hyper Text Markup Language
HTML is used to structure webpages.
HTML is NOT a programming language.
HTML uses tags.
Example:
<h1>Hello World</h1>
SETTING UP THE DEVELOPMENT ENVIRONMENT
Step 1 – Install VS Code
Download and install VS Code.
Step 2 – Install Live Server Extension
Open VS Code
Go to Extensions
Search “Live Server”
Install
CREATING YOUR FIRST HTML FILE
Step 1
Create a folder:
web-course
Step 2
Inside it create:
[Link]
BASIC HTML STRUCTURE
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome To My Website</h1>
<p>This is my first webpage.</p>
</body>
</html>
EXPLANATION OF THE CODE
Tells browser this is HTML5.
Root of the webpage.
Contains webpage information.
Name displayed on browser tab.
Contains visible content.
HTML HEADINGS
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Another Heading</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML PARAGRAPHS
<p>This is a paragraph.</p>
HTML COMMENTS
<!-- This is a comment -->
PRACTICAL EXERCISE
Create a webpage that contains:
Your name
Your school
Your favorite food
A short biography
ASSIGNMENT
Create a webpage titled:
About Me
Include:
3 headings
3 paragraphs
1 comment
DAY 2 – HTML TEXT FORMATTING & LISTS
Objectives
Students should learn:
Text formatting tags
Lists
Line breaks
Horizontal lines
TEXT FORMATTING TAGS
Bold Text
<b>Bold Text</b>
Strong Text
<strong>Important Text</strong>
Italic Text
<i>Italic Text</i>
Underline
<u>Underline Text</u>
Small Text
<small>Small Text</small>
LINE BREAK
<p>Hello <br> World</p>
HORIZONTAL LINE
<hr>
ORDERED LIST
<ol>
<li>Rice</li>
<li>Beans</li>
<li>Yam</li>
</ol>
UNORDERED LIST
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ul>
NESTED LISTS
<ul>
<li>Programming
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
</li>
</ul>
CLASS EXERCISE
Create:
Shopping list
Daily routine list
Favorite movies list
ASSIGNMENT
Build a webpage called:
My Daily Activities
Requirements:
2 headings
2 paragraphs
Ordered list
Unordered list
Horizontal line
DAY 3 – HTML LINKS, IMAGES & MEDIA
Objectives
Students should learn:
Hyperlinks
Images
Audio
Video
HTML LINKS
Basic Link
<a href="[Link] Google</a>
OPEN LINK IN NEW TAB
<a href="[Link] target="_blank">
Open Google
</a>
ADDING IMAGES
<img src="[Link]" alt="My Image">
IMAGE WIDTH & HEIGHT
<img src="[Link]" width="300" height="200">
ADDING AUDIO
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
ADDING VIDEO
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
</video>
PRACTICAL PROJECT
Create:
Personal Profile Page
Include:
Profile picture
Links to social media
Favorite music
Favorite video
DAY 4 – HTML TABLES & FORMS
Objectives
Students should learn:
Tables
Forms
Inputs
Buttons
HTML TABLES
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Course</th>
</tr>
<tr>
<td>John</td>
<td>20</td>
<td>HTML</td>
</tr>
</table>
HTML FORMS
<form>
<label>Full Name</label>
<input type="text">
<br><br>
<label>Email</label>
<input type="email">
<br><br>
<button>Submit</button>
</form>
TYPES OF INPUTS
Text Input
<input type="text">
Password
<input type="password">
Number
<input type="number">
Date
<input type="date">
Checkbox
<input type="checkbox">
Radio Button
<input type="radio">
TEXTAREA
<textarea></textarea>
SELECT DROPDOWN
<select>
<option>HTML</option>
<option>CSS</option>
</select>
PROJECT
Create a:
Student Registration Form
Requirements:
Name
Email
Gender
Course
Submit button
DAY 5 – HTML SEMANTIC TAGS & MINI PROJECT
Objectives
Students should learn:
Semantic HTML
Proper webpage structure
Mini project creation
SEMANTIC TAGS
Header
<header></header>
Navigation
<nav></nav>
Section
<section></section>
Article
<article></article>
Footer
<footer></footer>
COMPLETE PAGE STRUCTURE
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
<section>
<h2>About Us</h2>
<p>Welcome to our website.</p>
</section>
<footer>
<p>Copyright 2026</p>
</footer>
</body>
</html>
WEEK 1 FINAL PROJECT
Project Title
Personal Portfolio Website
Requirements
Students must create:
Homepage
About section
Contact form
Images
Navigation links
Table
Lists
WEEK 1 TEST QUESTIONS
1. What does HTML stand for?
2. What is the purpose of the body tag?
3. Write the structure of an HTML document.
4. Difference between ordered and unordered list.
5. Write code for inserting an image.
6. Write code for creating a form.
WEEK 1 GRADING
Attendance – 10%
Assignments – 20%
Practical – 40%
Test – 30%
END OF WEEK 1
WEEK 2 – FULL CSS FUNDAMENTALS
INTRODUCTION TO CSS
What is CSS?
CSS means:
Cascading Style Sheets
CSS is used to style HTML webpages.
With CSS we can:
Change colors
Add spacing
Style text
Create layouts
Make websites responsive
Add animations
TYPES OF CSS
There are 3 ways to use CSS:
1. Inline CSS
2. Internal CSS
3. External CSS
DAY 1 – CSS BASICS & SELECTORS
Lecture Objectives
Students should learn:
What CSS is
CSS syntax
How to connect CSS
Basic selectors
Colors and backgrounds
CSS SYNTAX
selector {
property: value;
Example:
h1 {
color: blue;
INLINE CSS
<h1 style="color:red;">Hello World</h1>
INTERNAL CSS
<head>
<style>
h1 {
color: blue;
</style>
</head>
EXTERNAL CSS
HTML File
<link rel="stylesheet" href="[Link]">
CSS File
h1 {
color: green;
CSS SELECTORS
Element Selector
p{
color: red;
CLASS SELECTOR
HTML
<p class="text">Hello</p>
CSS
.text {
color: blue;
ID SELECTOR
HTML
<h1 id="title">Welcome</h1>
CSS
#title {
color: purple;
}
UNIVERSAL SELECTOR
*{
margin: 0;
padding: 0;
COLORS IN CSS
Color Name
h1 {
color: red;
HEX COLOR
h1 {
color: #ff0000;
RGB COLOR
h1 {
color: rgb(0, 0, 255);
BACKGROUND COLORS
body {
background-color: lightgray;
PRACTICAL EXERCISE
Create a webpage:
Add heading
Add paragraphs
Style using:
o colors
o background
o classes
o ids
ASSIGNMENT
Create:
Simple Biography Website
Requirements:
Different text colors
Background color
Use class selector
Use id selector
DAY 2 – CSS TEXT, FONTS & SPACING
Objectives
Students should learn:
Fonts
Text styling
Margin
Padding
Borders
FONT SIZE
h1 {
font-size: 40px;
FONT FAMILY
body {
font-family: Arial;
FONT WEIGHT
p{
font-weight: bold;
TEXT ALIGNMENT
h1 {
text-align: center;
TEXT TRANSFORM
h1 {
text-transform: uppercase;
LETTER SPACING
h1 {
letter-spacing: 5px;
LINE HEIGHT
p{
line-height: 30px;
BORDER
div {
border: 2px solid black;
BORDER RADIUS
button {
border-radius: 10px;
MARGIN
div {
margin: 20px;
PADDING
div {
padding: 20px;
BOX MODEL
The CSS Box Model contains:
Content
Padding
Border
Margin
CLASS EXERCISE
Design:
A card
A button
A profile section
Using:
Padding
Margin
Border
Border radius
MINI PROJECT
Create:
Student Profile Card
Requirements:
Profile image
Name
Course
Styled button
Rounded corners
DAY 3 – CSS DISPLAY, POSITION & FLEXBOX
Objectives
Students should learn:
Display property
Positioning
Flexbox
DISPLAY PROPERTY
Block
div {
display: block;
Inline
span {
display: inline;
}
Inline Block
button {
display: inline-block;
DISPLAY NONE
p{
display: none;
POSITION PROPERTY
Relative
.box {
position: relative;
Absolute
.box {
position: absolute;
Fixed
nav {
position: fixed;
}
FLEXBOX
Flexbox is used for layout alignment.
FLEX CONTAINER
.container {
display: flex;
JUSTIFY CONTENT
.container {
justify-content: center;
ALIGN ITEMS
.container {
align-items: center;
FLEX DIRECTION
.container {
flex-direction: column;
FLEXBOX EXAMPLE
<div class="container">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
.container {
display: flex;
gap: 20px;
PRACTICAL EXERCISE
Create:
Navigation bar
Flexbox gallery
Centered content
ASSIGNMENT
Build:
Flexbox Landing Page
Requirements:
Navbar
Hero section
3 cards
Footer
DAY 4 – CSS GRID & RESPONSIVE DESIGN
Objectives
Students should learn:
CSS Grid
Media Queries
Responsive websites
CSS GRID
.container {
display: grid;
GRID COLUMNS
.container {
grid-template-columns: 1fr 1fr 1fr;
GRID GAP
.container {
gap: 20px;
GRID EXAMPLE
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
RESPONSIVE DESIGN
Responsive design makes websites work on:
Phones
Tablets
Laptops
MEDIA QUERY
@media (max-width: 768px) {
body {
background: lightblue;
RESPONSIVE GRID
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
PRACTICAL PROJECT
Create:
Responsive Product Layout
Requirements:
Grid layout
Responsive design
Mobile-friendly
DAY 5 – CSS ANIMATIONS & FINAL PROJECT
Objectives
Students should learn:
Hover effects
Transitions
Animations
Transform
HOVER EFFECT
button:hover {
background: blue;
color: white;
TRANSITION
button {
transition: 0.5s;
TRANSFORM SCALE
.card:hover {
transform: scale(1.1);
ROTATE
.box:hover {
transform: rotate(45deg);
CSS ANIMATION
@keyframes move {
from {
left: 0;
}
to {
left: 300px;
APPLYING ANIMATION
.box {
position: relative;
animation: move 3s infinite;
FINAL WEEK 2 PROJECT
Project Title
Modern Responsive Website
PROJECT REQUIREMENTS
Students must create:
Responsive navbar
Hero section
About section
Services section
Contact section
Footer
Hover effects
Flexbox layout
Grid gallery
BONUS CHALLENGE
Add:
Animation
Smooth scrolling
Mobile responsiveness
Hover transitions
WEEK 2 TEST QUESTIONS
1. What does CSS stand for?
2. Difference between class and id selector.
3. Explain padding and margin.
4. What is Flexbox?
5. What is CSS Grid?
6. What is responsive design?
7. Write a media query example.
8. Difference between inline and block elements.
WEEK 2 PRACTICAL EXAM
Students should create:
Responsive Portfolio Website
Requirements:
Responsive layout
Navigation bar
Hero section
Services cards
Contact form
Footer
Hover effects
Flexbox and Grid
END OF WEEK 2
WEEK 3 – JAVASCRIPT FUNDAMENTALS
INTRODUCTION TO JAVASCRIPT
What is JavaScript?
JavaScript is a programming language used to make websites interactive.
With JavaScript we can:
Create dynamic webpages
Respond to user actions
Build games
Validate forms
Create animations
Build web applications
WHAT JAVASCRIPT CAN DO
JavaScript can:
Change HTML content
Change CSS styles
Show alerts
Perform calculations
Handle buttons and forms
DAY 1 – JAVASCRIPT BASICS
Objectives
Students should learn:
How to add JavaScript
Variables
Data types
Output methods
ADDING JAVASCRIPT
Inline JavaScript
<button onclick="alert('Hello')">
Click Me
</button>
Internal JavaScript
<script>
alert("Welcome");
</script>
External JavaScript
HTML
<script src="[Link]"></script>
JAVASCRIPT OUTPUT
Alert
alert("Hello World");
Console Log
[Link]("Hello");
Document Write
[Link]("Welcome");
VARIABLES
Variables store data.
DECLARING VARIABLES
Using let
let name = "John";
Using const
const pi = 3.14;
Using var
var age = 20;
DATA TYPES
String
let name = "Peter";
Number
let age = 25;
Boolean
let isStudent = true;
ARRAY
let fruits = ["Apple", "Orange", "Banana"];
OBJECT
let student = {
name: "John",
age: 20
};
PRACTICAL EXERCISE
Create variables for:
Name
Age
School
Favorite color
Display them in console.
ASSIGNMENT
Create:
Student Information Program
Display:
Name
Age
Department
Favorite food
DAY 2 – OPERATORS & CONDITIONS
Objectives
Students should learn:
Operators
If statements
Comparison operators
ARITHMETIC OPERATORS
let a = 10;
let b = 5;
[Link](a + b);
[Link](a - b);
[Link](a * b);
[Link](a / b);
COMPARISON OPERATORS
10 == 10
10 === 10
10 != 5
10 > 5
10 < 20
LOGICAL OPERATORS
&&
||
IF STATEMENT
let age = 18;
if(age >= 18) {
[Link]("Adult");
IF ELSE
let score = 40;
if(score >= 50) {
[Link]("Pass");
} else {
[Link]("Fail");
ELSE IF
let score = 75;
if(score >= 80) {
[Link]("Excellent");
else if(score >= 50) {
[Link]("Good");
else {
[Link]("Fail");
SWITCH STATEMENT
let day = 1;
switch(day) {
case 1:
[Link]("Monday");
break;
case 2:
[Link]("Tuesday");
break;
default:
[Link]("Invalid Day");
PRACTICAL EXERCISE
Create:
Grading system
Voting age checker
Simple calculator
ASSIGNMENT
Build:
Student Result Checker
Requirements:
Input score
Show grade
Show pass/fail
DAY 3 – LOOPS & FUNCTIONS
Objectives
Students should learn:
Loops
Functions
Parameters
Return values
FOR LOOP
for(let i = 1; i <= 5; i++) {
[Link](i);
WHILE LOOP
let i = 1;
while(i <= 5) {
[Link](i);
i++;
}
DO WHILE LOOP
let i = 1;
do {
[Link](i);
i++;
} while(i <= 5);
FUNCTIONS
function greet() {
[Link]("Hello");
CALLING FUNCTION
greet();
FUNCTION PARAMETERS
function greet(name) {
[Link]("Hello " + name);
}
RETURN VALUE
function add(a, b) {
return a + b;
ARROW FUNCTION
const add = (a, b) => {
return a + b;
PRACTICAL EXERCISE
Create functions for:
Addition
Multiplication
Greeting users
ASSIGNMENT
Create:
Multiplication Table Program
Use loops and functions.
DAY 4 – DOM MANIPULATION & EVENTS
Objectives
Students should learn:
DOM
Events
Changing webpage content
WHAT IS DOM?
DOM means:
Document Object Model
JavaScript uses DOM to interact with HTML.
SELECTING ELEMENTS
By ID
[Link]("title");
By Class
[Link]("text");
Query Selector
[Link](".box");
CHANGING CONTENT
[Link]("title").innerHTML = "Welcome";
CHANGING CSS
[Link]("title").[Link] = "red";
BUTTON CLICK EVENT
<button onclick="changeText()">
Click Me
</button>
function changeText() {
[Link]("title").innerHTML = "Changed";
EVENT LISTENER
[Link]("click", function() {
alert("Button Clicked");
});
INPUT VALUE
let value = [Link]("name").value;
PRACTICAL PROJECT
Create:
Interactive Counter App
Requirements:
Increase button
Decrease button
Reset button
DAY 5 – ARRAYS, OBJECTS & MINI PROJECT
Objectives
Students should learn:
Arrays
Objects
Array methods
ARRAY
let colors = ["Red", "Blue", "Green"];
ACCESS ARRAY
[Link](colors[0]);
ARRAY METHODS
Push
[Link]("Yellow");
Pop
[Link]();
Loop Through Array
[Link](function(color) {
[Link](color);
});
OBJECTS
let student = {
name: "John",
age: 20,
course: "Web Development"
};
ACCESS OBJECT
[Link]([Link]);
FINAL WEEK 3 PROJECT
Project Title
Student Management App
REQUIREMENTS
Students should create:
Student registration form
Add student button
Display students
Delete student
Update content dynamically
WEEK 3 TEST QUESTIONS
1. What is JavaScript?
2. Difference between let and const.
3. What is a function?
4. Explain loops.
5. What is DOM?
6. Difference between array and object.
7. Write an if else statement.
8. Write a function that adds two numbers.
END OF WEEK 3
========================================================
WEEK 4 – ADVANCED JAVASCRIPT & FINAL PROJECTS
DAY 1 – ADVANCED FUNCTIONS & ARRAY METHODS
Objectives
Students should learn:
Callback functions
Map
Filter
Reduce
CALLBACK FUNCTION
function greet(name, callback) {
[Link]("Hello " + name);
callback();
MAP METHOD
let numbers = [1, 2, 3];
let doubled = [Link](function(num) {
return num * 2;
});
[Link](doubled);
FILTER METHOD
let ages = [12, 18, 25, 10];
let adults = [Link](function(age) {
return age >= 18;
});
[Link](adults);
REDUCE METHOD
let numbers = [1, 2, 3, 4];
let total = [Link](function(sum, num) {
return sum + num;
}, 0);
[Link](total);
DAY 2 – JAVASCRIPT FORMS & VALIDATION
Objectives
Students should learn:
Form validation
Prevent form submission
Error handling
FORM VALIDATION
function validateForm() {
let name = [Link]("name").value;
if(name === "") {
alert("Name is required");
return false;
PREVENT DEFAULT
[Link]("submit", function(event) {
[Link]();
});
EMAIL VALIDATION
if([Link]("@")) {
[Link]("Valid Email");
MINI PROJECT
Create:
Registration Form Validation App
Requirements:
Name validation
Email validation
Password validation
DAY 3 – LOCAL STORAGE & JSON
Objectives
Students should learn:
Local storage
Save data
Retrieve data
JSON
LOCAL STORAGE
Save Data
[Link]("name", "John");
GET DATA
[Link]("name");
REMOVE DATA
[Link]("name");
JSON
Convert to JSON
let user = {
name: "John",
age: 20
};
let data = [Link](user);
CONVERT BACK
[Link](data);
PRACTICAL PROJECT
Create:
Todo List App
Requirements:
Add task
Delete task
Save tasks in local storage
DAY 4 – ASYNC JAVASCRIPT & APIs
Objectives
Students should learn:
Fetch API
Async and Await
Working with APIs
FETCH API
fetch("[Link]
.then(response => [Link]())
.then(data => [Link](data));
ASYNC FUNCTION
async function getUsers() {
let response = await fetch("[Link]
let data = await [Link]();
[Link](data);
TRY CATCH
try {
[Link]("Working");
} catch(error) {
[Link](error);
}
PROJECT
Create:
Weather App
Requirements:
Fetch weather data
Display temperature
Search city
DAY 5 – FINAL PROJECT & COURSE COMPLETION
FINAL CAPSTONE PROJECT
Project Title
Complete Responsive Web Application
PROJECT OPTIONS
Students can choose one:
1. Hospital Website
2. School Management System
3. E-Commerce Website
4. Portfolio Website
5. Blog Website
6. Banking Dashboard
7. Restaurant Website
REQUIRED FEATURES
Students must include:
HTML
Semantic tags
Forms
Tables
Media
CSS
Responsive design
Flexbox
Grid
Animations
JavaScript
DOM manipulation
Events
Validation
Local storage
Dynamic content
ADVANCED FEATURES
Students should add:
Dark mode
Mobile menu
API integration
Interactive UI
Loading animations
FINAL PROJECT STRUCTURE
project-folder/
│── [Link]
│── [Link]
│── [Link]
│── images/
DEPLOYMENT
Students should learn how to deploy websites using:
GitHub Pages
Netlify
Vercel
FINAL EXAM QUESTIONS
1. What is DOM?
2. Difference between map and filter.
3. Explain local storage.
4. What is JSON?
5. What is an API?
6. Difference between synchronous and asynchronous JavaScript.
7. What is fetch?
8. Explain event listeners.
COURSE COMPLETION PROJECT
Students must submit:
Complete responsive website
Clean code
Organized files
Mobile responsiveness
Interactive features
COURSE OUTCOME
At the end of this course students should be able to:
Build responsive websites
Use HTML professionally
Style with CSS
Create interactive apps with JavaScript
Build complete frontend projects
END OF WEEK 4
JAVASCRIPT LOCAL STORAGE
FULL LECTURE NOTE
INTRODUCTION TO LOCAL STORAGE
What is Local Storage?
Local Storage is a feature in JavaScript that allows websites to store data inside the user's
browser.
The stored data remains available even after:
Refreshing the page
Closing the browser
Restarting the computer
Local Storage is part of the:
Web Storage API
WHY LOCAL STORAGE IS IMPORTANT
Local Storage helps developers:
Save user settings
Save login information
Save tasks in todo apps
Save shopping cart items
Store small amounts of data
CHARACTERISTICS OF LOCAL STORAGE
Features
1. Stores data permanently
2. Data remains after page refresh
3. Data is stored as strings
4. Easy to use
5. Works inside the browser
DIFFERENCE BETWEEN LOCAL STORAGE AND SESSION STORAGE
Local Storage Session Storage
Data remains permanently Data disappears when browser closes
Larger storage size Smaller storage size
Persistent Temporary
LOCAL STORAGE METHODS
There are 4 major methods:
1. setItem()
2. getItem()
3. removeItem()
4. clear()
SYNTAX OF LOCAL STORAGE
[Link](key, value);
1. SAVING DATA WITH setItem()
Syntax
[Link]("key", "value");
Example
[Link]("username", "John");
Explanation:
username = key
John = value
SAVING MULTIPLE VALUES
[Link]("name", "David");
[Link]("age", "25");
[Link]("course", "Web Development");
2. RETRIEVING DATA WITH getItem()
Syntax
[Link]("key");
Example
let username = [Link]("username");
[Link](username);
DISPLAYING STORED DATA
[Link]("result").innerHTML =
[Link]("username");
3. REMOVING DATA WITH removeItem()
Syntax
[Link]("key");
Example
[Link]("username");
This deletes only one item.
4. CLEARING ALL DATA WITH clear()
Syntax
[Link]();
This removes all data from local storage.
COMPLETE LOCAL STORAGE EXAMPLE
HTML
<!DOCTYPE html>
<html>
<head>
<title>Local Storage</title>
</head>
<body>
<input type="text" id="name" placeholder="Enter Name">
<button onclick="saveData()">
Save
</button>
<button onclick="showData()">
Show
</button>
<h1 id="result"></h1>
<script src="[Link]"></script>
</body>
</html>
JAVASCRIPT
function saveData() {
let name = [Link]("name").value;
[Link]("username", name);
function showData() {
let storedName = [Link]("username");
[Link]("result").innerHTML =
storedName;
HOW THE PROGRAM WORKS
Step 1
User enters a name.
Step 2
The name is saved in local storage.
Step 3
When the button is clicked again, the saved name appears.
STORING ARRAYS IN LOCAL STORAGE
Local Storage stores only strings.
To store arrays or objects we use:
[Link]()
ARRAY EXAMPLE
let fruits = ["Apple", "Orange", "Banana"];
[Link](
"fruits",
[Link](fruits)
);
RETRIEVING ARRAY
let data = [Link](
[Link]("fruits")
);
[Link](data);
STORING OBJECTS
let student = {
name: "John",
age: 20,
course: "HTML"
};
[Link](
"student",
[Link](student)
);
RETRIEVING OBJECTS
let studentData = [Link](
[Link]("student")
);
[Link]([Link]);
WHAT IS JSON?
JSON means:
JavaScript Object Notation
JSON converts:
Objects to strings
Arrays to strings
JSON METHODS
[Link]()
Converts object to string.
[Link]()
Converts string back to object.
LOCAL STORAGE PROJECT
TODO LIST APPLICATION
PROJECT REQUIREMENTS
Students should create:
Input field
Add task button
Display tasks
Delete task
Save tasks permanently
SIMPLE TODO APP EXAMPLE
HTML
<input type="text" id="task">
<button onclick="addTask()">
Add Task
</button>
<ul id="list"></ul>
JAVASCRIPT
let tasks = [];
function addTask() {
let taskInput =
[Link]("task");
let task = [Link];
[Link](task);
[Link](
"tasks",
[Link](tasks)
);
displayTasks();
DISPLAY FUNCTION
function displayTasks() {
let storedTasks = [Link](
[Link]("tasks")
);
let output = "";
[Link](function(task) {
output += "<li>" + task + "</li>";
});
[Link]("list").innerHTML =
output;
ADVANTAGES OF LOCAL STORAGE
1. Easy to use
2. Fast
3. Stores data permanently
4. No database needed
5. Useful for small projects
DISADVANTAGES OF LOCAL STORAGE
1. Stores only strings
2. Not secure for passwords
3. Limited storage space
4. Cannot store large files
SECURITY WARNING
Never store:
Passwords
Bank details
Sensitive information
Inside Local Storage because users can access it easily.
PRACTICAL EXERCISES
Exercise 1
Create a program that:
Saves favorite color
Displays favorite color
Exercise 2
Create a:
Student Registration App
Requirements:
Save student name
Save course
Display saved data
Exercise 3
Create:
Theme Switcher
Requirements:
Save dark mode preference
Restore preference after refresh
INTERVIEW QUESTIONS
1. What is Local Storage?
2. Difference between Local Storage and Session Storage.
3. What does setItem() do?
4. What does getItem() do?
5. Why do we use [Link]()?
6. Why do we use [Link]()?
7. Is Local Storage secure?
SUMMARY
In this lecture students learned:
What Local Storage is
How to save data
How to retrieve data
How to remove data
How to use JSON
How to build applications with Local Storage
END OF LOCAL STORAGE LECTURE