Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 898 · 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 gives the table a title? (a) <caption> (b) <th> (c) <table> (d) <tr>
2. 2.💬 How does an HTML comment start? (a) # (b) /* (c) // (d) <!--
3. 3.🔠 How many headings are in this code?
   <h1>Rain today</h1>
   <h4>Good morning!</h4>
   <p>Good morning!</p>
   <h3>My pets</h3>
4. 4.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 12px;
     }
   }
5. 5.True or false: <input type="number"> is for one line of words. (a) True (b) False
6. 6.What does font-weight do? (a) picks the font style (b) centres a heading (c) makes letters bigger (d) makes the text bold
7. 7.💬 Which text will NOT show on the page?
   <p>Our school trip</p>
   <p>The red kite</p>
   <p>Cricket is fun.</p>
   <!-- <p>I love mangoes.</p> --> (a) Our school trip (b) The red kite (c) Cricket is fun. (d) I love mangoes.
8. 8.🚀 Which file should this code go in: <img src="cat.png"> (a) script.js (b) style.css (c) index.html
9. 9.True or false: <ul> lists things in any order. (a) False (b) True
10. 10.🌍 Which one shows the page to you? (a) the server (b) HTTPS (c) the URL (d) the browser
11. 11.📝 How many <input> tags are in this form?
    <form>
      <input type="number">
      <input type="email">
      <input type="text">
      <input type="submit" value="Send">
    </form>
12. 12.🔁 How many times does this code print “Well done”?
    for (let i = 2; i <= 10; i++) {
      console.log("Well done");
    }
13. 13.✍️ What value is given to font-weight in this rule?
    li {
      padding: 8px;
      font-weight: bold;
      font-size: 20px;
    } (a) 2px solid (b) font-weight (c) bold (d) 300px
14. 14.✍️ What is the selector in this CSS rule?
    body {
      margin: 10px;
      color: red;
      font-style: italic;
      border: 2px solid;
    } (a) .box (b) red (c) margin (d) body
15. 15.🔠 Which heading shows the BIGGEST text: <h1>, <h5>, <h3> or <h2>? (a) <h5> (b) <h1> (c) <h3> (d) <h2>
16. 16.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) justify-content (c) display: flex (d) align-items
17. 17.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="map.png" alt="Map of India" width="250"> (a) map.png (b) Map of India (c) width (d) Birthday cake
18. 18.🔠 How many headings are in this code?
    <h1>I love mangoes.</h1>
    <p>Our school trip</p>
    <h2>I love mangoes.</h2>
    <p>Hello, world!</p>
    <h2>Good morning!</h2>
19. 19.📋 How many items does this list show?
    <ul>
      <li>Banana</li>
      <li>Guava</li>
      <li>Jamun</li>
    </ul>
20. 20.🌈 Which hex code is magenta? (a) #ffff00 (b) #00ffff (c) #ff00ff (d) #000000
21. 21.💬 How many paragraphs show on the page?
    <p>Good morning!</p>
    <p>My pets</p>
    <p>My best friend</p>
    <!-- <p>The red kite</p> -->
    <p>Cricket is fun.</p>
22. 22.📋 What number does the browser show next to “Papaya”?
    <ol start="2">
      <li>Mango</li>
      <li>Jamun</li>
      <li>Papaya</li>
    </ol>
23. 23.🧩 Which language puts a picture on a page? (a) CSS (b) JavaScript (c) HTML
24. 24.🧱 HTML gives a web page its ___. (a) colours (b) sound (c) speed (d) structure
25. 25.📊 How many rows does this table have?
    <table>
      <tr><td>Banana</td><td>Orange</td><td>Guava</td></tr>
      <tr><td>Guava</td><td>Grapes</td><td>Banana</td></tr>
      <tr><td>Papaya</td><td>Litchi</td><td>Litchi</td></tr>
      <tr><td>Banana</td><td>Grapes</td><td>Grapes</td></tr>
    </table>
26. 26.📋 Which list tag is an unordered list? (a) <li> (b) <ol> (c) <ul>
27. 27.True or false: the server shows the page to you. (a) True (b) False
28. 28.💬 Which text will NOT show on the page?
    <!-- <p>Hello, world!</p> -->
    <p>Cricket is fun.</p>
    <p>The red kite</p>
    <p>Our school trip</p> (a) The red kite (b) Cricket is fun. (c) Our school trip (d) Hello, world!
29. 29.🔢 To build and share your first web page, which comes first: “add CSS styles” or “plan what to show”? (a) plan what to show (b) add CSS styles
30. 30.🔠 Which heading shows the SMALLEST text: <h6>, <h5>, <h4> or <h3>? (a) <h6> (b) <h3> (c) <h5> (d) <h4>
31. 31.🔠 Which tag is the least important heading? (a) <h6> (b) <p> (c) <h3> (d) <h1>
32. 32.♿ Is this heading order correct (no level skipped)?
    <h1> → <h1> → <h1> → <h2> (a) No (b) Yes
33. 33.True or false: in <img>, width tells which image to load. (a) True (b) False
34. 34.True or false: HTML makes a link. (a) False (b) True
35. 35.True or false: <th> makes one table row. (a) False (b) True
36. 36.⚡ A JavaScript file usually ends with which extension? (a) .html (b) .jpg (c) .js (d) .css
37. 37.📊 How many rows does this table have?
    <table>
      <tr><td>Grapes</td><td>Mango</td></tr>
      <tr><td>Orange</td><td>Orange</td></tr>
    </table>
38. 38.🔁 How many numbers does this code print?
    for (let i = 0; i < 10; i = i + 3) {
      console.log(i);
    }
39. 39.✍️ What value is given to text-align in this rule?
    h2 {
      text-align: center;
      font-size: 20px;
      width: 300px;
    } (a) text-align (b) center (c) 10px (d) yellow
40. 40.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }

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