Front End Web Development Assignments to be done in file.
1. Create a Basic Webpage
o Create a webpage with the title "My First Webpage." Add a heading, a paragraph,
and an image to the page.
2. Hyperlinks
o Create a webpage with three hyperlinks: one to an external website (e.g., Google),
one to another HTML page in the same folder, and one to a specific section on the
same page.
3. Lists
o Create an ordered list and an unordered list of your favorite fruits. Add nested lists
for subcategories (e.g., "Citrus: Orange, Lemon").
4. Forms
o Create a form with the following fields: Name (text), Email (email), Password
(password), Gender (radio buttons), and a Submit button.
5. Tables
o Create a table displaying a weekly timetable with columns for "Day," "Subject," and
"Time."
6. Images and Links
o Add an image to a webpage and make it clickable to redirect to another webpage.
7. Semantic HTML
o Create a webpage using semantic tags such as <header>, <footer>, <nav>,
<section>, and <article>.
8. HTML Audio and Video
o Embed an audio file and a video file in a webpage with controls.
9. Forms with Input Types
o Create a form with various input types: text, checkbox, radio button, date, range,
and file upload.
10. HTML Comments
o Add comments to your HTML code explaining the structure of your webpage.
CSS and JS Practical Questions
11. Basic Styling
o Create a webpage and use inline, internal, and external CSS to style a heading and
paragraph.
12. Selectors
o Write CSS rules to style all <p> tags, a specific <div> with an ID, and a group of
elements with the same class.
13. Color and Backgrounds
o Style a webpage to apply a background color to the body, a different text color to
headings, and a gradient background to a specific <div>.
14. Display an Alert
Write a script that shows an alert box with the message: "Welcome to JavaScript!"
15. Add Two Numbers
Write a script that takes two numbers as input from the user (using prompt), adds them, and
displays the result in an alert box.
Solution
1. Create a Basic Webpage
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a paragraph of text.</p>
<img src="image.jpg" alt="Sample Image" width="300">
</body>
</html>
2. Hyperlinks
<html>
<body>
<a href="https://www.google.com" target="_blank">Visit Google</a><br>
<a href="page2.html">Go to Page 2</a><br>
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
<p>This is Section 1 content.</p>
</body>
</html>
3. Lists
<html>
<body>
<h3>Favorite Fruits</h3>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Citrus
<ul>
<li>Orange</li>
<li>Lemon</li>
</ul>
</li>
</ol>
</body>
</html>
4. Forms
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label>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><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
5. Tables
<html>
<body>
<table border="1">
<tr>
<th>Day</th>
<th>Subject</th>
<th>Time</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>10:00 AM</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Science</td>
<td>11:00 AM</td>
</tr>
</table>
</body>
</html>
6. Images and Links
<html>
<body>
<a href="https://www.example.com">
<img src="example.jpg" alt="Example Image" width="200">
</a>
</body>
</html>
7. Semantic HTML
<html>
<body>
<header>
<h1>Website Header</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<section>
<article>
<h2>Article Title</h2>
<p>This is an article.</p>
</article>
</section>
<footer>
<p>Website Footer</p>
</footer>
</body>
</html>
8. HTML Audio and Video
<html>
<body>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support audio playback.
</audio>
<video controls width="400">
<source src="video.mp4" type="video/mp4">
Your browser does not support video playback.
</video>
</body>
</html>
9. Forms with Input Types
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name"><br><br>
<label for="file">Upload File:</label>
<input type="file" id="file"><br><br>
<label for="date">Select Date:</label>
<input type="date" id="date"><br><br>
<label for="range">Select Range:</label>
<input type="range" id="range" min="1" max="10"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
10. HTML Comments
<!-- This is the header of the page -->
<h1>Header</h1>
<!-- This is a paragraph -->
<p>This is some text.</p>
CSS and JS Practical Questions
11. Basic Styling
<html>
<head>
<style>
h1 { color: blue; }
p { font-size: 14px; }
</style>
</head>
<body>
<h1>Styled Heading</h1>
<p>Styled Paragraph</p>
</body>
</html>
12. Selectors
<html>
<head>
<style>
p { color: green; }
#special { color: red; }
.highlight { background-color: yellow; }
</style>
<p>This is a paragraph.</p>
<p id="special">This is a special paragraph.</p>
<p class="highlight">This is a highlighted paragraph.</p>
</body>
</html>
13. Color and Backgrounds
<html>
<head>
<style>
body { background-color: lightblue; }
h1 { color: white; }
div { background: linear-gradient(to right, red, yellow); }
</style>
</body>
</html>
14. Display an Alert
<html>
<head>
<title>Alert Box</title>
</head>
<body>
<script>
alert("Welcome to JavaScript!");
</script>
</body>
</html>
15. Add Two Numbers
<html>
<head>
<title>Add Two Numbers</title>
</head>
<body>
<script>
let num1 = parseFloat(prompt("Enter the first number:"));
let num2 = parseFloat(prompt("Enter the second number:"));
let sum = num1 + num2;
alert("The sum is: " + sum);
</script>
</body>
</html>
