Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 450 · 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.🧭 Why use <nav> instead of <div> for a menu? (a) it tells its meaning (b) it makes text red (c) it adds pictures (d) it loads faster
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 380px;
     justify-content: center;
   }
   Inside are 3 boxes, each 100px wide (no margins).
3. 3.🔠 Are headings shown in bold by default? (a) No (b) Yes
4. 4.📊 How many rows does this table have?
   <table>
     <tr><th>Name</th><th>Fruit</th></tr>
     <tr><td>Jamun</td><td>Orange</td></tr>
     <tr><td>Banana</td><td>Papaya</td></tr>
   </table>
5. 5.🚀 Which file should this code go in: body { margin: 0; } (a) script.js (b) style.css (c) index.html
6. 6.🎯 Which element does the selector .red style? (a) <p class="box"> (b) <p class="red"> (c) <h1 class="star"> (d) <p id="red">
7. 7.🔠 How many headings are in this code?
   <h1>Rain today</h1>
   <h3>Cricket is fun.</h3>
   <p>Hello, world!</p>
   <h3>I love mangoes.</h3>
   <h3>I love mangoes.</h3>
8. 8.📊 Which tag holds the whole table? (a) <th> (b) <td> (c) <table> (d) <caption>
9. 9.🔠 Which heading shows the BIGGEST text: <h1>, <h2>, <h5> or <h4>? (a) <h2> (b) <h4> (c) <h1> (d) <h5>
10. 10.📝 Does <title> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
11. 11.What is <input type="radio"> for? (a) hides what you type (b) lets you pick only one (c) lets you tick many (d) sends the form
12. 12.Which of these is safe to do online? (a) meet an online stranger (b) share your OTP (c) keep passwords secret (d) type a password on http
13. 13.🏷️ What does a closing tag have that an opening tag does not? (a) a hash # (b) a slash / (c) a dot . (d) a dollar $
14. 14.🌐 Which one has an address bar? (a) a code editor (b) a web server (c) a web browser
15. 15.🔠 How many headings are in this code?
    <h1>Cricket is fun.</h1>
    <h4>The red kite</h4>
    <h3>The red kite</h3>
    <h3>Good morning!</h3>
16. 16.🚀 Which file should this code go in: alert(score); (a) style.css (b) index.html (c) script.js
17. 17.True or false: <input type="date"> picks a day. (a) False (b) True
18. 18.💬 Which text will NOT show on the page?
    <p>My best friend</p>
    <p>Fun facts</p>
    <!-- <p>My pets</p> -->
    <p>I love mangoes.</p> (a) I love mangoes. (b) My best friend (c) Fun facts (d) My pets
19. 19.🖼️ Which attribute of <img> sets how wide it is? (a) src (b) alt (c) height (d) width
20. 20.📋 Does this list show bullets or numbers?
    <ul>
      <li>Banana</li>
      <li>Papaya</li>
      <li>Guava</li>
    </ul> (a) bullets (b) numbers
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 4 boxes, each 60px wide (no margins).
22. 22.📱 What does a media query check? (a) the page title (b) the time of day (c) the screen width (d) the battery level
23. 23.🚀 Which file is best for code that reacts to clicks? (a) style.css (b) script.js (c) index.html (d) notes.txt
24. 24.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 5px;
      border: 1px solid black;
      margin: 15px;
    }
25. 25.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 2 (c) 3 (d) 6
26. 26.🖼️ Which attribute of <img> is read by screen readers? (a) height (b) alt (c) width (d) src
27. 27.True or false: .card is a class selector. (a) False (b) True
28. 28.🔢 To build and share your first web page, what comes right after “plan what to show”? (a) write the HTML (b) test in a browser (c) add CSS styles (d) publish it online
29. 29.🌍 Which one shows the page to you? (a) the server (b) the URL (c) HTTPS (d) the browser
30. 30.True or false: HTML changes the text size. (a) True (b) False
31. 31.⚖️ What colour is the text of this element?
    <h1 class="red" id="end">Hi</h1>
    CSS:
    h1 { color: orange; }
    .red { color: yellow; } (a) purple (b) orange (c) yellow (d) blue
32. 32.🎯 Which element does the selector span style? (a) <h2 id="intro"> (b) <p> (c) <span class="menu"> (d) <h1 class="menu">
33. 33.What does font-family do? (a) picks the font style (b) sets the letter colour (c) colours behind the text (d) makes the text bold
34. 34.✍️ What is the selector in this CSS rule?
    h1 {
      font-weight: bold;
      text-align: center;
      border: 2px solid;
      width: 300px;
    } (a) h1 (b) p (c) center (d) font-weight
35. 35.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-start (c) space-between (d) flex-end
36. 36.🖼️ Which tag puts a picture on a page? (a) <img> (b) <p> (c) <pic> (d) <a>
37. 37.What does justify-content: space-between do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends
38. 38.Which of these is true of a web server? (a) hosts websites online (b) shows line numbers (c) is where we type code (d) colours code to help us
39. 39.🔍 One closing tag is missing. Which one?
    <h3>My pets
    <h2>Cricket is fun.</h2>
    <u>The red kite</u> (a) </h3> (b) </p> (c) </u> (d) </h2>
40. 40.True or false: <hr> is an empty tag. (a) False (b) True

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