Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 352 · 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.📋 Does this list show bullets or numbers?
   <ol>
     <li>Grapes</li>
     <li>Papaya</li>
     <li>Litchi</li>
   </ol> (a) bullets (b) numbers
2. 2.Which of these is a strong password? (a) 123456 (b) iloveyou (c) password (d) Chai$Cup_19x
3. 3.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 7; i++) {
     total = total + 5;
   }
   console.log(total);
4. 4.True or false: a web browser has an address bar. (a) True (b) False
5. 5.⚡ Which JavaScript word repeats code? (a) if (b) alert() (c) console.log() (d) for
6. 6.🚀 Which file is best for the colours and fonts? (a) index.html (b) photo.jpg (c) script.js (d) style.css
7. 7.Which of these is true of a web browser? (a) answers page requests (b) colours code to help us (c) opens web pages for us (d) is where we type code
8. 8.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 26px;
     }
   }
9. 9.True or false: <img> goes in the body. (a) True (b) False
10. 10.⚖️ What colour is the text of this element?
    <h1 class="box" id="end">Hi</h1>
    CSS:
    .box { color: blue; }
    .box { color: yellow; } (a) orange (b) yellow (c) blue (d) white
11. 11.True or false: “images with no alt” helps everyone use the page. (a) False (b) True
12. 12.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 230px;
      padding: 5px;
      border: 3px solid black;
      margin: 10px;
    }
13. 13.True or false: to put secrets in comments is safe. (a) False (b) True
14. 14.⚖️ What colour is the text of this element?
    <p class="menu" id="main">Hi</p>
    CSS:
    #main { color: red; }
    #main { color: white; } (a) white (b) red (c) black (d) blue
15. 15.📝 Does <li> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
16. 16.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) flex-start (d) center
17. 17.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
18. 18.True or false: #main is an element selector. (a) False (b) True
19. 19.📄 What is the first line of an HTML5 page? (a) <head> (b) <!DOCTYPE html> (c) <html> (d) <body>
20. 20.♿ Who uses a screen reader? (a) only teachers (b) people who are blind (c) only robots (d) only coders
21. 21.🌐 Which one shows line numbers? (a) a web server (b) a code editor (c) a web browser
22. 22.♿ Is this heading order correct (no level skipped)?
    <h1> → <h1> → <h3> → <h4> (a) Yes (b) No
23. 23.🛡️ Should you share your password with your best friend? (a) Yes (b) No
24. 24.🛡️ Is it safe to use the same password on every site? (a) Yes (b) No
25. 25.🌗 Is blue on purple easy or hard to read? (a) hard to read (b) easy to read
26. 26.🎯 Which CSS selector matches this element?
    <h1 class="box" id="top">Hello</h1> (a) #intro (b) #top (c) .top (d) h2
27. 27.📋 How many items does this list show?
    <ol>
      <li>Banana</li>
      <li>Guava</li>
      <li>Papaya</li>
      <li>Litchi</li>
      <li>Orange</li>
    </ol>
28. 28.🔁 What does i++ do? (a) takes 1 from i (b) doubles i (c) adds 1 to i (d) prints i
29. 29.🖼️ Which attribute of <img> names the picture file? (a) src (b) alt (c) width (d) height
30. 30.⚖️ What colour is the text of this element?
    <p class="box" id="hero">Hi</p>
    CSS:
    .box { color: orange; }
    #hero { color: green; }
    p { color: red; } (a) green (b) orange (c) red (d) black
31. 31.🏷️ Is <title> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
32. 32.🔗 What does target="_blank" do to a link? (a) hides the link (b) opens it in a new tab (c) makes it bold (d) makes it blank
33. 33.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="fort.jpg" alt="An old fort" width="150"> (a) width (b) fort.jpg (c) A tiger asleep (d) An old fort
34. 34.🎯 How many elements on a page should have the same id? (a) any number (b) 2 (c) 5 (d) 1
35. 35.📊 How many rows does this table have?
    <table>
      <tr><td>Mango</td><td>Mango</td><td>Papaya</td><td>Orange</td></tr>
      <tr><td>Grapes</td><td>Orange</td><td>Jamun</td><td>Orange</td></tr>
      <tr><td>Guava</td><td>Guava</td><td>Guava</td><td>Guava</td></tr>
      <tr><td>Papaya</td><td>Jamun</td><td>Banana</td><td>Papaya</td></tr>
    </table>
36. 36.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    .note { color: green; }
    .note { color: orange; } (a) orange (b) white (c) green (d) purple
37. 37.📝 How many <input> tags are in this form?
    <form>
      <input type="checkbox">
      <input type="email">
      <input type="submit" value="Send">
    </form>
38. 38.🔢 On a typical page, from top to bottom, what comes right after “<nav>”? (a) <header> (b) <footer> (c) <main>
39. 39.True or false: .star is an id selector. (a) True (b) False
40. 40.🔗 Which attribute holds the address of a link? (a) href (b) src (c) alt (d) id

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