Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 142 · 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.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 8px;
     }
   }
2. 2.📝 How many paragraphs does this code make?
   <p>Our school trip</p>
   <p>My best friend</p>
   <p>I love mangoes.</p>
   <p>My pets</p>
   <h2>I love mangoes.</h2>
3. 3.🔗 Which address opens when you click this link?
   <a href="https://example.com">About us</a> (a) https://example.com (b) About us (c) art.html (d) maths.html
4. 4.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 70px;
     padding: 25px;
     border: 4px solid black;
     margin: 5px;
   }
5. 5.🏷️ Which is the closing tag for <h1>? (a) <h1> (b) </h1> (c) <\h1> (d) <h1/>
6. 6.🔁 What does this code print?
   let marks = 20;
   if (marks >= 10) {
     console.log("Pass");
   } else {
     console.log("Try again");
   } (a) Pass (b) Try again
7. 7.🏷️ Is <title> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
8. 8.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 130px;
     padding: 25px;
     border: 1px solid black;
     margin: 5px;
   }
9. 9.📊 How many cells does this table have in all?
   <table>
     <tr><th>Name</th><th>Fruit</th></tr>
     <tr><td>Orange</td><td>Papaya</td></tr>
   </table>
10. 10.🖼️ Which tag puts a picture on a page? (a) <pic> (b) <p> (c) <a> (d) <img>
11. 11.📋 How many items does this list show?
    <ul>
      <li>Grapes</li>
      <li>Orange</li>
    </ul>
12. 12.📄 Where does <table> go: in the head or in the body? (a) in the body (b) in the head
13. 13.🔠 Which heading shows the BIGGEST text: <h2>, <h5>, <h6> or <h4>? (a) <h4> (b) <h5> (c) <h2> (d) <h6>
14. 14.🔠 Which heading shows the BIGGEST text: <h2>, <h6>, <h5> or <h3>? (a) <h3> (b) <h6> (c) <h2> (d) <h5>
15. 15.🔍 Which is the odd one out? (a) is where we type code (b) colours code to help us (c) turns HTML into a page (d) saves our .html files
16. 16.🚀 Which file should this code go in: alert("Hi"); (a) index.html (b) script.js (c) style.css
17. 17.✍️ What is the selector in this CSS rule?
    .note {
      text-align: center;
      margin: 10px;
    } (a) text-align (b) 10px (c) .note (d) #top
18. 18.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 10; i++) {
      total = total + 9;
    }
    console.log(total);
19. 19.🚀 Which file should this code go in: .box { padding: 8px; } (a) script.js (b) index.html (c) style.css
20. 20.🌈 Which hex code is cyan? (a) #00ff00 (b) #ffff00 (c) #000000 (d) #00ffff
21. 21.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) white (c) blue (d) green
22. 22.🎯 What kind of selector is #end? (a) a class selector (b) an id selector (c) an element selector
23. 23.📄 Can HTML on its own keep a high score? (a) Yes (b) No
24. 24.What does color do? (a) sets the letter colour (b) makes letters bigger (c) colours behind the text (d) picks the font style
25. 25.💬 How does an HTML comment end? (a) // (b) */ (c) >> (d) -->
26. 26.True or false: HTML on its own can make tables. (a) True (b) False
27. 27.🚀 What is the home page file of a website usually called? (a) start.js (b) main.png (c) home.css (d) index.html
28. 28.🖼️ Does <img> need a closing tag? (a) No (b) Yes
29. 29.📋 What number does the browser show next to “Banana”?
    <ol>
      <li>Papaya</li>
      <li>Orange</li>
      <li>Jamun</li>
      <li>Banana</li>
    </ol>
30. 30.True or false: HTML puts a picture on a page. (a) False (b) True
31. 31.Which of these is true of <aside>? (a) holds a news story (b) holds the logo and title (c) holds the menu of links (d) holds a side box of tips
32. 32.⚡ What does alert() show? (a) a picture (b) a pop-up box (c) a table (d) a new tab
33. 33.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Jamun</td><td>Grapes</td><td>Grapes</td><td>Banana</td></tr>
    </table>
34. 34.What does justify-content: flex-start do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
35. 35.💪 Which flexbox property picks row or column? (a) flex-direction (b) display: flex (c) align-items (d) justify-content
36. 36.Which of these is an opening tag? (a) <h1> (b) </li> (c) </p> (d) </h1>
37. 37.What does justify-content: center do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
38. 38.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
39. 39.🖌️ What colour is behind the letters?
    h1 {
      background-color: red;
      font-size: 28px;
      color: green;
      text-align: center;
    } (a) red (b) orange (c) green
40. 40.True or false: JavaScript lays out the page. (a) False (b) True

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