Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 867 · 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 one shows the page to you? (a) the server (b) the browser (c) the URL (d) HTTPS
2. 2.💬 Why do coders write comments? (a) to make links (b) to add colour (c) to leave notes (d) to show pictures
3. 3.💬 Does the browser show comments on the page? (a) No (b) Yes
4. 4.📋 Which list suits a shopping list in any order? (a) <ul> (b) <ol> (c) <hr> (d) <br>
5. 5.⚡ What does JavaScript add to a web page? (a) the page title (b) actions and changes (c) the domain name (d) only colours
6. 6.🌐 Which one has an address bar? (a) a web server (b) a web browser (c) a code editor
7. 7.⚖️ What colour is the text of this element?
   <h1 class="star" id="logo">Hi</h1>
   CSS:
   h1 { color: white; }
   #logo { color: yellow; }
   .star { color: red; } (a) green (b) white (c) yellow (d) red
8. 8.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 22px;
     }
   }
9. 9.📋 How many items does this list show?
   <ul>
     <li>Guava</li>
     <li>Jamun</li>
     <li>Mango</li>
     <li>Banana</li>
   </ul>
10. 10.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
11. 11.🔁 How many times does this code print “Well done”?
    for (let i = 3; i < 7; i++) {
      console.log("Well done");
    }
12. 12.📊 How many cells are in each row?
    <table>
      <tr><td>Jamun</td><td>Jamun</td></tr>
      <tr><td>Guava</td><td>Papaya</td></tr>
      <tr><td>Grapes</td><td>Grapes</td></tr>
      <tr><td>Jamun</td><td>Grapes</td></tr>
    </table>
13. 13.🛡️ Should you share your password with your best friend? (a) Yes (b) No
14. 14.🖼️ How many pixels wide is the picture drawn?
    <img src="moon.png" alt="The full moon" width="100">
15. 15.Which of these is padding? (a) the line round the box (b) the gap to other boxes (c) space outside the border (d) space inside the border
16. 16.True or false: <header> holds the main content. (a) False (b) True
17. 17.True or false: HTML on its own can count button clicks. (a) True (b) False
18. 18.🎯 Which CSS selector matches this element?
    <div class="box" id="end">Hello</div> (a) .end (b) #hero (c) div (d) .star
19. 19.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) fits every screen (d) has no pictures
20. 20.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 2 boxes, each 80px wide (no margins).
21. 21.Which of these is true of <nav>? (a) holds a side box of tips (b) sits at the bottom (c) helps you move around (d) holds extra side notes
22. 22.🎯 Which CSS selector matches this element?
    <h2 class="big" id="logo">Hello</h2> (a) li (b) h2 (c) .logo (d) #end
23. 23.🖌️ How big is the text, in px?
    h2 {
      text-align: right;
      background-color: orange;
      font-size: 36px;
      color: black;
    }
24. 24.🎯 Which CSS selector matches this element?
    <div class="menu" id="logo">Hello</div> (a) #logo (b) .logo (c) #menu (d) span
25. 25.📦 In the box model, which part is the line round the box? (a) padding (b) margin (c) content (d) border
26. 26.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 12; i = i + 2) {
      console.log(i);
    }
27. 27.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 260px;
      padding: 25px;
      border: 2px solid black;
      margin: 10px;
    }
28. 28.🔍 Which line is missing its closing tag?
    line 1: <strong>Our school trip</strong>
    line 2: <small>The red kite
    line 3: <h1>Hello, world!</h1> (a) line 1 (b) line 3 (c) line 2
29. 29.🔤 In “HTML”, what does the L stand for? (a) Link (b) Language (c) Line (d) Laptop
30. 30.🚀 Which file should this code go in: <h1>My Site</h1> (a) style.css (b) script.js (c) index.html
31. 31.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
32. 32.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="dog.jpg" alt="A happy dog" width="50"> (a) width (b) The full moon (c) dog.jpg (d) A happy dog
33. 33.🏷️ Which is the closing tag for <p>? (a) </p> (b) <\p> (c) <p> (d) <p/>
34. 34.🔗 Which address opens when you click this link?
    <a href="maths.html">Contact us</a> (a) maths.html (b) news.html (c) Contact us (d) art.html
35. 35.🔍 One closing tag is missing. Which one?
    <h3>My pets</h3>
    <b>Fun facts
    <p>The red kite</p> (a) </em> (b) </h3> (c) </b> (d) </p>
36. 36.True or false: <td> holds the whole table. (a) False (b) True
37. 37.🛡️ Online: is it safe to tell a trusted adult? (a) not safe (b) safe
38. 38.🔠 Which heading shows the SMALLEST text: <h3>, <h2>, <h1> or <h6>? (a) <h2> (b) <h6> (c) <h3> (d) <h1>
39. 39.🔍 Which line is missing its closing tag?
    line 1: <h2>Fun facts
    line 2: <em>I love mangoes.</em>
    line 3: <i>My best friend</i> (a) line 1 (b) line 2 (c) line 3
40. 40.🔢 In a basic web page file, which comes FIRST? (a) <html> (b) <!DOCTYPE html> (c) </head> (d) <head>

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