Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 928 · 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 much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 190px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 50px wide (no margins).
2. 2.♿ What does good colour contrast mean? (a) text stands out clearly (b) no colours at all (c) only red text (d) many bright colours
3. 3.True or false: in <img>, src shows if the image fails. (a) True (b) False
4. 4.🛡️ Online: is it safe to check for https first? (a) not safe (b) safe
5. 5.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 230px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 100px wide (no margins).
6. 6.📋 How many items does this list show?
   <ul>
     <li>Papaya</li>
     <li>Litchi</li>
     <li>Guava</li>
   </ul>
7. 7.📋 What number does the browser show next to “Banana”?
   <ol start="3">
     <li>Jamun</li>
     <li>Papaya</li>
     <li>Mango</li>
     <li>Banana</li>
     <li>Orange</li>
   </ol>
8. 8.♿ A part of the page is under a <h1> heading. Which tag should its sub-heading use? (a) <h2> (b) <h5> (c) <h3> (d) <h4>
9. 9.🧭 Which semantic tag holds the menu of links? (a) <article> (b) <nav> (c) <main> (d) <footer>
10. 10.🖼️ How many pixels wide is the picture drawn?
    <img src="fort.jpg" alt="An old fort" width="100">
11. 11.📄 Which part holds everything you see on the page? (a) the title (b) the head (c) the doctype (d) the body
12. 12.🌈 Which hex code is bright green? (a) #00ff00 (b) #0000ff (c) #ffffff (d) #00ffff
13. 13.True or false: “add alt text to images” makes the page harder to use. (a) False (b) True
14. 14.🛡️ Online: is it safe to share your OTP? (a) safe (b) not safe
15. 15.🔁 How many times does this code print “Hi”?
    for (let i = 2; i < 4; i++) {
      console.log("Hi");
    }
16. 16.Which of these does HTML do? (a) adds space around boxes (b) rounds box corners (c) gives the page structure (d) reacts to a button click
17. 17.📝 Which tag makes a big box for many lines of text? (a) <p> (b) <input> (c) <br> (d) <textarea>
18. 18.🔗 Which address opens when you click this link?
    <a href="games.html">Take the quiz</a> (a) Take the quiz (b) games.html (c) contact.html (d) about.html
19. 19.🔗 Which words do you click on?
    <a href="maths.html">Take the quiz</a> (a) Play games (b) Take the quiz (c) href (d) maths.html
20. 20.True or false: “write clear link text” makes the page harder to use. (a) True (b) False
21. 21.True or false: the content is the gap to other boxes. (a) False (b) True
22. 22.🔗 Where does this link open?
    <a href="about.html" target="_blank">About us</a> (a) in the same tab (b) in a new tab
23. 23.⚖️ What colour is the text of this element?
    <p class="red" id="main">Hi</p>
    CSS:
    .red { color: red; }
    .red { color: orange; } (a) white (b) orange (c) red (d) yellow
24. 24.✍️ How does a CSS comment start? (a) /* (b) <!-- (c) # (d) //
25. 25.True or false: to tell a trusted adult is safe. (a) False (b) True
26. 26.🧭 Why use <nav> instead of <div> for a menu? (a) it makes text red (b) it adds pictures (c) it tells its meaning (d) it loads faster
27. 27.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      color: red;
    }
28. 28.🖌️ Which CSS property makes the text bold? (a) font-size (b) color (c) font-weight (d) background-color
29. 29.🖼️ Which tag puts a picture on a page? (a) <a> (b) <img> (c) <p> (d) <pic>
30. 30.Which of these is true of <nav>? (a) holds the logo and title (b) is the page’s key part (c) holds the menu of links (d) holds the main content
31. 31.✍️ What value is given to margin in this rule?
    p {
      margin: 10px;
      border: 2px solid;
      text-align: center;
    } (a) 8px (b) bold (c) margin (d) 10px
32. 32.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 16px;
      }
    }
33. 33.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
34. 34.♿ Is this heading order correct (no level skipped)?
    <h1> → <h1> → <h2> → <h2> (a) Yes (b) No
35. 35.📋 How many items does this list show?
    <ul>
      <li>Guava</li>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Mango</li>
      <li>Papaya</li>
      <li>Jamun</li>
    </ul>
36. 36.🔠 Which heading shows the BIGGEST text: <h6>, <h3>, <h1> or <h4>? (a) <h1> (b) <h4> (c) <h6> (d) <h3>
37. 37.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 4 (c) 3 (d) 2
38. 38.🔒 Is the connection to this address scrambled (encrypted)?
    http://www.example.net/maths/tables.html (a) Yes (b) No
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      padding: 8px;
      font-size: 20px;
    }
40. 40.📋 How many items does this list show?
    <ul>
      <li>Banana</li>
      <li>Grapes</li>
      <li>Mango</li>
      <li>Litchi</li>
      <li>Papaya</li>
      <li>Orange</li>
    </ul>

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