Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 984 · 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.🔢 On a typical page, from top to bottom, which comes first: “<header>” or “<footer>”? (a) <header> (b) <footer>
2. 2.📋 How many items does this list show?
   <ul>
     <li>Banana</li>
     <li>Grapes</li>
     <li>Guava</li>
   </ul>
3. 3.🖌️ What colour are the letters?
   p {
     background-color: orange;
     font-size: 16px;
     color: white;
     text-align: left;
   } (a) black (b) orange (c) white
4. 4.Which colour pair is easy to read? (a) yellow on white (b) pink on red (c) blue on purple (d) black on white
5. 5.Which of these does CSS do? (a) makes a form box (b) adds space around boxes (c) makes a link (d) makes headings and lists
6. 6.🔗 Which words do you click on?
   <a href="games.html">Maths fun</a> (a) Maths fun (b) Art corner (c) games.html (d) href
7. 7.📝 Does <meta> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
8. 8.🎯 Which element does the selector .box style? (a) <p class="menu"> (b) <span class="star"> (c) <span class="box"> (d) <span id="box">
9. 9.🔠 Which heading shows the BIGGEST text: <h5>, <h4>, <h6> or <h3>? (a) <h6> (b) <h5> (c) <h4> (d) <h3>
10. 10.🔠 Which heading shows the BIGGEST text: <h4>, <h5>, <h1> or <h2>? (a) <h2> (b) <h4> (c) <h1> (d) <h5>
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      background-color: yellow;
      text-align: center;
      font-style: italic;
      font-size: 20px;
    }
12. 12.True or false: <img> goes in the body. (a) False (b) True
13. 13.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
14. 14.📄 Where does <link rel="stylesheet"> go: in the head or in the body? (a) in the head (b) in the body
15. 15.💬 How many paragraphs show on the page?
    <p>Good morning!</p>
    <p>My best friend</p>
    <!-- <p>I love mangoes.</p> -->
    <p>Hello, world!</p>
16. 16.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
17. 17.💪 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 80px wide (no margins).
18. 18.🔗 Where does this link open?
    <a href="about.html">Take the quiz</a> (a) in a new tab (b) in the same tab
19. 19.📊 In a table, which tag is a row? (a) <th> (b) <td> (c) <tr> (d) <tb>
20. 20.📊 How many cells are in each row?
    <table>
      <tr><td>Orange</td><td>Banana</td><td>Litchi</td></tr>
      <tr><td>Papaya</td><td>Banana</td><td>Banana</td></tr>
      <tr><td>Papaya</td><td>Guava</td><td>Guava</td></tr>
      <tr><td>Jamun</td><td>Banana</td><td>Litchi</td></tr>
    </table>
21. 21.🔁 How many numbers does this code print?
    for (let i = 0; i < 12; i = i + 3) {
      console.log(i);
    }
22. 22.Which of these is an opening tag? (a) </p> (b) </title> (c) </body> (d) <p>
23. 23.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
24. 24.💬 Which text will NOT show on the page?
    <p>My best friend</p>
    <!-- <p>Cricket is fun.</p> -->
    <p>I love mangoes.</p> (a) Cricket is fun. (b) My best friend (c) I love mangoes.
25. 25.Which of these does HTML do? (a) shows a pop-up message (b) adds space around boxes (c) gives the page structure (d) lays out the page
26. 26.True or false: <br> is an empty tag. (a) True (b) False
27. 27.🔗 Which attribute holds the address of a link? (a) src (b) id (c) alt (d) href
28. 28.🌐 Which one turns HTML into a page? (a) a code editor (b) a web server (c) a web browser
29. 29.🔗 What does target="_blank" do to a link? (a) hides the link (b) makes it blank (c) makes it bold (d) opens it in a new tab
30. 30.🚀 What is the home page file of a website usually called? (a) index.html (b) home.css (c) start.js (d) main.png
31. 31.True or false: <td> makes one data cell. (a) False (b) True
32. 32.🔁 What does i++ do? (a) doubles i (b) prints i (c) takes 1 from i (d) adds 1 to i
33. 33.📝 Which tag makes a big box for many lines of text? (a) <textarea> (b) <input> (c) <p> (d) <br>
34. 34.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 5px;
      border: 5px solid black;
      margin: 5px;
    }
35. 35.What does color do? (a) picks the font style (b) centres a heading (c) makes letters bigger (d) sets the letter colour
36. 36.🔗 Which words do you click on?
    <a href="about.html">Art corner</a> (a) href (b) Art corner (c) about.html (d) School news
37. 37.♿ Which link text is clearest? (a) link (b) Read the fruit facts (c) here (d) click here
38. 38.True or false: <img> is an empty tag. (a) False (b) True
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      margin: 10px;
    }
40. 40.🖼️ Which attribute of <img> shows if the image fails? (a) alt (b) src (c) width (d) height

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