Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 28 · 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 headings are in this code?
   <h1>Rain today</h1>
   <h2>My best friend</h2>
   <p>Rain today</p>
   <h3>Our school trip</h3>
2. 2.🎯 What kind of selector is p? (a) an element selector (b) a class selector (c) an id selector
3. 3.📝 What does a password box show instead of letters? (a) emojis (b) capital letters (c) numbers (d) dots
4. 4.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 14px;
     }
   } (a) Yes (b) No
5. 5.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 6px;
     }
   }
6. 6.⚖️ What colour is the text of this element?
   <h2 class="box" id="end">Hi</h2>
   CSS:
   .box { color: black; }
   .box { color: yellow; } (a) green (b) yellow (c) black (d) white
7. 7.True or false: <th> makes one table row. (a) False (b) True
8. 8.✍️ Which sign ends each CSS declaration? (a) . (b) ; (c) , (d) :
9. 9.📋 Which list tag is an ordered list? (a) <ol> (b) <li> (c) <ul>
10. 10.✍️ What value is given to font-size in this rule?
    #top {
      font-size: 20px;
      border: 2px solid;
    } (a) font-size (b) 20px (c) yellow (d) center
11. 11.True or false: <td> makes one data cell. (a) True (b) False
12. 12.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    #end { color: yellow; }
    p { color: red; }
    .big { color: purple; } (a) black (b) purple (c) red (d) yellow
13. 13.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Mango</td><td>Jamun</td><td>Grapes</td></tr>
      <tr><td>Litchi</td><td>Mango</td><td>Mango</td></tr>
    </table>
14. 14.🧩 Which language adds space around boxes? (a) HTML (b) CSS (c) JavaScript
15. 15.🔍 One closing tag is missing. Which one?
    <h3>Our school trip
    <small>I love mangoes.</small>
    <i>Cricket is fun.</i> (a) </h2> (b) </i> (c) </h3> (d) </small>
16. 16.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
17. 17.🔢 On a typical page, from top to bottom, which comes first: “<header>” or “<footer>”? (a) <footer> (b) <header>
18. 18.🔗 Which code links to about.html? (a) <link about.html> (b) <a alt="about.html"> (c) <a src="about.html"> (d) <a href="about.html">
19. 19.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) neither (c) the shorter one (d) the first one
20. 20.📄 Where does <h1> go: in the head or in the body? (a) in the body (b) in the head
21. 21.🔁 What does this code print?
    let age = 38;
    if (age > 36) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) child (b) teen
22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 480px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).
23. 23.📋 How many items does this list show?
    <ul>
      <li>Litchi</li>
      <li>Jamun</li>
      <li>Mango</li>
      <li>Orange</li>
    </ul>
24. 24.✍️ What is the selector in this CSS rule?
    li {
      color: red;
      font-size: 20px;
      margin: 10px;
    } (a) li (b) color (c) body (d) 20px
25. 25.🏷️ Which is the closing tag for <em>? (a) </em> (b) <em/> (c) <\em> (d) <em>
26. 26.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) white (d) blue
27. 27.True or false: <table> holds the whole table. (a) False (b) True
28. 28.🖼️ Which attribute of <img> shows if the image fails? (a) width (b) height (c) src (d) alt
29. 29.True or false: <header> helps you move around. (a) True (b) False
30. 30.🖼️ Why do we add alt text to an image? (a) to load it faster (b) to describe the image (c) to colour it (d) to make it bigger
31. 31.⚖️ What colour is the text of this element?
    <h2 class="note" id="logo">Hi</h2>
    CSS:
    #logo { color: green; }
    #logo { color: orange; } (a) green (b) orange (c) white (d) blue
32. 32.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="cake.jpg" alt="Birthday cake" width="50"> (a) A happy dog (b) width (c) Birthday cake (d) cake.jpg
33. 33.🔍 Which is the odd one out? (a) is where we type code (b) has an address bar (c) opens web pages for us (d) shows pages from the web
34. 34.🌗 Is dark grey on white easy or hard to read? (a) hard to read (b) easy to read
35. 35.🔁 Which loop repeats code a set number of times? (a) for (b) else (c) let (d) if
36. 36.📝 Which input type lets you pick only one? (a) text (b) number (c) submit (d) radio
37. 37.🔠 How many headings are in this code?
    <h1>Hello, world!</h1>
    <p>The red kite</p>
    <h4>Rain today</h4>
38. 38.🔁 How many numbers does this code print?
    for (let i = 0; i < 17; i = i + 4) {
      console.log(i);
    }
39. 39.🖌️ What colour are the letters?
    li {
      font-size: 16px;
      text-align: center;
      background-color: orange;
      color: green;
    } (a) orange (b) green (c) black
40. 40.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector

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