Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 555 · 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 list shows the steps of a recipe best? (a) <br> (b) <ul> (c) <hr> (d) <ol>
2. 2.🎯 Which CSS selector matches this element?
   <h1 class="menu" id="hero">Hello</h1> (a) .note (b) h1 (c) #menu (d) h2
3. 3.Which of these is true of <nav>? (a) sits at the bottom (b) helps you move around (c) holds copyright notes (d) sits at the very top
4. 4.✍️ Which sign goes between a property and its value? (a) = (b) ; (c) - (d) :
5. 5.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 8px;
     }
   } (a) No (b) Yes
6. 6.📝 What does <hr> draw? (a) a picture (b) a link (c) a table (d) a line across the page
7. 7.True or false: <input type="radio"> hides what you type. (a) False (b) True
8. 8.🖼️ Why do we add alt text to an image? (a) to colour it (b) to make it bigger (c) to describe the image (d) to load it faster
9. 9.⚡ What does this code show?
   let name = "Kabir";
   alert("Hello, " + name + "!"); (a) name (b) Hello, Kabir! (c) Hello, name! (d) Kabir
10. 10.📝 On how many lines does the browser show this paragraph?
    <p>Stars shine<br>Rivers flow<br>Kites fly high<br>Sky is blue</p>
11. 11.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
12. 12.⚡ What does this code show?
    let name = "Riya";
    console.log("Hello, " + name + "!"); (a) Hello, name! (b) Riya (c) Hello, Riya! (d) name
13. 13.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Jamun</td><td>Papaya</td></tr>
      <tr><td>Guava</td><td>Guava</td></tr>
    </table>
14. 14.🏷️ Is <title> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
15. 15.📄 Where does <img> go: in the head or in the body? (a) in the body (b) in the head
16. 16.⚡ What does this code show?
    let name = "Zoya";
    alert("Hello, " + name + "!"); (a) Hello, name! (b) Zoya (c) Hello, Zoya! (d) name
17. 17.🔠 How many headings are in this code?
    <h1>Rain today</h1>
    <p>My best friend</p>
    <p>Our school trip</p>
    <h4>Our school trip</h4>
    <p>Fun facts</p>
18. 18.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
19. 19.📝 How many <input> tags are in this form?
    <form>
      <input type="text">
      <input type="password">
      <input type="submit" value="Send">
    </form>
20. 20.🔁 Which loop repeats code a set number of times? (a) let (b) for (c) if (d) else
21. 21.🌍 What is the path in this URL?
    http://kids.example.org/news/today.html (a) http (b) kids.example.org (c) /games/chess.html (d) /news/today.html
22. 22.⚡ What does alert() show? (a) a new tab (b) a table (c) a picture (d) a pop-up box
23. 23.🔗 Which words do you click on?
    <a href="games.html">Contact us</a> (a) Visit the site (b) games.html (c) Contact us (d) href
24. 24.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h2> → <h2> (a) Yes (b) No
25. 25.True or false: a web server sends pages over the net. (a) True (b) False
26. 26.🔍 Which line is missing its closing tag?
    line 1: <u>My best friend</u>
    line 2: <h1>Cricket is fun.
    line 3: <i>Our school trip</i> (a) line 2 (b) line 1 (c) line 3
27. 27.🎯 Which element does the selector #top style? (a) <p class="top"> (b) <p id="top"> (c) <h1 class="note"> (d) <p id="intro">
28. 28.⚡ What does this code show?
    let name = "Meera";
    alert("Hello, " + name + "!"); (a) Meera (b) Hello, name! (c) Hello, Meera! (d) name
29. 29.⚖️ What colour is the text of this element?
    <p class="star" id="logo">Hi</p>
    CSS:
    #logo { color: yellow; }
    #logo { color: purple; } (a) orange (b) black (c) yellow (d) purple
30. 30.🔗 Where does this link open?
    <a href="games.html">Maths fun</a> (a) in the same tab (b) in a new tab
31. 31.💬 How many paragraphs show on the page?
    <!-- <p>Cricket is fun.</p> -->
    <p>The red kite</p>
    <p>Rain today</p>
    <p>Good morning!</p>
    <p>I love mangoes.</p>
32. 32.🌈 Which colour is rgb(255, 255, 255)? (a) magenta (b) yellow (c) white (d) bright green
33. 33.🔠 Which tag is used for the main title on a page? (a) <h6> (b) <h1> (c) <p> (d) <br>
34. 34.🏷️ Which is the closing tag for <em>? (a) <em/> (b) <\em> (c) </em> (d) <em>
35. 35.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
36. 36.📝 How many paragraphs does this code make?
    <p>I love mangoes.</p>
    <p>Cricket is fun.</p>
    <p>My pets</p>
37. 37.🖌️ What colour are the letters?
    h2 {
      font-size: 20px;
      text-align: center;
      background-color: blue;
      color: red;
    } (a) red (b) black (c) blue
38. 38.🎯 Which element does the selector h2 style? (a) <div class="note"> (b) <span id="logo"> (c) <li> (d) <h2 class="note">
39. 39.True or false: HTML on its own can show paragraphs. (a) True (b) False
40. 40.🎨 What does CSS stand for? (a) Creative Sheet System (b) Colourful Site Styles (c) Computer Style Sheets (d) Cascading Style Sheets

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