Week 1
Week1-Task1
Create a simple HTML page with:
• A title “My first page”
• A heading “Introduction to HTML”
• A paragraph “It is the standard language used to create webpages.
HTML describes the structure of a webpage”
Week1-Task 2
Create a "My Profile" Webpage with:
• Page Title: "My Profile"
• A main heading with your name
• A paragraph about yourself
• A second heading "My Hobbies"
• A paragraph listing your hobbies
Week1-Task3
• Create a paragraph using the <p> tag.
• Write two headings: one with <h1> and another with <h3>.
• Add a line break between two lines of text using <br>.
• Use <strong> to highlight important words in a sentence.
• Make one word italic using <em>.
Week1-Task 4
• Main Heading (<h1>): Welcome to Techspire College
• Subheading (<h3>): Fundamentals of Web Development
• Paragraph (<p>):
Write the following:
At Techspire College, we focus on building a strong foundation in
<strong>web technologies</strong>. Our curriculum emphasizes practical skills
and <em>innovation</em> to prepare students for real-world challenges.
• Second Paragraph with Line Break (<br>):
HTML is the first step toward web development.<br>Master it to unlock endless
possibilities.
• Ordered List (<ol>) with the following points:
1. Understand the basic structure of an HTML document.
2. Learn how to use important tags like <strong>, <em>, <br>, and headings.
3. Build simple webpages as part of your learning journey.
Week 2
Week2-Task 1
Create an HTML page with:
• A heading: “My Favorite Site”
• A link to your favorite website
• An image (use any placeholder or online image)
• Set the background color of the page to any color of your choice.
• Set the text color of the page to a different color from the background.
• Make sure the heading text has a unique color, different from the body text
Week2-Task2
Create a table showing your friends' details:
• Columns: Name, Age, City
• At least 3 rows of data
Week2-Task 3
Build a complete HTML page that includes:
• A heading and paragraph
• A link
• An image
• A table
• A form
Week 3
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS
Example</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<h1 id="title">Welcome to CSS Learning</h1>
<p id="introduction" class="emphasis">CSS helps style your web pages easily.</p>
<p class="emphasis">This paragraph uses a class to emphasize its text.</p>
<h2>CSS Class & ID </h2>
<img src="techspire logo.png" alt="Sample Image" class="bordered">
<p>This is a simple paragraph without any class or id.</p>
</body>
</html>
CSS
/* General Styles */ body {
font-family: Arial, sans-serif;
margin: 20px; }
/* ID Selector */
#title { color:
green; font-
size: 32px; }
/* Class Selector */
.bordered {
width: 300px;
border: 3px solid #000000;
float: right; margin-right:
20px;
}
/* ID Selector */
#introduction { font-
size: 20px; color:
#4d7123;
}
/* Class Selector */
.emphasis {
font-style: italic;
font-weight: bold; color:
blue;
}
/* Element Selector */ h1, h2{ font-family: "Verdana", sans-serif; color: aquamarine;
}
Week 4
CSS Homework Task: Create a Recipe Web Page
Practice using element selectors, class selectors, and ID selectors in CSS.
Create a simple web page for your favorite recipe. Your page should include:
1. Title should be name of your recipe
2. A main heading for the recipe.
3. Image of the food
4. A short description of the recipe.
5. A list of ingredients (at least 3).
6. A list of steps or instructions (at least 2).
7. Link to recipe video (Youtube Video)
8. A special note at the end.
Styling Requirements (Using CSS):
• Use element selectors to style all headings with a consistent color.
• Use a class selector to:
➢ Style the recipe description with background color and padding.
➢ Highlight one important ingredient in a different color or bold text.
• Use an ID selector to:
➢ Style the overall recipe card (e.g., with a border and fixed width).
➢ Style the special note differently (e.g., italic or gray text).
• Try centering the recipe image on the page.
• Include Background Color
Week 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Transform Demo</title>
<link rel="stylesheet" href="transform.css">
</head>
<body>
<h1>CSS Transform Examples</h1>
<div class="box red ">Rotate</div>
<div class="box scale">Scale</div>
<div class="box skew">Skew</div>
<div class="box translate">Translate</div>
</body>
</html>
CSS
body { font-family: Arial,
sans-serif; padding: 30px;
background: #2bccb9;
} h1 { text-
align: center;
margin-bottom: 30px;
} .box { width:
15rem; height:
8rem; margin:
1rem auto;
background-color: #4CAF50;
color: white; display:
flex; justify-content:
center; align-items:
center; border-radius:
0px; font-weight: bold; }
/* Rotate Example */
.red:hover { transform: rotate(45deg); /*+ve deg=clockwise & -ve deg
= anti-clock*/
}
/* Scale Example */ .scale:hover {
transform: scale(0.5); /*scaleX & scaleY*/
}
/* Skew Example */ .skew:hover {
transform: skewY(20deg); /*skewX & skewY*/
}
/* Translate Example */
.translate:hover { transform:
translate(50px, -30px);
}
Week 6
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Grid
Layout</title>
<link rel="stylesheet" href="grid.css">
</head>
<body>
<div class="gridbox">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
</div>
<div class="gridbox1">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
<div>Box 4</div>
</div>
</body>
</html>
CSS
.gridbox {
display: grid; /* Turn on CSS Grid layout */
grid-template-columns: 1fr 1fr 1fr; /* 3 columns, each taking equal space */ grid-
template-rows: 10rem 20rem; /* 2 rows: first 10rem high, second 20rem high */
gap: 10px; /* 10px space between columns and rows */
background-color: lightgreen; justify-items: center; /* Center items
horizontally within their grid cells
*/ align-items: center; /* Center items vertically within their grid
cells */ }
.gridbox1 { padding: 1%; display: grid; /* Turn on
Grid */ grid-template-columns: repeat(2, 100px); /* 2 columns, 100px each */
grid-template-rows: repeat(2, 100px); /* 2 rows, 100px each */ justify-
content: space-between; /* Space between columns horizontally */ align-
content: space-between; /* Space between rows vertically */
background-color: lightblue;
}
.box { height:
10rem; width: 10rem;
background-color: red;
align-items: center;
}
Week 7
Make this layout.
Week 8
Create a responsive webpage that displays a set of 8 colored boxes using div elements. Use to change
the layout based on the screen width as follows:
1. Use the following breakpoints in your CSS:
@media only screen and (max-width: 600px) { ... }
@media only screen and (min-width: 601px) { ... }
@media only screen and (min-width: 768px) { ... }
@media only screen and (min-width: 992px) { ... }
@media only screen and (min-width: 1200px) { ... }
2. Based on the screen width, display the boxes in rows as below:
• 4 boxes per row • 3 boxes per row
• 2 boxes per row
• 1 box per row
• 1 box per row
Week 9
Create a responsive layout using HTML and CSS based on the attached image. Your layout should adapt to the
following screen width breakpoints:
• 0–480px
• 481px–768px
• 769px–991px
• 992px–1280px
• 1281px and above
At each breakpoint, make noticeable changes such as background color, layout direction (row/column), font
size, or number of grid/flex columns to reflect a different design. Use appropriate media queries to handle
the responsiveness.
Ensure your layout closely resembles the attached design while adapting across devices. •
0–480px
• 481px–768px
• 769px–991px
• 992px–1280px
• 1281px and above
Week 10
<!DOCTYPE html>
<html lang="en">
<head>
<title>Window Object Method</title>
</head>
<body>
<script>
alert("This is an alert box");
var result = confirm("Do you want to continue?");
var name = prompt("Enter your name:");
window.print(); // Opens the print dialog
</script>
</body>
</html>
Week 11
Week 12
