Scribd
Upload
13 views

Front End Web Development Assignments (2)

The document outlines a series of front-end web development assignments, including creating basic webpages, using hyperlinks, lists, forms, tables, and semantic HTML. It also covers practical questions related to CSS and JavaScript, such as styling elements, using selectors, and implementing alerts. Each assignment includes example HTML code to demonstrate the required tasks.

Uploaded by

cyber.100720
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

Front End Web Development Assignments (2)

The document outlines a series of front-end web development assignments, including creating basic webpages, using hyperlinks, lists, forms, tables, and semantic HTML. It also covers practical questions related to CSS and JavaScript, such as styling elements, using selectors, and implementing alerts. Each assignment includes example HTML code to demonstrate the required tasks.

Uploaded by

cyber.100720
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

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>

You might also like