Scribd
Upload
20 views8 pages

Front End Development

The document contains a midterm exam for a front-end development course. It includes 10 multiple choice questions testing knowledge of HTML, CSS selectors, and pseudo-classes. It also includes 10 short answer questions requiring code snippets or explanations of concepts.

Uploaded by

pawaankarki12345
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views8 pages

Front End Development

The document contains a midterm exam for a front-end development course. It includes 10 multiple choice questions testing knowledge of HTML, CSS selectors, and pseudo-classes. It also includes 10 short answer questions requiring code snippets or explanations of concepts.

Uploaded by

pawaankarki12345
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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 "image.jpg" 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="image.jpg" 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:

p.highlight {

/* 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="https://www.example.com">Visit Example</a>

<a href="https://www.google.com">Visit Google</a>

<a href="https://www.yahoo.com" 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) p.intro-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) div.section 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) div.menu ul:first-child b) .menu ul:first-child c) .menu > ul:first-child d)


div.menu > 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) button.submit-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 a.nav-link b) nav .nav-link a c) .nav-link a d) a .nav-link nav

You might also like