Topic 2 Code Challenge 1 0

CODE CHALLENGE 1
Write proper code to generate the following output :

I. Create 2 links, one for “About Us” page and “Profile” page, clicking on
“About Us” link should redirect to “About Us” html page, and clicking on
“Profile” page should redirect to “profile” html page.
II. Create an unordered/ordered list , containing titles and images of various
cities.
III. Clicking on the title of the cities should redirect us to their respective
wikipedia pages.
IV. Create a table (With borders).
Full Stack Development Specialization Training 1

Solution to Code Challenge 1 :
1. Homepage : (index.html)
<!DOCTYPE html>
<html>
<head>
<title>
Exercise 3
</title>
<style>
table,th,td
{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<a href="aboutus.html">About us</a>
<a href="profile.html">Profile</a>
<hr>
<h4> Our Locations </h4>

<ul>
<li>
<a href="https://en.wikipedia.org/wiki/New_York_City">New
York</a>
<br>
<img src="ny.jpg" width="100px" height="100px" alt="Newyork">
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Italy">Italy</a>
<br>
<img src="italy.jpg" width="100px" height="100px" alt="Italy">
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Sydney">Sydney</a>
<br>

<img src="sydney.jpg" width="100px" height="100px" alt="Sydney">
</li>
</ul>
<table>
<tr>
<th>First Name </th>
<th>Last Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
<tr>
<td> Sania </td>
<td> Sharma</td>
<td>23</td>
<td>Fullstack developer</td>
</tr>
<tr>
<td> Sophie </td>
<td> Gomez </td>
<td>24</td>
<td>Database analyst</td>
</tr>
<tr>
<td> John </td>
<td> Lewis </td>
<td>26</td>
<td> Frontend developer</td>
</tr>
</table>
</body>
</html>
2. About us page : (aboutus.html)

<html>
<head>
<title>About Us</title>
</head>
<body>
<h3><b><i><u>About Us</u></i></b></h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
gravida eleifend felis pretium facilisis. Aenean sagittis ut nibh vel
interdum. Curabitur finibus nibh sit amet sagittis sollicitudin. Quisque
id leo nec mi luctus lobortis gravida vel elit. Duis lobortis gravida nisi
a porttitor. Donec vel eros ultricies, sodales sapien sed, interdum nunc.
In eget eros nec nulla convallis rhoncus. Proin gravida, sapien ut aliquam
finibus, justo diam dictum dui, eget semper orci nunc at tellus.</p>

</body>
</html>
3. Profile (profile.html)
<html>
<head>
<title>Profile</title>
</head>
<body>
<h3><b><i><u>Profile</u></i></b></h3>

</body>
</html>

CODE CHALLENGE 2
Write proper code to generate the following output :

I. Create an employee Form, having fields like First Name, Last Name ,
Address and submit button. (Add placeholders too)
II. Create an Employee table(With borders), having columns like First Name,
Last Name, Age and occupation.
The solution to problem 4 :
<!DOCTYPE html>
<html>
<head>
<title>
Form Exercise
</title>
<style>
table,th,td

{
border: 1px solid black;
border-collapse: collapse;
padding: 30px;
}
</style>
</head>
<body>
<h3> Employee Form</h3>
<form>
<input type="text" placeholder="First Name">
<br>
<br>
<input type="text" placeholder="Last Name">
<br>
<br>
<textarea name="address" rows="4" cols="50"
placeholder="Address"></textarea>
<br>
<br>
<input type="submit" value="Submit">
<br>
<br>
</form>
<table>
<tr>
<th>First Name </th>
<th>Last Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
<tr>
<td> Sania </td>
<td> Sharma</td>
<td>23</td>
<td>Fullstack developer</td>
</tr>
<tr>
<td> Sophie </td>

<td> Gomez </td>
<td>24</td>
<td>Database analyst</td>
</tr>
<tr>
<td> John </td>
<td> Lewis </td>
<td>26</td>
<td> Frontend developer</td>
</tr>
</table>
</body>
</html>

Topic 2 Code Challenge 1 0

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Topic 2 Code Challenge 1 0

Uploaded by

Copyright:

Available Formats

CODE CHALLENGE 1

Write proper code to generate the following output :

Full Stack Development Specialization Training 1

<a href="aboutus.html">About us</a>

<h4> Our Locations </h4>

Full Stack Development Specialization Training 2

2. About us page : (aboutus.html)

Full Stack Development Specialization Training 3

Full Stack Development Specialization Training 4

Full Stack Development Specialization Training 5

Full Stack Development Specialization Training 6

Write proper code to generate the following output :

The solution to problem 4 :

Full Stack Development Specialization Training 7

Full Stack Development Specialization Training 8

Full Stack Development Specialization Training 9

You might also like