Frontend Developer (HTML, CSS, JS)
(Sample Paper - Practice Set)
Total Marks: 50 Duration 90 Mins
Instructions:
1. There are a total of 29 questions.
2. All 25 MCQs, which are spread across Section A to Section C, are
compulsory, and each question carries 1 mark.
3. The coding questions are spread across Section D to Section F.
4. Section D and Section E are mandatory and carry 5 marks and 8 marks
respectively.
5. Section F includes 2 questions, out of which you need to attempt only
one, and it carries 12 marks.
Section-A 10 Marks
1. Which of the following best describes a web application?
A) Software that only runs on desktop OS
B) Application accessed via a web browser over a network
C) Native mobile application installed from an app store
D) A program that never interacts with servers
2. Which technology is primarily used to build the frontend of a full-stack web
application?
A) [Link]
B) MySQL
C) HTML/CSS/JavaScript
D) [Link]
3. Which statement best defines a client in Client–Server architecture?
A) Software that permanently hosts resources
B) The requester of resources/services from a server
C) A hardware-only device with no software
D) A protocol like HTTP
4. Which component of a browser is responsible for parsing HTML into the DOM?
A) JS Engine
B) Rendering Engine
C) Network Layer
D) HTML Parser inside the rendering pipeline
5. Which header helps a browser know the character encoding of a document?
A) Content-Type
B) User-Agent
C) Accept-Encoding
D) Cache-Control
6. Which is the best description of the render tree?
A) Tree of network endpoints
B) Combination of DOM and CSSOM used for layout and paint
C) File directory structure of the project
D) Browser’s history stack
7. Which tag defines the document title shown in the browser tab?
A) <meta>
B) <title>
C) <header>
D) <h1>
8. Which attribute provides alternative text for an image?
A) title
B) alt
C) caption
D) desc
9. What is the default display property of <span>?
A) block
B) inline
C) flex
D) grid
10. Which element best groups a caption with an image?
A) <figure> with <figcaption>
B) <div> only
C) <img> with title attribute only
D) <caption>
Section-B 10 Marks
11. Which HTML element is used for marking up self-contained content that could
be distributed independently?
A) <article>
B) <header>
C) <footer>
D) <aside>
12. Which of these is true about the <head> section?
A) It is visible in page body by default
B) It contains metadata like <meta>, <link>, <title>
C) It must contain the main site content
D) It cannot include <script> tags
13. Which input type allows selecting a color?
A) type="color"
B) type="pickcolor"
C) type="palette"
D) type="image"
14. Which of these tags is used for preformatted text preserving whitespace?
A) <pre>
B) <p>
C) <code>
D) <samp>
15. Which of the following is NOT a valid value for the display property?
A) inline-block
B) flex
C) matrix
D) grid
16. Which tag should you use for the most important heading on a page?
A) <h1>
B) <h6>
C) <header>
D) <strong>
17. What will the browser render for this snippet?
<p>First <p>Second</p> Third</p>
A) First then Second then Third in separate paragraphs
B) Browser auto-closes the first <p>, resulting in two paragraphs: "First" and
"Second Third"
C) Syntax error, nothing renders
D) A single paragraph containing all text
18. Which element is appropriate to mark a sidebar with tangential content?
A) <aside>
B) <section>
C) <main>
D) <nav>
19. Which tag helps improve SEO when marking the author of a cited work?
A) <cite>
B) <author>
C) <meta name="author">
D) <byline>
20.Which is the correct order of events when loading a page?
A) DOMContentLoaded fires after all images and styles are loaded
B) DOMContentLoaded fires when HTML is parsed and DOM built (before
images finish)
C) load event is fired before DOMContentLoaded
D) DOMContentLoaded and load fire simultaneously
Section-C Marks -5
21. In HTML, which of the following is a VOID element?
A) <span>
B) <img>
C) <figure>
D) <pre>
22.Which HTML attribute defines the correct relative path?
A) src="/images/[Link]"
B) src="C:\photos\[Link]"
C) src="http//[Link]"
D) src="\[Link]"
23.Which display property removes elements from layout flow AND from
rendering?
A) visibility:hidden
B) display:none
C) opacity:0
D) position:absolute
24.Given:
div{
width:200px;
padding:20px;
border:10px solid;
box-sizing:border-box;
}
Total rendered width?
A) 200px
B) 240px
C) 260px
D) 280px
25.How many table rows render?
<table>
<tr><td>A
<tr><td>B</td></tr>
</table>
A) 1
B) 2
C) 3
D) Error
Coding Questions
Section-D Marks-5
26.Design the below shown Table:
Section-E Marks-8
27.Design the below shown Navbar:
Section-F Marks-12
Attempt only 1 question out of these two questions.
28.Design the below shown Form using HTML and CSS:
29.Design the below shown List using HTML and CSS: