Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 506 · 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.🛡️ Online: is it safe to meet an online stranger? (a) not safe (b) safe
2. 2.True or false: CSS makes headings and lists. (a) True (b) False
3. 3.📋 Which list shows the steps of a recipe best? (a) <ol> (b) <br> (c) <hr> (d) <ul>
4. 4.💬 How does an HTML comment start? (a) # (b) // (c) /* (d) <!--
5. 5.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) exactly 1000px (c) 600px or narrower (d) 600px or wider
6. 6.📦 In the box model, which part is space outside the border? (a) border (b) margin (c) padding (d) content
7. 7.🔢 On a typical page, from top to bottom, which comes first: “<header>” or “<main>”? (a) <main> (b) <header>
8. 8.🎯 What kind of selector is img? (a) a class selector (b) an id selector (c) an element selector
9. 9.📋 How many items does this list show?
   <ol>
     <li>Guava</li>
     <li>Mango</li>
     <li>Orange</li>
     <li>Banana</li>
     <li>Papaya</li>
   </ol>
10. 10.💬 How many paragraphs show on the page?
    <!-- <p>Rain today</p> -->
    <p>I love mangoes.</p>
    <p>Fun facts</p>
11. 11.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 180px;
      padding: 25px;
      border: 1px solid black;
      margin: 0px;
    }
12. 12.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Mango
      <input type="checkbox" name="fruit"> Guava
      <input type="checkbox" name="fruit"> Litchi
      <input type="checkbox" name="fruit"> Banana
      <input type="checkbox" name="fruit"> Papaya
    </form>
13. 13.📋 Which list tag lists steps in order? (a) <li> (b) <ul> (c) <ol>
14. 14.🔢 In a basic web page file, which comes first: “<!DOCTYPE html>” or “</html>”? (a) <!DOCTYPE html> (b) </html>
15. 15.What does justify-content: center do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
16. 16.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 6; i = i + 3) {
      console.log(i);
    }
17. 17.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) turned off (c) 800px or wider (d) exactly 100px
18. 18.⚡ What number does this code print?
    let apples = 5;
    apples = apples + 6;
    apples = apples - 1;
    console.log(apples);
19. 19.⚡ What number does this code print?
    let apples = 28;
    apples = apples + 6;
    apples = apples - 27;
    console.log(apples);
20. 20.🧭 Which semantic tag holds extra side notes? (a) <article> (b) <aside> (c) <footer> (d) <nav>
21. 21.🔗 Which words do you click on?
    <a href="games.html">About us</a> (a) href (b) Contact us (c) games.html (d) About us
22. 22.🏷️ Is <p> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
23. 23.🌈 Which hex code is black? (a) #ffff00 (b) #000000 (c) #ff0000 (d) #ffffff
24. 24.What does background-color do? (a) makes the text bold (b) picks the font style (c) makes letters bigger (d) colours behind the text
25. 25.🔍 Which is the odd one out? (a) shows pages from the web (b) hosts websites online (c) turns HTML into a page (d) opens web pages for us
26. 26.📊 In a table, which tag is a row? (a) <tr> (b) <th> (c) <td> (d) <tb>
27. 27.✍️ What value is given to margin in this rule?
    p {
      color: red;
      padding: 8px;
      margin: 10px;
    } (a) bold (b) 10px (c) 8px (d) margin
28. 28.True or false: <meta charset="utf-8"> goes in the head. (a) True (b) False
29. 29.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 4; i++) {
      total = total + i;
    }
    console.log(total);
30. 30.🖌️ What colour is behind the letters?
    p {
      color: black;
      text-align: right;
      background-color: orange;
      font-size: 40px;
    } (a) purple (b) black (c) orange
31. 31.⚖️ What colour is the text of this element?
    <p class="red" id="intro">Hi</p>
    CSS:
    .red { color: white; }
    .red { color: black; } (a) orange (b) black (c) purple (d) white
32. 32.🔢 On a typical page, from top to bottom, which comes LAST? (a) <nav> (b) <footer> (c) <header> (d) <main>
33. 33.💬 Which text will NOT show on the page?
    <!-- <p>Cricket is fun.</p> -->
    <p>I love mangoes.</p>
    <p>My pets</p> (a) Cricket is fun. (b) I love mangoes. (c) My pets
34. 34.📋 Does this list show bullets or numbers?
    <ul>
      <li>Grapes</li>
      <li>Guava</li>
      <li>Papaya</li>
    </ul> (a) numbers (b) bullets
35. 35.📄 Can HTML on its own make bullet lists? (a) No (b) Yes
36. 36.🌈 Which colour is #ffffff? (a) bright green (b) black (c) white (d) yellow
37. 37.🔒 Is the connection to this address scrambled (encrypted)?
    https://kids.example.org/about.html (a) No (b) Yes
38. 38.Which of these is the border? (a) space inside the border (b) space outside the border (c) the gap round content (d) a solid or dotted edge
39. 39.🌍 What is the domain name in this URL?
    http://www.example.net/index.html (a) learn.example.com (b) /index.html (c) www.example.net (d) http
40. 40.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector

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