Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 249 · 40 questions

Code tip (Read it like a browser): Find the topic: HTML, CSS, JavaScript or how the web works. Read the code line by line, the way a browser would. For sums and loops, write each step down and check it again.

1. 1.🖼️ How many pixels wide is the picture drawn?
   <img src="map.png" alt="Map of India" width="200">
2. 2.🖼️ Why do we add alt text to an image? (a) to colour it (b) to make it bigger (c) to describe the image (d) to load it faster
3. 3.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 440px;
     justify-content: space-between;
   }
   Inside are 3 boxes, each 100px wide (no margins).
4. 4.📱 What does a media query check? (a) the battery level (b) the page title (c) the time of day (d) the screen width
5. 5.True or false: <img> goes in the body. (a) False (b) True
6. 6.🌗 Is yellow on black easy or hard to read? (a) hard to read (b) easy to read
7. 7.True or false: a web browser has an address bar. (a) False (b) True
8. 8.🖌️ What colour is behind the letters?
   h1 {
     font-size: 16px;
     background-color: white;
     text-align: right;
     color: red;
   } (a) white (b) black (c) red
9. 9.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 14px;
     }
   }
10. 10.True or false: JavaScript changes the page live. (a) False (b) True
11. 11.💬 Does the browser show comments on the page? (a) Yes (b) No
12. 12.🔢 In a basic web page file, which comes first: “<body>” or “<html>”? (a) <body> (b) <html>
13. 13.Which of these does JavaScript do? (a) lays out the page (b) changes the text size (c) makes headings and lists (d) checks a quiz answer
14. 14.🖼️ Which attribute of <img> is read by screen readers? (a) width (b) alt (c) src (d) height
15. 15.🔍 Which is the odd one out? (a) changes the text size (b) rounds box corners (c) lays out the page (d) counts down a timer
16. 16.True or false: the content is space outside the border. (a) True (b) False
17. 17.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h2> → <h3> (a) No (b) Yes
18. 18.True or false: padding is space inside the border. (a) True (b) False
19. 19.♿ Does this help everyone, or make the page harder to use: tiny grey text? (a) makes it harder (b) helps everyone
20. 20.🌈 Which colour is rgb(255, 255, 0)? (a) cyan (b) red (c) yellow (d) white
21. 21.📊 In a table, which tag is a row? (a) <tb> (b) <td> (c) <tr> (d) <th>
22. 22.🚀 Which file should this code go in: .box { padding: 8px; } (a) style.css (b) script.js (c) index.html
23. 23.Which colour pair is easy to read? (a) black on white (b) light grey on white (c) red on green (d) yellow on white
24. 24.True or false: a web browser is where we type code. (a) False (b) True
25. 25.⚖️ What colour is the text of this element?
    <p class="menu" id="intro">Hi</p>
    CSS:
    p { color: blue; }
    p { color: orange; } (a) blue (b) red (c) purple (d) orange
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      border: 2px solid;
    }
27. 27.🛡️ Online: is it safe to ask before downloading? (a) not safe (b) safe
28. 28.🔠 Which heading shows the BIGGEST text: <h5>, <h6>, <h2> or <h1>? (a) <h2> (b) <h5> (c) <h1> (d) <h6>
29. 29.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="tiger.jpg" alt="A tiger asleep" width="400"> (a) width (b) A tiger asleep (c) A red kite (d) tiger.jpg
30. 30.🌍 Which program shows a web page to us? (a) a calculator (b) a web browser (c) a paint program (d) a music player
31. 31.True or false: <li> is an empty tag. (a) True (b) False
32. 32.🔁 Which word runs code only when something is true? (a) log (b) let (c) for (d) if
33. 33.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) makes it harder (b) helps everyone
34. 34.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 5px;
      border: 5px solid black;
      margin: 5px;
    }
35. 35.🌍 What is the protocol in this URL?
    https://learn.example.com/index.html (a) http (b) learn.example.com (c) /index.html (d) https
36. 36.⚖️ What colour is the text of this element?
    <p class="red" id="main">Hi</p>
    CSS:
    p { color: orange; }
    p { color: yellow; } (a) white (b) yellow (c) orange (d) green
37. 37.🎯 Which sign starts a class selector? (a) @ (b) & (c) . (d) #
38. 38.📋 Which list tag is an ordered list? (a) <ol> (b) <li> (c) <ul>
39. 39.Which of these goes in the head? (a) <table> (b) <link rel="stylesheet"> (c) <h1> (d) <a>
40. 40.⚖️ What colour is the text of this element?
    <h2 class="red" id="hero">Hi</h2>
    CSS:
    .red { color: green; }
    .red { color: yellow; } (a) black (b) green (c) yellow (d) red

Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids