Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 97 · 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 heading shows the SMALLEST text: <h6>, <h5>, <h1> or <h4>? (a) <h5> (b) <h6> (c) <h1> (d) <h4>
2. 2.📝 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"> Mango
     <input type="checkbox" name="fruit"> Papaya
   </form>
3. 3.🔠 Which heading shows the SMALLEST text: <h2>, <h6>, <h3> or <h4>? (a) <h2> (b) <h3> (c) <h4> (d) <h6>
4. 4.🔠 How many headings are in this code?
   <h1>Hello, world!</h1>
   <p>Rain today</p>
   <p>Fun facts</p>
5. 5.🖼️ Which picture file does the browser load?
   <img src="kite.png" alt="A red kite" width="350"> (a) cake.jpg (b) map.png (c) A red kite (d) kite.png
6. 6.🚀 Which program lets you see your web page while you build it? (a) a web browser (b) a music player (c) a calculator (d) a photo viewer
7. 7.What does color do? (a) makes the text bold (b) picks the font style (c) makes letters bigger (d) sets the letter colour
8. 8.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 16px;
     }
   } (a) No (b) Yes
9. 9.True or false: <p> has a closing tag. (a) True (b) False
10. 10.🎯 What kind of selector is li? (a) an id selector (b) a class selector (c) an element selector
11. 11.🔗 Which address opens when you click this link?
    <a href="games.html">School news</a> (a) about.html (b) contact.html (c) games.html (d) School news
12. 12.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Mango</td><td>Mango</td></tr>
      <tr><td>Orange</td><td>Mango</td></tr>
    </table>
13. 13.📋 Which list tag is one item of a list? (a) <li> (b) <ol> (c) <ul>
14. 14.💬 How many paragraphs show on the page?
    <!-- <p>Rain today</p> -->
    <!-- <p>Our school trip</p> -->
    <p>I love mangoes.</p>
    <!-- <p>My pets</p> -->
    <p>The red kite</p>
15. 15.🖼️ Why do we add alt text to an image? (a) to make it bigger (b) to load it faster (c) to colour it (d) to describe the image
16. 16.🔠 Which heading shows the BIGGEST text: <h4>, <h1>, <h3> or <h6>? (a) <h1> (b) <h6> (c) <h3> (d) <h4>
17. 17.Which colour pair is hard to read? (a) black on white (b) white on dark blue (c) white on black (d) blue on purple
18. 18.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-end (c) space-between (d) flex-start
19. 19.True or false: padding is a solid or dotted edge. (a) True (b) False
20. 20.💬 Which text will NOT show on the page?
    <p>Good morning!</p>
    <!-- <p>Fun facts</p> -->
    <p>Hello, world!</p> (a) Hello, world! (b) Fun facts (c) Good morning!
21. 21.True or false: <ul><li>Art</li></ul> goes in index.html. (a) False (b) True
22. 22.🖼️ Which attribute of <img> sets how tall it is? (a) height (b) src (c) width (d) alt
23. 23.🔠 Which heading shows the BIGGEST text: <h3>, <h4>, <h6> or <h1>? (a) <h4> (b) <h3> (c) <h6> (d) <h1>
24. 24.🔍 Which is the odd one out? (a) shows line numbers (b) answers page requests (c) is where we type code (d) saves our .html files
25. 25.🎨 Which tag holds CSS inside the head? (a) <style> (b) <css> (c) <script> (d) <body>
26. 26.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) type the password (b) share it with friends (c) click it twice (d) close it, tell an adult
27. 27.True or false: the server stores the site’s files. (a) False (b) True
28. 28.🔒 Is the connection to this address scrambled (encrypted)?
    https://kids.example.org/about.html (a) No (b) Yes
29. 29.What is <input type="checkbox"> for? (a) picks a day (b) lets you pick only one (c) hides what you type (d) lets you tick many
30. 30.⚡ What does alert() show? (a) a table (b) a picture (c) a new tab (d) a pop-up box
31. 31.🔗 Where does this link open?
    <a href="art.html">About us</a> (a) in the same tab (b) in a new tab
32. 32.🔢 On a typical page, from top to bottom, which comes first: “<header>” or “<main>”? (a) <header> (b) <main>
33. 33.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the start (c) packs boxes at the end (d) puts boxes in the middle
34. 34.True or false: <img> goes in the body. (a) True (b) False
35. 35.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 50px wide (no margins).
36. 36.⚡ A JavaScript file usually ends with which extension? (a) .css (b) .js (c) .html (d) .jpg
37. 37.True or false: <input type="date"> is for one line of words. (a) True (b) False
38. 38.True or false: <br> is an empty tag. (a) False (b) True
39. 39.🔠 Which heading shows the SMALLEST text: <h5>, <h3>, <h1> or <h6>? (a) <h1> (b) <h5> (c) <h6> (d) <h3>
40. 40.📦 In the box model, which part is the line round the box? (a) content (b) margin (c) padding (d) border

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