Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 75 · 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 attribute of <img> describes the picture? (a) width (b) height (c) src (d) alt
2. 2.⚖️ What colour is the text of this element?
   <h1 class="star" id="top">Hi</h1>
   CSS:
   .star { color: black; }
   h1 { color: blue; }
   #top { color: purple; } (a) blue (b) black (c) red (d) purple
3. 3.🔠 How many <h1> headings should a page usually have? (a) 3 (b) 6 (c) 10 (d) 1
4. 4.💬 How many paragraphs show on the page?
   <p>The red kite</p>
   <!-- <p>My best friend</p> -->
   <p>My pets</p>
   <p>Our school trip</p>
5. 5.🖼️ How many pixels wide is the picture drawn?
   <img src="tiger.jpg" alt="A tiger asleep" width="150">
6. 6.🔐 Is qwerty a strong or a weak password? (a) weak (b) strong
7. 7.🌗 Is white on black easy or hard to read? (a) easy to read (b) hard to read
8. 8.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 6; i++) {
     total = total + 3;
   }
   console.log(total);
9. 9.📝 On how many lines does the browser show this paragraph?
   <p>Sky is blue<br>Rivers flow</p>
10. 10.📊 How many cells are in each row?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Grapes</td><td>Papaya</td></tr>
      <tr><td>Guava</td><td>Grapes</td></tr>
      <tr><td>Papaya</td><td>Guava</td></tr>
    </table>
11. 11.True or false: #logo is an element selector. (a) False (b) True
12. 12.🔗 Where does this link open?
    <a href="maths.html" target="_blank">About us</a> (a) in a new tab (b) in the same tab
13. 13.💬 Which text will NOT show on the page?
    <!-- <p>Good morning!</p> -->
    <p>I love mangoes.</p>
    <p>My pets</p> (a) Good morning! (b) I love mangoes. (c) My pets
14. 14.📝 What does <hr> draw? (a) a link (b) a line across the page (c) a picture (d) a table
15. 15.✍️ Which property is set to 10px in this rule?
    h1 {
      margin: 10px;
      font-weight: bold;
    } (a) 10px (b) padding (c) margin (d) font-weight
16. 16.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    }
17. 17.🔢 In a basic web page file, which comes FIRST? (a) </body> (b) <!DOCTYPE html> (c) </head> (d) <body>
18. 18.📝 Does <img> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
19. 19.🖌️ What colour are the letters?
    h1 {
      background-color: yellow;
      font-size: 16px;
      color: green;
      text-align: left;
    } (a) green (b) yellow (c) orange
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 15px;
      border: 3px solid black;
      margin: 15px;
    }
21. 21.♿ Is this heading order correct (no level skipped)?
    <h1> → <h1> → <h2> → <h4> (a) Yes (b) No
22. 22.🔢 To build and share your first web page, what comes right after “add CSS styles”? (a) test in a browser (b) plan what to show (c) publish it online (d) write the HTML
23. 23.🎯 Which sign starts a class selector? (a) # (b) & (c) @ (d) .
24. 24.🔠 Which heading shows the SMALLEST text: <h1>, <h4>, <h5> or <h2>? (a) <h1> (b) <h2> (c) <h5> (d) <h4>
25. 25.⚡ What number does this code print?
    let a = 10;
    let b = 6;
    console.log(a * b);
26. 26.📝 Which input type sends the form? (a) submit (b) text (c) radio (d) password
27. 27.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) flex-start (d) center
28. 28.🚀 Which file should this code go in: h1 { font-size: 32px; } (a) index.html (b) script.js (c) style.css
29. 29.🔗 Which words do you click on?
    <a href="about.html">Visit the site</a> (a) Maths fun (b) Visit the site (c) about.html (d) href
30. 30.🎯 Can many elements share the same class? (a) Yes (b) No
31. 31.🖌️ How big is the text, in px?
    h2 {
      background-color: blue;
      font-size: 12px;
      color: orange;
      text-align: left;
    }
32. 32.♿ Does this help everyone, or make the page harder to use: tiny grey text? (a) makes it harder (b) helps everyone
33. 33.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) space-between (c) flex-end (d) center
34. 34.🔗 Which words do you click on?
    <a href="games.html">Play games</a> (a) Play games (b) href (c) games.html (d) About us
35. 35.🔍 One closing tag is missing. Which one?
    <i>Our school trip</i>
    <b>Good morning!
    <small>I love mangoes.</small> (a) </i> (b) </small> (c) </p> (d) </b>
36. 36.♿ A part of the page is under a <h1> heading. Which tag should its sub-heading use? (a) <h3> (b) <h2> (c) <h4> (d) <h1>
37. 37.✍️ What value is given to font-size in this rule?
    body {
      font-size: 20px;
      margin: 10px;
    } (a) yellow (b) center (c) 20px (d) font-size
38. 38.🔗 Which words do you click on?
    <a href="art.html">Art corner</a> (a) href (b) School news (c) Art corner (d) art.html
39. 39.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
40. 40.🔍 One closing tag is missing. Which one?
    <i>My best friend</i>
    <u>My pets</u>
    <h3>Hello, world! (a) </i> (b) </h1> (c) </h3> (d) </u>

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