Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 1 · 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.🔁 What does i++ do? (a) takes 1 from i (b) adds 1 to i (c) doubles i (d) prints i
2. 2.📦 In the box model, which part is space inside the border? (a) content (b) padding (c) margin (d) border
3. 3.🎯 Which sign starts a class selector? (a) @ (b) # (c) . (d) &
4. 4.🖌️ What colour is behind the letters?
   h1 {
     background-color: purple;
     text-align: center;
     font-size: 40px;
     color: yellow;
   } (a) green (b) purple (c) yellow
5. 5.🔍 Which is the odd one out? (a) shows line numbers (b) opens web pages for us (c) saves our .html files (d) is where we type code
6. 6.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
7. 7.Which of these is not safe to do online? (a) type a password on http (b) check for https first (c) use a strong password (d) ask before downloading
8. 8.⚖️ What colour is the text of this element?
   <h2 class="big" id="logo">Hi</h2>
   CSS:
   .big { color: white; }
   .big { color: orange; } (a) red (b) orange (c) purple (d) white
9. 9.📝 Which tag gives a form box a name you can click? (a) <title> (b) <label> (c) <h1> (d) <hr>
10. 10.🔗 Where does this link open?
    <a href="maths.html" target="_blank">Take the quiz</a> (a) in a new tab (b) in the same tab
11. 11.🔠 Which heading shows the BIGGEST text: <h6>, <h5>, <h3> or <h2>? (a) <h5> (b) <h2> (c) <h6> (d) <h3>
12. 12.🔠 How many headings are in this code?
    <h1>Good morning!</h1>
    <p>I love mangoes.</p>
    <h2>Our school trip</h2>
13. 13.📊 Where do <td> cells go? (a) inside the <head> (b) inside a <tr> (c) inside a <li> (d) inside a <p>
14. 14.Which colour pair is easy to read? (a) blue on purple (b) light grey on white (c) yellow on black (d) red on green
15. 15.🖌️ Where does the text sit on its line?
    li {
      background-color: orange;
      color: black;
      text-align: left;
      font-size: 40px;
    } (a) in the middle (b) on the left (c) on the right
16. 16.🔠 How many headings are in this code?
    <h1>Cricket is fun.</h1>
    <p>I love mangoes.</p>
    <h4>My best friend</h4>
    <h2>The red kite</h2>
    <p>My best friend</p>
17. 17.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
18. 18.🔐 Is Blue@Tiger_74 a strong or a weak password? (a) weak (b) strong
19. 19.True or false: “write clear link text” makes the page harder to use. (a) True (b) False
20. 20.🧩 An opening tag + content + a closing tag together make an ___. (a) editor (b) address (c) element (d) attribute
21. 21.True or false: <h1>My Site</h1> goes in style.css. (a) False (b) True
22. 22.🔠 How many heading levels does HTML have? (a) 4 (b) 10 (c) 6 (d) 3
23. 23.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 380px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
24. 24.📊 How many cells does this table have in all?
    <table>
      <tr><td>Litchi</td><td>Jamun</td><td>Grapes</td></tr>
      <tr><td>Banana</td><td>Papaya</td><td>Jamun</td></tr>
      <tr><td>Mango</td><td>Papaya</td><td>Grapes</td></tr>
      <tr><td>Litchi</td><td>Orange</td><td>Litchi</td></tr>
    </table>
25. 25.🔠 Which heading shows the SMALLEST text: <h2>, <h3>, <h4> or <h6>? (a) <h4> (b) <h3> (c) <h2> (d) <h6>
26. 26.True or false: margin is space outside the border. (a) False (b) True
27. 27.📝 What does a password box show instead of letters? (a) numbers (b) capital letters (c) dots (d) emojis
28. 28.🎯 Which CSS selector matches this element?
    <li class="star" id="top">Hello</li> (a) .top (b) div (c) #intro (d) .star
29. 29.🔁 How many times does this code print “Hi”?
    for (let i = 1; i <= 8; i++) {
      console.log("Hi");
    }
30. 30.⚡ What number does this code print?
    let coins = 11;
    coins = coins + 7;
    coins = coins - 11;
    console.log(coins);
31. 31.🔢 When you open a web page, which comes FIRST? (a) you type the URL (b) DNS finds the server (c) the browser shows it (d) the browser asks it
32. 32.📦 In the box model, which part is the line round the box? (a) margin (b) border (c) content (d) padding
33. 33.🚀 Which tag loads script.js into a page? (a) <js src="script.js"> (b) <a href="script.js"> (c) <link script.js> (d) <script src="script.js">
34. 34.True or false: in <img>, alt names the picture file. (a) True (b) False
35. 35.🖼️ Which picture file does the browser load?
    <img src="dog.jpg" alt="A happy dog" width="250"> (a) dog.jpg (b) A happy dog (c) bus.jpg (d) moon.png
36. 36.🛡️ Before typing a password on a site, check the address starts with ___. (a) www (b) http (c) https (d) ftp
37. 37.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) turned off (c) exactly 100px (d) 800px or wider
38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
39. 39.Which of these is true of <footer>? (a) holds a news story (b) helps you move around (c) holds the menu of links (d) sits at the bottom
40. 40.📋 Does this list show bullets or numbers?
    <ul>
      <li>Guava</li>
      <li>Papaya</li>
    </ul> (a) numbers (b) bullets

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