Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 603 · 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.✍️ What is the selector in this CSS rule?
   li {
     margin: 10px;
     border: 2px solid;
     font-style: italic;
     padding: 8px;
   } (a) 2px solid (b) body (c) li (d) margin
2. 2.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) type the password (b) click it twice (c) share it with friends (d) close it, tell an adult
3. 3.True or false: “add alt text to images” helps everyone use the page. (a) False (b) True
4. 4.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 120px;
     padding: 10px;
     border: 4px solid black;
     margin: 20px;
   }
5. 5.🎯 Can many elements share the same class? (a) Yes (b) No
6. 6.🏷️ Is <title> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
7. 7.True or false: <input type="checkbox"> lets you tick many. (a) False (b) True
8. 8.Which of these goes in the body? (a) <a> (b) <title> (c) <style> (d) <meta charset="utf-8">
9. 9.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the title tag (c) the viewport meta tag (d) the hr tag
10. 10.🔁 Which loop repeats code a set number of times? (a) if (b) let (c) else (d) for
11. 11.🔗 Which address opens when you click this link?
    <a href="quiz.html">Take the quiz</a> (a) about.html (b) Take the quiz (c) quiz.html (d) games.html
12. 12.🔁 What does this code print?
    let marks = 2;
    if (marks < 18) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Try again (b) Pass
13. 13.🔗 Which attribute holds the address of a link? (a) id (b) src (c) alt (d) href
14. 14.🧩 Which language shows a pop-up message? (a) CSS (b) HTML (c) JavaScript
15. 15.🌈 Which colour is rgb(255, 0, 0)? (a) bright green (b) cyan (c) red (d) blue
16. 16.♿ Which link text is clearest? (a) here (b) Read the fruit facts (c) click here (d) link
17. 17.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 180px;
      padding: 10px;
      border: 3px solid black;
      margin: 20px;
    }
18. 18.Which colour pair is hard to read? (a) white on black (b) white on dark blue (c) yellow on white (d) yellow on black
19. 19.What does font-size do? (a) makes letters bigger (b) colours behind the text (c) makes the text bold (d) centres a heading
20. 20.🔍 Which is the odd one out? (a) counts down a timer (b) changes the text size (c) rounds box corners (d) sets colours and fonts
21. 21.✍️ Which property is set to yellow in this rule?
    p {
      background-color: yellow;
      border: 2px solid;
    } (a) padding (b) margin (c) yellow (d) background-color
22. 22.🌗 Is light grey on white easy or hard to read? (a) easy to read (b) hard to read
23. 23.📝 Which tag holds a whole form? (a) <form> (b) <table> (c) <input> (d) <ol>
24. 24.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or narrower (d) 600px or wider
25. 25.True or false: the content is the line round the box. (a) False (b) True
26. 26.🌈 In #005800 the green part is the hex number 58. What is it as a normal number?
27. 27.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h4> → <h4> (a) Yes (b) No
28. 28.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 60px wide (no margins).
29. 29.🌍 Which one sends the page back? (a) the browser (b) the URL (c) HTTPS (d) the server
30. 30.📋 What number does the browser show next to “Papaya”?
    <ol>
      <li>Guava</li>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Mango</li>
      <li>Litchi</li>
      <li>Papaya</li>
    </ol>
31. 31.Which of these is an empty tag? (a) <h1> (b) <ul> (c) <hr> (d) <b>
32. 32.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) flex-end (d) center
33. 33.💪 Which justify-content value puts boxes in the middle? (a) center (b) space-between (c) flex-start (d) flex-end
34. 34.📝 Does <h1> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
35. 35.📋 Which list suits a shopping list in any order? (a) <ul> (b) <hr> (c) <br> (d) <ol>
36. 36.True or false: <input type="radio"> is for one line of words. (a) False (b) True
37. 37.🖌️ How big is the text, in px?
    h1 {
      background-color: white;
      text-align: left;
      font-size: 28px;
      color: black;
    }
38. 38.💪 Which flexbox property sets space between boxes? (a) gap (b) flex-direction (c) display: flex (d) align-items
39. 39.⚡ What number does this code print?
    let a = 7;
    let b = 26;
    console.log(a + b);
40. 40.🎯 Which CSS selector matches this element?
    <h2 class="note" id="hero">Hello</h2> (a) #hero (b) #note (c) #top (d) li

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