Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 750 · 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.📦 In the box model, which part is space outside the border? (a) border (b) padding (c) content (d) margin
2. 2.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 130px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 60px wide (no margins).
3. 3.📊 How many cells does this table have in all?
   <table>
     <tr><td>Jamun</td><td>Mango</td></tr>
     <tr><td>Jamun</td><td>Papaya</td></tr>
     <tr><td>Guava</td><td>Litchi</td></tr>
     <tr><td>Guava</td><td>Litchi</td></tr>
   </table>
4. 4.📝 On how many lines does the browser show this paragraph?
   <p>Stars shine<br>Sky is blue</p>
5. 5.🌈 Which hex code is red? (a) #00ffff (b) #ff0000 (c) #000000 (d) #0000ff
6. 6.What does background-color do? (a) makes letters bigger (b) centres a heading (c) colours behind the text (d) sets the letter colour
7. 7.🎯 Which CSS selector matches this element?
   <p class="menu" id="top">Hello</p> (a) p (b) h1 (c) .top (d) .note
8. 8.📋 Which list shows the steps of a recipe best? (a) <br> (b) <ul> (c) <hr> (d) <ol>
9. 9.📝 How many <input> tags are in this form?
   <form>
     <input type="password">
     <input type="number">
     <input type="date">
     <input type="checkbox">
     <input type="text">
     <input type="submit" value="Send">
   </form>
10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).
11. 11.⚡ Where does console.log() show its output? (a) in the address bar (b) on the printer (c) in the console (d) on the title bar
12. 12.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Space Facts</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) Space Facts (b) Mars is red. (c) body (d) Welcome!
13. 13.📝 Which input type takes only numbers? (a) password (b) date (c) email (d) number
14. 14.⚡ What does this code show?
    let name = "Zoya";
    alert("Well done, " + name + "!"); (a) Well done, Zoya! (b) Well done, name! (c) Zoya (d) name
15. 15.✍️ What is the selector in this CSS rule?
    li {
      text-align: center;
      color: red;
    } (a) text-align (b) li (c) red (d) body
16. 16.True or false: a web server colours code to help us. (a) True (b) False
17. 17.🖼️ How many pixels wide is the picture drawn?
    <img src="fort.jpg" alt="An old fort" width="50">
18. 18.True or false: to share your OTP is safe. (a) True (b) False
19. 19.⚡ Which JavaScript word shows a pop-up box? (a) for (b) if (c) let (d) alert()
20. 20.🔠 How many heading levels does HTML have? (a) 10 (b) 4 (c) 6 (d) 3
21. 21.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Riya’s Recipes</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>We won by 5 runs.</p>
    </body>
    </html> (a) We won by 5 runs. (b) index.html (c) Riya’s Recipes (d) Welcome!
22. 22.🔍 Which is the odd one out? (a) lays out the page (b) rounds box corners (c) sets colours and fonts (d) reacts to a button click
23. 23.True or false: the server stores the site’s files. (a) False (b) True
24. 24.📝 How many paragraphs does this code make?
    <p>I love mangoes.</p>
    <p>Our school trip</p>
    <p>Hello, world!</p>
    <p>Our school trip</p>
    <p>I love mangoes.</p>
    <p>I love mangoes.</p>
25. 25.⚖️ What colour is the text of this element?
    <h2 class="box" id="hero">Hi</h2>
    CSS:
    #hero { color: orange; }
    #hero { color: black; } (a) white (b) red (c) black (d) orange
26. 26.🔢 To build and share your first web page, which comes LAST? (a) publish it online (b) test in a browser (c) plan what to show (d) write the HTML
27. 27.Which of these is not safe to do online? (a) check for https first (b) log out on shared PCs (c) tell a trusted adult (d) put secrets in comments
28. 28.True or false: <li> is an empty tag. (a) True (b) False
29. 29.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
30. 30.🌈 Which colour is #ffff00? (a) white (b) yellow (c) cyan (d) red
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      text-align: center;
      width: 300px;
      background-color: yellow;
    }
32. 32.🔢 On a typical page, from top to bottom, which comes first: “<nav>” or “<footer>”? (a) <nav> (b) <footer>
33. 33.Which colour pair is easy to read? (a) blue on purple (b) yellow on white (c) red on green (d) black on white
34. 34.📝 What does <br> do? (a) makes text bold (b) adds a picture (c) makes a list (d) starts a new line
35. 35.True or false: <ul><li>Art</li></ul> goes in style.css. (a) True (b) False
36. 36.🖌️ What colour is behind the letters?
    li {
      color: yellow;
      text-align: right;
      background-color: red;
      font-size: 36px;
    } (a) red (b) orange (c) yellow
37. 37.📝 On how many lines does the browser show this paragraph?
    <p>Birds sing<br>Roses are red<br>Rivers flow<br>Stars shine<br>Sky is blue</p>
38. 38.🌈 Which hex code is black? (a) #ffffff (b) #ff0000 (c) #0000ff (d) #000000
39. 39.📋 Which list tag is one item of a list? (a) <ul> (b) <li> (c) <ol>
40. 40.🖼️ Which picture file does the browser load?
    <img src="dog.jpg" alt="A happy dog" width="350"> (a) bus.jpg (b) dog.jpg (c) A happy dog (d) moon.png

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