Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 974 · 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.📝 Which input type picks a day? (a) submit (b) checkbox (c) date (d) number
2. 2.🎯 What kind of selector is #hero? (a) a class selector (b) an element selector (c) an id selector
3. 3.True or false: <td> holds the whole table. (a) False (b) True
4. 4.⚖️ What colour is the text of this element?
   <p class="red" id="end">Hi</p>
   CSS:
   .red { color: purple; }
   p { color: green; } (a) green (b) purple (c) blue (d) orange
5. 5.📝 Which input type hides what you type? (a) date (b) password (c) submit (d) text
6. 6.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 4; i++) {
     total = total + i;
   }
   console.log(total);
7. 7.Which colour pair is hard to read? (a) yellow on black (b) dark grey on white (c) white on dark blue (d) yellow on white
8. 8.📝 Which input type is for one line of words? (a) number (b) submit (c) text (d) password
9. 9.True or false: <ul> shows bullet points. (a) False (b) True
10. 10.🧩 Which language adds space around boxes? (a) CSS (b) JavaScript (c) HTML
11. 11.⚡ Which JavaScript word repeats code? (a) if (b) for (c) let (d) console.log()
12. 12.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 360px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 80px wide (no margins).
13. 13.🔁 What does i++ do? (a) takes 1 from i (b) prints i (c) doubles i (d) adds 1 to i
14. 14.📋 What number does the browser show next to “Orange”?
    <ol>
      <li>Jamun</li>
      <li>Orange</li>
      <li>Mango</li>
    </ol>
15. 15.🖼️ How many pixels wide is the picture drawn?
    <img src="cake.jpg" alt="Birthday cake" width="250">
16. 16.🌍 What do we call the computer that stores a website? (a) a mouse (b) a keyboard (c) a server (d) a printer
17. 17.✍️ What is the selector in this CSS rule?
    #top {
      background-color: yellow;
      color: red;
    } (a) background-color (b) li (c) #top (d) red
18. 18.📝 Which input type lets you pick only one? (a) date (b) number (c) radio (d) password
19. 19.💬 How does an HTML comment end? (a) // (b) >> (c) */ (d) -->
20. 20.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the title tag (c) the hr tag (d) the viewport meta tag
21. 21.What does color do? (a) centres a heading (b) colours behind the text (c) sets the letter colour (d) makes the text bold
22. 22.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is fast (b) the site is free (c) the site is a game (d) the data is scrambled
23. 23.Which of these is safe to do online? (a) meet an online stranger (b) share your password (c) post your home address (d) ask before downloading
24. 24.🔢 On a typical page, from top to bottom, which comes FIRST? (a) <footer> (b) <main> (c) <nav> (d) <header>
25. 25.What is <input type="email"> for? (a) is for an email address (b) hides what you type (c) takes only numbers (d) lets you tick many
26. 26.🖼️ Which picture file does the browser load?
    <img src="tiger.jpg" alt="A tiger asleep" width="150"> (a) kite.png (b) A tiger asleep (c) map.png (d) tiger.jpg
27. 27.🔗 What does target="_blank" do to a link? (a) makes it blank (b) hides the link (c) makes it bold (d) opens it in a new tab
28. 28.🎯 Which CSS selector matches this element?
    <span class="star" id="end">Hello</span> (a) .menu (b) .star (c) .end (d) #star
29. 29.🖼️ How many pixels wide is the picture drawn?
    <img src="kite.png" alt="A red kite" width="50">
30. 30.🚀 You change your code. What should you do to see the change? (a) switch off the PC (b) rename the folder (c) save and refresh (d) delete the file
31. 31.⚡ What does this code print? (Look at the quotes!)
    let x = "9";
    let y = 5;
    console.log(x + y); (a) Error (b) 95 (c) 14
32. 32.🖌️ Which CSS property colours behind the text? (a) font-family (b) font-weight (c) font-size (d) background-color
33. 33.✍️ What value is given to border in this rule?
    #top {
      border: 2px solid;
      width: 300px;
      font-size: 20px;
      font-style: italic;
    } (a) italic (b) 2px solid (c) border (d) 300px
34. 34.🖼️ Which attribute of <img> is read by screen readers? (a) width (b) src (c) alt (d) height
35. 35.✍️ What is the selector in this CSS rule?
    h1 {
      text-align: center;
      color: red;
      font-weight: bold;
    } (a) text-align (b) red (c) p (d) h1
36. 36.True or false: in <img>, height tells which image to load. (a) True (b) False
37. 37.🔗 Where does this link open?
    <a href="art.html" target="_blank">Play games</a> (a) in the same tab (b) in a new tab
38. 38.True or false: a web browser shows line numbers. (a) False (b) True
39. 39.🔢 In a basic web page file, which comes first: “<html>” or “</html>”? (a) <html> (b) </html>
40. 40.⚖️ What colour is the text of this element?
    <h1 class="red" id="main">Hi</h1>
    CSS:
    h1 { color: red; }
    #main { color: yellow; }
    .red { color: black; } (a) red (b) yellow (c) white (d) black

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