Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 438 · 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.🖌️ What colour is behind the letters?
   p {
     background-color: yellow;
     color: blue;
     font-size: 36px;
     text-align: left;
   } (a) green (b) blue (c) yellow
2. 2.📝 Which input type lets you pick only one? (a) email (b) checkbox (c) text (d) radio
3. 3.🏷️ Is <p> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
4. 4.Which of these is true of <header>? (a) sits at the very top (b) holds the menu of links (c) holds extra side notes (d) helps you move around
5. 5.True or false: HTML sets colours and fonts. (a) False (b) True
6. 6.🧭 Which semantic tag is the page’s key part? (a) <footer> (b) <header> (c) <main> (d) <nav>
7. 7.🖌️ How big is the text, in px?
   h2 {
     font-size: 24px;
     color: white;
     text-align: center;
     background-color: purple;
   }
8. 8.📋 Which list suits a shopping list in any order? (a) <hr> (b) <br> (c) <ul> (d) <ol>
9. 9.Which of these is true of a web server? (a) shows pages from the web (b) sends pages over the net (c) opens web pages for us (d) shows line numbers
10. 10.💬 Which text will NOT show on the page?
    <!-- <p>The red kite</p> -->
    <p>I love mangoes.</p>
    <p>My pets</p>
    <p>Fun facts</p> (a) I love mangoes. (b) Fun facts (c) The red kite (d) My pets
11. 11.🔗 Which address opens when you click this link?
    <a href="games.html">School news</a> (a) games.html (b) School news (c) about.html (d) contact.html
12. 12.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) blue (c) red (d) green
13. 13.🖼️ Why do we add alt text to an image? (a) to describe the image (b) to make it bigger (c) to colour it (d) to load it faster
14. 14.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="moon.png" alt="The full moon" width="150"> (a) moon.png (b) Our school bus (c) The full moon (d) width
15. 15.Which of these is a weak password? (a) S0lar!Pen#8 (b) 111111 (c) Chai$Cup_19x (d) Mango#Kite29!
16. 16.🔠 Which heading shows the BIGGEST text: <h4>, <h6>, <h2> or <h1>? (a) <h2> (b) <h6> (c) <h1> (d) <h4>
17. 17.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 9; i++) {
      total = total + i;
    }
    console.log(total);
18. 18.True or false: <link rel="stylesheet"> goes in the head. (a) False (b) True
19. 19.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    }
20. 20.🔁 Which word runs code only when something is true? (a) let (b) log (c) for (d) if
21. 21.📊 How many cells are in each row?
    <table>
      <tr><td>Guava</td><td>Grapes</td></tr>
      <tr><td>Jamun</td><td>Litchi</td></tr>
    </table>
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      font-weight: bold;
    }
23. 23.📝 On how many lines does the browser show this paragraph?
    <p>Roses are red<br>Rivers flow<br>Kites fly high</p>
24. 24.⚡ 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
25. 25.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 17; i = i + 4) {
      console.log(i);
    }
26. 26.📊 How many cells does this table have in all?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Grapes</td><td>Papaya</td><td>Banana</td><td>Papaya</td></tr>
    </table>
27. 27.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 430px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).
28. 28.🚀 Where in index.html does the link to style.css go? (a) after </html> (b) in the footer (c) in the head (d) inside a <p>
29. 29.📋 Which list shows the steps of a recipe best? (a) <br> (b) <ol> (c) <ul> (d) <hr>
30. 30.True or false: in <img>, height sets how tall it is. (a) True (b) False
31. 31.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    h1 { color: white; }
    .note { color: blue; }
    #main { color: purple; } (a) red (b) purple (c) white (d) blue
32. 32.✍️ What value is given to font-size in this rule?
    .note {
      border: 2px solid;
      font-size: 20px;
    } (a) yellow (b) center (c) font-size (d) 20px
33. 33.🔠 How many headings are in this code?
    <h1>I love mangoes.</h1>
    <h2>Our school trip</h2>
    <p>My pets</p>
    <p>The red kite</p>
    <p>My pets</p>
34. 34.What does justify-content: flex-start 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
35. 35.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="sport"> Chess
      <input type="radio" name="sport"> Cricket
      <input type="radio" name="sport"> Football
    </form>
36. 36.What does text-align do? (a) colours behind the text (b) picks the font style (c) makes letters bigger (d) centres a heading
37. 37.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>Easy snacks</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) Easy snacks (b) body (c) Class 7 Blog (d) I like to read.
38. 38.🔗 Which words do you click on?
    <a href="maths.html">About us</a> (a) maths.html (b) href (c) About us (d) Contact us
39. 39.♿ Is this heading order correct (no level skipped)?
    <h1> → <h1> → <h3> → <h3> (a) No (b) Yes
40. 40.🌍 What is the path in this URL?
    https://www.example.com/games/chess.html (a) www.example.com (b) https (c) /games/chess.html (d) /about.html

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