Web Development Examination
Total Marks: 75 Time: 3 Hours
Group A
Answer all questions. (5 x 2 = 10 Marks)
1. What is the purpose of the <!DOCTYPE html> declaration at the top of an HTML file?
2. Differentiate between id and class selectors in CSS.
3. Explain the importance of the alt attribute in an <img> tag.
4. What is a media query in CSS and what is its primary function?
5. Define "semantic HTML" and provide two examples of semantic tags.
Group B
Answer all questions.
Section I (5 x 5 = 25 Marks)
6. Explain the CSS box model. Draw a labeled diagram to illustrate its components (content,
padding, border, and margin).
7. What are the advantages of using a CSS framework like Bootstrap or Tailwind CSS over writing
custom CSS from scratch? List at least three advantages.
8. Describe the key steps to deploy a static website to a service like GitHub Pages.
9. Write the HTML code to embed a video file named intro.mp4. The video should be 600 pixels
wide, auto-play (muted), and display player controls. Include fallback text for older browsers.
10. What is the difference between responsive web design and adaptive web design?
Section II (4 x 10 = 40 Marks)
11. Create a complete HTML page structure for a simple "Contact Us" form. The form should include
fields for Name (text input), Email (email input), a Message (textarea), and a Submit button. Use
appropriate <label> tags for accessibility. You do not need to write CSS for this question.
12. You are given the following HTML structure. Write the CSS code to create a flexible three-
column layout using Flexbox. The .container should be the flex container, and the .box items
should be evenly distributed with space between them. On screens narrower than 600px, the boxes
should stack vertically.
xml
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
13. Explain the concept of a "grid system" in a CSS framework like Bootstrap. Provide a code
example to create a responsive two-column layout. The layout should have one column taking up
8 units of space and the other taking up 4 units on medium screens and larger, but they should
stack on top of each other on small screens.
14. Discuss five essential web development best practices for improving a website's performance and
accessibility. For each practice, briefly explain its importance. (Examples: image optimization,
code minification, browser caching, ARIA roles, etc.)