Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 425 · 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.🔢 On a typical page, from top to bottom, which comes FIRST? (a) <header> (b) <main> (c) <nav> (d) <footer>
2. 2.🖌️ How big is the text, in px?
   h1 {
     text-align: right;
     color: blue;
     font-size: 36px;
     background-color: green;
   }
3. 3.📝 Does <p> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
4. 4.✍️ CSS declarations go inside which brackets? (a) [ ] (b) ( ) (c) < > (d) { }
5. 5.⚖️ What colour is the text of this element?
   <h2 class="red" id="top">Hi</h2>
   CSS:
   h2 { color: red; }
   h2 { color: black; } (a) black (b) yellow (c) orange (d) red
6. 6.🔠 How many headings are in this code?
   <h1>Fun facts</h1>
   <p>Hello, world!</p>
   <h2>Hello, world!</h2>
   <h3>Fun facts</h3>
7. 7.🧭 Why use <nav> instead of <div> for a menu? (a) it loads faster (b) it tells its meaning (c) it makes text red (d) it adds pictures
8. 8.📄 What is the big heading shown on this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Art Gallery</title>
   </head>
   <body>
     <h1>My drawings</h1>
     <p>Thanks for visiting.</p>
   </body>
   </html> (a) Thanks for visiting. (b) body (c) My drawings (d) Art Gallery
9. 9.📋 Which tag goes around each item of a list? (a) <ol> (b) <ul> (c) <p> (d) <li>
10. 10.What does font-family do? (a) picks the font style (b) sets the letter colour (c) makes the text bold (d) centres a heading
11. 11.True or false: <li> is one item of a list. (a) False (b) True
12. 12.⚖️ What colour is the text of this element?
    <h1 class="red" id="hero">Hi</h1>
    CSS:
    h1 { color: white; }
    .red { color: orange; } (a) black (b) green (c) orange (d) white
13. 13.📝 Which input type lets you pick only one? (a) radio (b) text (c) password (d) checkbox
14. 14.🔗 Where does this link open?
    <a href="art.html">Play games</a> (a) in a new tab (b) in the same tab
15. 15.💬 How many paragraphs show on the page?
    <!-- <p>My best friend</p> -->
    <!-- <p>The red kite</p> -->
    <!-- <p>Rain today</p> -->
    <p>Cricket is fun.</p>
16. 16.🖼️ Which attribute of <img> describes the picture? (a) height (b) width (c) alt (d) src
17. 17.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>Here is my best one.</p>
    </body>
    </html> (a) Here is my best one. (b) body (c) My Hobbies (d) Welcome!
18. 18.🛡️ Should you share your password with your best friend? (a) Yes (b) No
19. 19.Which of these is padding? (a) the gap to other boxes (b) the gap round content (c) space outside the border (d) the text or picture
20. 20.♿ Who uses a screen reader? (a) only teachers (b) only coders (c) only robots (d) people who are blind
21. 21.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 15px;
      border: 3px solid black;
      margin: 15px;
    }
22. 22.📊 How many cells are in each row?
    <table>
      <tr><td>Guava</td><td>Litchi</td></tr>
      <tr><td>Papaya</td><td>Grapes</td></tr>
      <tr><td>Jamun</td><td>Orange</td></tr>
    </table>
23. 23.🔢 When you open a web page, what comes right after “the server sends files”? (a) DNS finds the server (b) the browser shows it (c) you type the URL (d) the browser asks it
24. 24.🔁 How many times does this code print “Hello”?
    for (let i = 3; i < 8; i++) {
      console.log("Hello");
    }
25. 25.Which of these is not safe to do online? (a) use a nickname in games (b) tell a trusted adult (c) post your home address (d) keep passwords secret
26. 26.✍️ What is the selector in this CSS rule?
    .note {
      margin: 10px;
      font-size: 20px;
      font-weight: bold;
      font-style: italic;
    } (a) margin (b) .note (c) 20px (d) #top
27. 27.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 390px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 80px wide (no margins).
28. 28.🔠 How many headings are in this code?
    <h1>Rain today</h1>
    <p>Hello, world!</p>
    <h3>Hello, world!</h3>
29. 29.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 500px;
      justify-content: center;
    }
    Inside are 4 boxes, each 100px wide (no margins).
30. 30.💬 Why do coders write comments? (a) to add colour (b) to make links (c) to leave notes (d) to show pictures
31. 31.True or false: in <img>, alt is read by screen readers. (a) True (b) False
32. 32.💬 Can anyone read your comments by viewing the page source? (a) No (b) Yes
33. 33.🔍 Which is the odd one out? (a) counts down a timer (b) reacts to a button click (c) makes a form box (d) shows a pop-up message
34. 34.True or false: #top { color: blue; } goes in index.html. (a) False (b) True
35. 35.📋 How many items does this list show?
    <ul>
      <li>Banana</li>
      <li>Litchi</li>
      <li>Orange</li>
    </ul>
36. 36.🔠 Which heading shows the BIGGEST text: <h1>, <h4>, <h2> or <h6>? (a) <h2> (b) <h1> (c) <h4> (d) <h6>
37. 37.✍️ In color: blue; which part is the property? (a) : (b) color (c) ; (d) blue
38. 38.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
39. 39.🖌️ How big is the text, in px?
    h1 {
      text-align: center;
      background-color: purple;
      color: green;
      font-size: 16px;
    }
40. 40.🔁 How many times does this code print “Well done”?
    for (let i = 2; i < 4; i++) {
      console.log("Well done");
    }

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