Front-End Development
Midterm Exam
Required Time: 75 Minutes
Provide all your answers in this sheet and submit it as docx file
Question 1: Create an HTML structure for a basic webpage. Include the following elements:
Title: "My Webpage"
Header with the text "Welcome to My Webpage"
Paragraph with the text "This is a sample webpage."
An image with the source "[Link]" and alt text "Sample Image."
Ans:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
</header>
<main>
<p>This is a sample webpage.</p>
<img src="[Link]" alt="Sample Image">
</main>
</body>
</html>
Question 2: Create the following table using HTML.
School of IT
Student ID Student Name Address
Jack Jason Toronto
Ans:
<!DOCTYPE html>
<html>
<head>
<title>Student Information</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">School of IT</th>
</tr>
<tr>
<th>Student ID</th>
<th>Student Name</th>
<th>Address</th>
</tr>
<tr>
<td>Jack</td>
<td>Jason</td>
<td>Toronto</td>
</tr>
</table>
</body>
</html>
Question 3: Write a CSS selector that targets all <p> elements with the class "highlight."
Ans:
[Link] {
/* styles here */
Question 4: How can you select all <a> elements that are direct children of a <div> element
using CSS?
Ans:
div > a {
/* styles here */
Question 5: What is the "descendant selector" in CSS, and how does it work? Provide an
example.
Ans: The CSS descendant selector selects elements that are descendants of a specific element
which is denoted by a whitespace character, and includes all descendants of the specified
ancestor element.
How its work.
Syntax of descendant selector
parent_selector descendant_selector {
the descendant selector will select all instances of descendant_selector that are descendants of
parent_selector. This includes not only the immediate children but also all nested descendants,
no matter how deeply they are nested within the parent.
Example how its works
html
<div class="protsan">
<p>This is a paragraph inside the protsan.</p>
<div>
<p>This is a nested paragraph.</p>
</div>
</div>
Css
.container p {
color: blue;
Question 6: Explain the difference between the "universal selector" (*) and the "element
selector" in CSS. When would you use each?
Ans: The “universal selector” (*) selects all elements on a web page, while the "element
selector" selects specific HTML elements.
We use the universal selector when we want to apply a style or rule to all elements on a page.
We use the element selector when we want to target and style specific types of elements, such as
headings, paragraphs, or lists.
Question 7: Write a CSS selector that targets all <ul> elements with the class "menu" that are
descendants of an element with the ID "navbar."
Ans: A CSS selector that targets all <ul> elements with the class "menu" that are descendants of
an element with the ID "navbar." Is #navbar .menu ul
Question 8: What is the purpose of the "attribute selector" in CSS? Provide an example of how
to use it.
Ans: The "attribute selector" in CSS is used to select HTML elements based on the presence or
specific attributes of those elements. It allows us to style or target elements with attributes like
"class," "id," or custom attributes, providing more control over styling and behavior.
Example and how its work
Html
<a href="[Link] Example</a>
<a href="[Link] Google</a>
<a href="[Link] target="_self">Visit Yahoo</a>
Css
a[target="_blank"] {
color: blue;
a[target="_self"] {
color: red;
workings: the first link with target="_blank" will be styled with blue text, and the third link with
target="_self" will be styled with red text. The attribute selector allows you to apply specific
styles to elements with certain attributes.
Question 9: Explain what pseudo-classes are in CSS and provide three examples of pseudo-
classes and their use cases.
Ans: Pseudo-classes in CSS are used to define the special states or behaviors of HTML elements
that cannot be targeted with regular selectors. They begin with a colon and allow user to apply
styles to elements based on user interaction or element structure.
The three examples of pseudo classes in css are
Hover, focus and nth-child()
Hover: Adds styles when the mouse hovers over an element.
Focus: Styles elements when they receive input focus.
nth-child(): Selects and styles elements by their position in a parent container.
Question 10: Write a CSS selector that targets the first and last <li> elements within an <ul>
element with the class "list."
Ans: Select the first and last <li> elements within a <ul> element with the class 'list' using
the :first-child and :last-child pseudo-selectors in CSS.
Multiple Choice Questions
Question 1:
You have a paragraph element with the ID "intro-paragraph." Which CSS selector would you use to select this element?
a) #intro-paragraph b) .intro-paragraph c) [Link]-paragraph d) p#intro-paragraph
Question 2:
You want to select all <h2> elements within a <div> with the class "section." What CSS selector should you use?
a) .section h2 b) div .section h2 c) [Link] h2 d) div + .section h2
Question 3:
You have a list of items with the class "menu-item." You want to select only the even-numbered items in this list
using CSS. Which selector would you use?
a) .menu-item:nth-child(even) b) .menu-item:nth-child(odd) c) .menu-item:nth-of-
type(even) d) .menu-item:nth-of-type(odd)
Question 4:
You have a group of radio buttons with the name attribute set to "payment-method." How would you select all radio
buttons with this name using CSS?
a) [name="payment-method"] b) input[name="payment-method"] c) radio[name="payment-
method"] d) .payment-method input[type="radio"]
Question 5:
You want to select all elements with the class "highlight" that are descendants of an element with the class
"container." What CSS selector should you use?
a) .highlight .container b) .container .highlight c) .container > .highlight d)
.container .highlight >
Question 6:
You want to select the first child of every <ul> element within a <div> with the class "menu." Which selector
should you use?
a) [Link] ul:first-child b) .menu ul:first-child c) .menu > ul:first-child d)
[Link] > ul:first-child
Question 7:
You have a table with the class "data-table." How would you select all even rows (excluding the header row) in this
table using CSS?
a) .data-table tr:nth-child(even) b) .data-table tbody tr:nth-child(even) c)
.data-table tr:nth-of-type(even) d) .data-table tbody:nth-child(even) tr
Question 8:
You want to select the last <p> element within a <div> with the class "content." Which CSS selector should you
use?
a) .content p:last-child b) .content > p:last-child c) .content p:last-of-type d)
.content:last-child > p
Question 9:
You have a button element with the ID "submit-button." You want to select this button element using its ID. What
CSS selector should you use?
a) button#submit-button b) #submit-button c) [Link]-button d) .submit-button
Question 10:
You want to select all links (<a> elements) within a <nav> element that have the class "nav-link." What CSS
selector should you use?
a) nav [Link]-link b) nav .nav-link a c) .nav-link a d) a .nav-link nav
