Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 51 · 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 BIGGEST text: <h1>, <h2>, <h6> or <h5>? (a) <h2> (b) <h6> (c) <h5> (d) <h1>
2. 2.💬 Why do coders write comments? (a) to show pictures (b) to make links (c) to leave notes (d) to add colour
3. 3.⚡ What number does this code print?
   let books = 18;
   books = books + 19;
   books = books - 18;
   console.log(books);
4. 4.🔍 Which is the odd one out? (a) checks a quiz answer (b) counts down a timer (c) adds space around boxes (d) changes the page live
5. 5.✍️ What is the selector in this CSS rule?
   .note {
     width: 300px;
     text-align: center;
   } (a) .note (b) width (c) center (d) #top
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   .box {
     color: red;
   }
7. 7.True or false: the server stores the site’s files. (a) False (b) True
8. 8.Which of these goes in the head? (a) <ul> (b) <h1> (c) <link rel="stylesheet"> (d) <table>
9. 9.📄 Where does the text of <title> appear? (a) in a big heading (b) at the bottom (c) on the browser tab (d) nowhere
10. 10.🌈 Which hex code is blue? (a) #0000ff (b) #ffffff (c) #ffff00 (d) #00ff00
11. 11.🌍 What does a web address (URL) tell the browser? (a) where the page is (b) the page colour (c) how old you are (d) your password
12. 12.🔁 What does i++ do? (a) adds 1 to i (b) takes 1 from i (c) prints i (d) doubles i
13. 13.🔢 On a typical page, from top to bottom, which comes LAST? (a) <header> (b) <footer> (c) <main> (d) <nav>
14. 14.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) center (c) flex-end (d) flex-start
15. 15.🎯 Which sign starts a class selector? (a) & (b) @ (c) # (d) .
16. 16.♿ Is this heading order correct (no level skipped)?
    <h1> → <h3> → <h3> → <h4> (a) No (b) Yes
17. 17.🧭 Which semantic tag sits at the bottom? (a) <nav> (b) <header> (c) <footer> (d) <aside>
18. 18.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>Easy snacks</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) I like to read. (b) index.html (c) My Hobbies (d) Easy snacks
19. 19.🖌️ Where does the text sit on its line?
    p {
      text-align: left;
      font-size: 36px;
      color: red;
      background-color: orange;
    } (a) on the right (b) on the left (c) in the middle
20. 20.🎨 Which attribute adds CSS inside one tag? (a) src (b) href (c) alt (d) style
21. 21.⚡ Where does console.log() show its output? (a) on the title bar (b) in the address bar (c) in the console (d) on the printer
22. 22.📝 Which input type sends the form? (a) date (b) password (c) checkbox (d) submit
23. 23.🔠 Which heading shows the SMALLEST text: <h4>, <h1>, <h6> or <h2>? (a) <h1> (b) <h4> (c) <h2> (d) <h6>
24. 24.🖌️ Which CSS property centres a heading? (a) background-color (b) font-size (c) text-align (d) color
25. 25.🔍 Which line is missing its closing tag?
    line 1: <h2>Good morning!</h2>
    line 2: <h1>I love mangoes.</h1>
    line 3: <u>My pets (a) line 2 (b) line 1 (c) line 3
26. 26.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
27. 27.📊 How many cells are in each row?
    <table>
      <tr><td>Mango</td><td>Guava</td><td>Jamun</td></tr>
      <tr><td>Jamun</td><td>Orange</td><td>Papaya</td></tr>
      <tr><td>Grapes</td><td>Jamun</td><td>Papaya</td></tr>
    </table>
28. 28.🔗 What does target="_blank" do to a link? (a) hides the link (b) makes it blank (c) makes it bold (d) opens it in a new tab
29. 29.What is <input type="submit"> for? (a) lets you pick only one (b) lets you tick many (c) picks a day (d) sends the form
30. 30.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 160px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 50px wide (no margins).
31. 31.✍️ Which sign ends each CSS declaration? (a) : (b) . (c) , (d) ;
32. 32.True or false: <link rel="stylesheet"> goes in the body. (a) True (b) False
33. 33.Which of these is true of <header>? (a) sits at the bottom (b) holds the logo and title (c) holds extra side notes (d) holds copyright notes
34. 34.⚡ What number does this code print?
    let a = 50;
    let b = 38;
    console.log(a + b);
35. 35.⚡ Which JavaScript word writes in the console? (a) let (b) alert() (c) if (d) console.log()
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      border: 2px solid;
      background-color: yellow;
      text-align: center;
      font-weight: bold;
    }
37. 37.📄 Where does <table> go: in the head or in the body? (a) in the body (b) in the head
38. 38.♿ Does this help everyone, or make the page harder to use: colour as the only clue? (a) helps everyone (b) makes it harder
39. 39.💪 Which flexbox property picks row or column? (a) gap (b) display: flex (c) justify-content (d) flex-direction
40. 40.Which of these is a strong password? (a) riya2014 (b) password (c) iloveyou (d) Rain#Drop_42!

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