Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 668 · 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 many rows does this table have?
   <table>
     <tr><td>Mango</td><td>Orange</td><td>Papaya</td><td>Litchi</td></tr>
     <tr><td>Jamun</td><td>Papaya</td><td>Banana</td><td>Orange</td></tr>
     <tr><td>Guava</td><td>Mango</td><td>Jamun</td><td>Guava</td></tr>
   </table>
2. 2.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) 600px or narrower (d) turned off
3. 3.📊 In a table, which tag is a row? (a) <th> (b) <td> (c) <tb> (d) <tr>
4. 4.🔍 Which is the odd one out? (a) shows a pop-up message (b) lays out the page (c) changes the page live (d) reacts to a button click
5. 5.📝 Does <p> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
6. 6.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 18px;
     }
   }
7. 7.♿ Does this help everyone, or make the page harder to use: add alt text to images? (a) makes it harder (b) helps everyone
8. 8.🔗 Where does this link open?
   <a href="contact.html">Visit the site</a> (a) in the same tab (b) in a new tab
9. 9.True or false: HTTPS stores the site’s files. (a) False (b) True
10. 10.🎯 Can many elements share the same class? (a) Yes (b) No
11. 11.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
12. 12.Which of these goes in the body? (a) <title> (b) <link rel="stylesheet"> (c) <ul> (d) <style>
13. 13.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 20px;
      border: 3px solid black;
      margin: 10px;
    }
14. 14.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: center;
    }
    Inside are 3 boxes, each 40px wide (no margins).
15. 15.🔠 Which heading shows the BIGGEST text: <h4>, <h6>, <h3> or <h2>? (a) <h3> (b) <h6> (c) <h4> (d) <h2>
16. 16.🔠 Which heading shows the BIGGEST text: <h5>, <h2>, <h1> or <h4>? (a) <h5> (b) <h1> (c) <h4> (d) <h2>
17. 17.🛡️ Online: is it safe to put secrets in comments? (a) not safe (b) safe
18. 18.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 20px;
      text-align: center;
      color: white;
      background-color: green;
    } (a) in the middle (b) on the right (c) on the left
19. 19.True or false: in <img>, height shows if the image fails. (a) True (b) False
20. 20.What does justify-content: space-between do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
21. 21.📄 Can HTML on its own count button clicks? (a) Yes (b) No
22. 22.⚡ What does alert() show? (a) a pop-up box (b) a table (c) a picture (d) a new tab
23. 23.Which of these goes in the head? (a) <p> (b) <img> (c) <style> (d) <table>
24. 24.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    .big { color: yellow; }
    p { color: orange; } (a) yellow (b) blue (c) black (d) orange
25. 25.⚡ What number does this code print?
    let score = 29;
    score = score + 19;
    score = score - 18;
    console.log(score);
26. 26.💬 Which text will NOT show on the page?
    <!-- <p>Good morning!</p> -->
    <p>Hello, world!</p>
    <p>Cricket is fun.</p> (a) Hello, world! (b) Cricket is fun. (c) Good morning!
27. 27.🧩 An opening tag + content + a closing tag together make an ___. (a) editor (b) address (c) element (d) attribute
28. 28.True or false: HTML makes headings and lists. (a) True (b) False
29. 29.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) exactly 100px (c) turned off (d) 800px or narrower
30. 30.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 5px;
      border: 1px solid black;
      margin: 20px;
    }
31. 31.⚡ What number does this code print?
    let a = 3;
    let b = 9;
    console.log(a * b);
32. 32.🖼️ Does <img> need a closing tag? (a) No (b) Yes
33. 33.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
34. 34.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Grapes</td><td>Banana</td><td>Litchi</td></tr>
      <tr><td>Grapes</td><td>Jamun</td><td>Litchi</td></tr>
    </table>
35. 35.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
36. 36.🔗 What does target="_blank" do to a link? (a) hides the link (b) makes it blank (c) opens it in a new tab (d) makes it bold
37. 37.✍️ What is the selector in this CSS rule?
    .box {
      background-color: yellow;
      border: 2px solid;
      color: red;
      font-style: italic;
    } (a) h2 (b) .box (c) 2px solid (d) background-color
38. 38.💾 A web page file usually ends with which extension? (a) .html (b) .png (c) .mp3 (d) .txt
39. 39.💬 How many paragraphs show on the page?
    <p>I love mangoes.</p>
    <!-- <p>Fun facts</p> -->
    <p>Our school trip</p>
    <!-- <p>The red kite</p> -->
    <!-- <p>My pets</p> -->
40. 40.📋 Which list tag is an unordered list? (a) <ul> (b) <li> (c) <ol>

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