Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 69 · 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.🔠 Which tag is the least important heading? (a) <h3> (b) <h6> (c) <h1> (d) <p>
2. 2.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 170px;
     padding: 25px;
     border: 1px solid black;
     margin: 0px;
   }
3. 3.🎯 Which sign starts a class selector? (a) @ (b) . (c) # (d) &
4. 4.🔠 Which heading shows the SMALLEST text: <h3>, <h1>, <h6> or <h5>? (a) <h6> (b) <h3> (c) <h1> (d) <h5>
5. 5.📊 How many rows does this table have?
   <table>
     <tr><td>Orange</td><td>Litchi</td></tr>
     <tr><td>Mango</td><td>Grapes</td></tr>
     <tr><td>Jamun</td><td>Grapes</td></tr>
     <tr><td>Litchi</td><td>Orange</td></tr>
   </table>
6. 6.💬 How does an HTML comment start? (a) // (b) /* (c) <!-- (d) #
7. 7.🧩 Which language sets colours and fonts? (a) CSS (b) HTML (c) JavaScript
8. 8.True or false: console.log(5 + 2); goes in script.js. (a) True (b) False
9. 9.What does justify-content: flex-end do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the end (d) packs boxes at the start
10. 10.True or false: <img src="cat.png"> goes in script.js. (a) False (b) True
11. 11.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Banana
      <input type="checkbox" name="fruit"> Papaya
      <input type="checkbox" name="fruit"> Litchi
      <input type="checkbox" name="fruit"> Mango
      <input type="checkbox" name="fruit"> Guava
    </form>
12. 12.💪 Which flexbox property sets space between boxes? (a) align-items (b) gap (c) display: flex (d) justify-content
13. 13.🔍 Which is the odd one out? (a) has an address bar (b) stores a website’s files (c) opens web pages for us (d) turns HTML into a page
14. 14.True or false: “colour as the only clue” helps everyone use the page. (a) True (b) False
15. 15.True or false: body { margin: 0; } goes in script.js. (a) False (b) True
16. 16.📋 Which list shows the steps of a recipe best? (a) <br> (b) <ol> (c) <ul> (d) <hr>
17. 17.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Papaya</td><td>Banana</td><td>Litchi</td></tr>
      <tr><td>Litchi</td><td>Grapes</td><td>Jamun</td></tr>
      <tr><td>Grapes</td><td>Mango</td><td>Jamun</td></tr>
    </table>
18. 18.True or false: <th> makes one data cell. (a) False (b) True
19. 19.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 20px;
      border: 5px solid black;
      margin: 5px;
    }
20. 20.🎯 Which CSS selector matches this element?
    <div class="star" id="top">Hello</div> (a) #star (b) .top (c) #intro (d) .star
21. 21.What does font-weight do? (a) makes the text bold (b) makes letters bigger (c) sets the letter colour (d) colours behind the text
22. 22.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="fruit"> Mango
      <input type="radio" name="fruit"> Banana
      <input type="radio" name="fruit"> Litchi
      <input type="radio" name="fruit"> Guava
    </form>
23. 23.🔗 Which address opens when you click this link?
    <a href="news.html">Contact us</a> (a) Contact us (b) news.html (c) games.html (d) quiz.html
24. 24.🌗 Is light grey on white easy or hard to read? (a) easy to read (b) hard to read
25. 25.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    }
26. 26.True or false: padding is space inside the border. (a) True (b) False
27. 27.📊 How many cells does this table have in all?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Jamun</td><td>Grapes</td><td>Litchi</td><td>Guava</td></tr>
      <tr><td>Orange</td><td>Banana</td><td>Jamun</td><td>Banana</td></tr>
      <tr><td>Guava</td><td>Papaya</td><td>Orange</td><td>Mango</td></tr>
    </table>
28. 28.Which of these is true of <header>? (a) is the page’s key part (b) helps you move around (c) holds a side box of tips (d) holds the logo and title
29. 29.⚡ What number does this code print?
    let a = 39;
    let b = 15;
    console.log(a - b);
30. 30.🔠 Which heading shows the BIGGEST text: <h2>, <h1>, <h3> or <h4>? (a) <h3> (b) <h2> (c) <h1> (d) <h4>
31. 31.True or false: padding is the line round the box. (a) False (b) True
32. 32.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) space-between (c) center (d) flex-start
33. 33.True or false: to type a password on http is not safe. (a) True (b) False
34. 34.True or false: JavaScript makes headings and lists. (a) True (b) False
35. 35.🎯 Can many elements share the same class? (a) Yes (b) No
36. 36.True or false: JavaScript rounds box corners. (a) True (b) False
37. 37.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      background-color: yellow;
      font-size: 20px;
      color: red;
    }
38. 38.True or false: <ul> lists steps in order. (a) False (b) True
39. 39.⚡ Which JavaScript word runs code when true? (a) alert() (b) console.log() (c) let (d) if
40. 40.What is <input type="radio"> for? (a) lets you tick many (b) picks a day (c) lets you pick only one (d) hides what you type

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