Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 770 · 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 much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 170px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 80px wide (no margins).
2. 2.🖼️ Does <img> need a closing tag? (a) Yes (b) No
3. 3.True or false: the border is space outside the border. (a) True (b) False
4. 4.Which of these is true of a web server? (a) saves our .html files (b) is where we type code (c) colours code to help us (d) sends pages over the net
5. 5.What is <input type="number"> for? (a) hides what you type (b) lets you tick many (c) lets you pick only one (d) takes only numbers
6. 6.📋 How many items does this list show?
   <ul>
     <li>Grapes</li>
     <li>Litchi</li>
     <li>Papaya</li>
     <li>Orange</li>
     <li>Mango</li>
   </ul>
7. 7.🖼️ Which picture file does the browser load?
   <img src="map.png" alt="Map of India" width="300"> (a) Map of India (b) map.png (c) dog.jpg (d) cake.jpg
8. 8.📝 Does <h1> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
9. 9.🖼️ The picture cannot load. Which text does the browser show instead?
   <img src="fort.jpg" alt="An old fort" width="200"> (a) A tiger asleep (b) fort.jpg (c) An old fort (d) width
10. 10.Which of these goes in the head? (a) <table> (b) <link rel="stylesheet"> (c) <a> (d) <h1>
11. 11.📋 How many items does this list show?
    <ul>
      <li>Orange</li>
      <li>Grapes</li>
    </ul>
12. 12.True or false: <a href="a.html">Go</a> goes in style.css. (a) False (b) True
13. 13.True or false: the content is the gap round content. (a) False (b) True
14. 14.🔢 On a typical page, from top to bottom, which comes LAST? (a) <nav> (b) <main> (c) <footer> (d) <header>
15. 15.💬 Why do coders write comments? (a) to make links (b) to show pictures (c) to leave notes (d) to add colour
16. 16.True or false: .box { padding: 8px; } goes in style.css. (a) False (b) True
17. 17.Which of these goes in the body? (a) <table> (b) <style> (c) <meta charset="utf-8"> (d) <link rel="stylesheet">
18. 18.🔗 Which words do you click on?
    <a href="contact.html">Art corner</a> (a) contact.html (b) School news (c) href (d) Art corner
19. 19.📝 What does <p> make? (a) a paragraph (b) a picture (c) a link (d) a table
20. 20.🖼️ Which attribute of <img> sets how tall it is? (a) height (b) src (c) alt (d) width
21. 21.🎯 Which CSS selector matches this element?
    <h1 class="star" id="hero">Hello</h1> (a) .hero (b) .menu (c) h1 (d) #top
22. 22.🔠 How many heading levels does HTML have? (a) 4 (b) 3 (c) 6 (d) 10
23. 23.🎯 What kind of selector is .menu? (a) an element selector (b) an id selector (c) a class selector
24. 24.🔍 Which line is missing its closing tag?
    line 1: <h1>I love mangoes.
    line 2: <u>Our school trip</u>
    line 3: <h2>Hello, world!</h2> (a) line 3 (b) line 1 (c) line 2
25. 25.🎯 What kind of selector is body? (a) an id selector (b) an element selector (c) a class selector
26. 26.💬 How does an HTML comment end? (a) // (b) --> (c) */ (d) >>
27. 27.📊 Which tag makes one table row? (a) <table> (b) <th> (c) <td> (d) <tr>
28. 28.🔁 What does this code print?
    let score = 48;
    if (score >= 27) {
      console.log("You win");
    } else {
      console.log("Play again");
    } (a) Play again (b) You win
29. 29.🚀 Should file names have spaces, like my page.html? (a) No (b) Yes
30. 30.🎯 Which sign starts a class selector? (a) @ (b) & (c) . (d) #
31. 31.✍️ Which property is set to center in this rule?
    h1 {
      margin: 10px;
      font-style: italic;
      text-align: center;
      color: red;
    } (a) margin (b) text-align (c) background-color (d) center
32. 32.Which of these is an empty tag? (a) <meta> (b) <b> (c) <ul> (d) <li>
33. 33.🔍 Which is the odd one out? (a) gives the page structure (b) makes a form box (c) makes headings and lists (d) rounds box corners
34. 34.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 210px;
      padding: 5px;
      border: 5px solid black;
      margin: 10px;
    }
35. 35.True or false: <th> holds the whole table. (a) False (b) True
36. 36.True or false: <hr> is an empty tag. (a) True (b) False
37. 37.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 60px wide (no margins).
38. 38.📄 Where does the text of <title> appear? (a) at the bottom (b) on the browser tab (c) nowhere (d) in a big heading
39. 39.🔁 How many numbers does this code print?
    for (let i = 0; i < 15; i = i + 2) {
      console.log(i);
    }
40. 40.🔠 Which heading shows the BIGGEST text: <h5>, <h2>, <h4> or <h1>? (a) <h1> (b) <h2> (c) <h4> (d) <h5>

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