Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 6 · 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.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) { } (d) [ ]
2. 2.🔗 Which tag makes a clickable link? (a) <p> (b) <img> (c) <a> (d) <link>
3. 3.🚀 Where in index.html does the link to style.css go? (a) in the footer (b) in the head (c) inside a <p> (d) after </html>
4. 4.🎯 Which element does the selector .note style? (a) <h1 class="note"> (b) <h1 class="big"> (c) <h2 class="red"> (d) <h1 id="note">
5. 5.🔁 Which word runs code only when something is true? (a) log (b) let (c) for (d) if
6. 6.📄 What is the first line of an HTML5 page? (a) <head> (b) <html> (c) <body> (d) <!DOCTYPE html>
7. 7.✍️ How does a CSS comment start? (a) <!-- (b) // (c) /* (d) #
8. 8.🖼️ How many pixels wide is the picture drawn?
   <img src="map.png" alt="Map of India" width="100">
9. 9.📊 How many rows does this table have?
   <table>
     <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
     <tr><td>Grapes</td><td>Papaya</td><td>Papaya</td></tr>
   </table>
10. 10.📝 Which input type takes only numbers? (a) date (b) number (c) text (d) email
11. 11.💬 Which text will NOT show on the page?
    <!-- <p>My best friend</p> -->
    <p>Our school trip</p>
    <p>The red kite</p> (a) Our school trip (b) The red kite (c) My best friend
12. 12.📋 Which list shows the steps of a recipe best? (a) <ul> (b) <hr> (c) <br> (d) <ol>
13. 13.🔍 Which is the odd one out? (a) rounds box corners (b) lays out the page (c) makes headings and lists (d) changes the text size
14. 14.🚀 Which file should this code go in: body { margin: 0; } (a) index.html (b) script.js (c) style.css
15. 15.True or false: to type a password on http is not safe. (a) False (b) True
16. 16.Which of these is not safe to do online? (a) check for https first (b) ask before downloading (c) download from pop-ups (d) log out on shared PCs
17. 17.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 3; i++) {
      total = total + i;
    }
    console.log(total);
18. 18.🏷️ Which is the closing tag for <p>? (a) <p/> (b) </p> (c) <p> (d) <\p>
19. 19.🖌️ How big is the text, in px?
    li {
      text-align: right;
      background-color: yellow;
      font-size: 24px;
      color: blue;
    }
20. 20.True or false: alert(score); goes in script.js. (a) False (b) True
21. 21.🏷️ Is </title> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
22. 22.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Orange</td><td>Jamun</td><td>Orange</td></tr>
      <tr><td>Orange</td><td>Litchi</td><td>Jamun</td></tr>
      <tr><td>Jamun</td><td>Orange</td><td>Jamun</td></tr>
    </table>
23. 23.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) Z (c) J (d) F
24. 24.What is <input type="password"> for? (a) picks a day (b) takes only numbers (c) hides what you type (d) sends the form
25. 25.📋 How many items does this list show?
    <ul>
      <li>Papaya</li>
      <li>Litchi</li>
      <li>Mango</li>
    </ul>
26. 26.True or false: <li> goes inside ul or ol. (a) False (b) True
27. 27.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
28. 28.💬 How does an HTML comment start? (a) /* (b) # (c) // (d) <!--
29. 29.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 5; i = i + 2) {
      console.log(i);
    }
30. 30.📋 How many items does this list show?
    <ul>
      <li>Papaya</li>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Mango</li>
      <li>Guava</li>
      <li>Jamun</li>
    </ul>
31. 31.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h4> → <h5> (a) Yes (b) No
32. 32.♿ Does this help everyone, or make the page harder to use: use headings in order? (a) helps everyone (b) makes it harder
33. 33.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
34. 34.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 120px;
      padding: 25px;
      border: 4px solid black;
      margin: 0px;
    }
35. 35.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="dog.jpg" alt="A happy dog" width="350"> (a) The full moon (b) width (c) dog.jpg (d) A happy dog
36. 36.🔍 Which line is missing its closing tag?
    line 1: <p>Hello, world!
    line 2: <em>Rain today</em>
    line 3: <strong>Fun facts</strong> (a) line 2 (b) line 1 (c) line 3
37. 37.🎯 Which CSS selector matches this element?
    <p class="big" id="top">Hello</p> (a) #big (b) .red (c) h1 (d) .big
38. 38.✍️ Which property is set to 300px in this rule?
    .note {
      font-size: 20px;
      width: 300px;
    } (a) color (b) 300px (c) font-style (d) width
39. 39.Which of these is safe to do online? (a) download from pop-ups (b) ask before downloading (c) share your OTP (d) click prize links
40. 40.📝 What does <hr> draw? (a) a picture (b) a table (c) a link (d) a line across the page

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