Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 515 · 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.📝 On how many lines does the browser show this paragraph?
   <p>Stars shine<br>Birds sing<br>Roses are red<br>Sky is blue<br>Kites fly high</p>
2. 2.⚖️ What colour is the text of this element?
   <h1 class="star" id="top">Hi</h1>
   CSS:
   .star { color: yellow; }
   h1 { color: purple; }
   #top { color: red; } (a) orange (b) purple (c) yellow (d) red
3. 3.🖌️ How big is the text, in px?
   p {
     text-align: left;
     color: purple;
     font-size: 20px;
     background-color: blue;
   }
4. 4.⚖️ What colour is the text of this element?
   <p class="big" id="intro">Hi</p>
   CSS:
   p { color: black; }
   p { color: purple; } (a) orange (b) black (c) purple (d) white
5. 5.📊 How many rows does this table have?
   <table>
     <tr><th>Name</th><th>Fruit</th></tr>
     <tr><td>Grapes</td><td>Banana</td></tr>
   </table>
6. 6.🔁 How many times does this code print “Welcome”?
   for (let i = 2; i <= 6; i++) {
     console.log("Welcome");
   }
7. 7.True or false: the server shows the page to you. (a) True (b) False
8. 8.🔠 Which heading shows the SMALLEST text: <h3>, <h4>, <h6> or <h1>? (a) <h4> (b) <h3> (c) <h1> (d) <h6>
9. 9.What does font-family do? (a) makes letters bigger (b) picks the font style (c) sets the letter colour (d) colours behind the text
10. 10.🔍 One closing tag is missing. Which one?
    <small>My pets</small>
    <i>Hello, world!</i>
    <h1>Cricket is fun. (a) </i> (b) </h1> (c) </small> (d) </b>
11. 11.🔗 Which words do you click on?
    <a href="games.html">Maths fun</a> (a) href (b) Maths fun (c) games.html (d) Art corner
12. 12.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 6px;
      }
    }
13. 13.True or false: HTTPS scrambles data on its way. (a) True (b) False
14. 14.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 15px;
      border: 4px solid black;
      margin: 0px;
    }
15. 15.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Jamun</td><td>Mango</td></tr>
      <tr><td>Mango</td><td>Papaya</td></tr>
      <tr><td>Orange</td><td>Litchi</td></tr>
    </table>
16. 16.🛡️ Online: is it safe to download from pop-ups? (a) safe (b) not safe
17. 17.🎯 Which element does the selector #top style? (a) <h2 class="menu"> (b) <h1 class="top"> (c) <h1 id="top"> (d) <h1 id="intro">
18. 18.🧭 Which semantic tag helps you move around? (a) <footer> (b) <article> (c) <nav> (d) <header>
19. 19.Which of these is a strong password? (a) Kite_Fl1es@Dawn (b) abcd1234 (c) password (d) 123456
20. 20.True or false: <ul> goes inside ul or ol. (a) True (b) False
21. 21.🔢 To build and share your first web page, which comes FIRST? (a) add CSS styles (b) plan what to show (c) test in a browser (d) write the HTML
22. 22.True or false: in <img>, alt describes the picture. (a) True (b) False
23. 23.🔠 Which heading shows the BIGGEST text: <h4>, <h2>, <h6> or <h1>? (a) <h6> (b) <h1> (c) <h2> (d) <h4>
24. 24.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="fort.jpg" alt="An old fort" width="400"> (a) fort.jpg (b) width (c) An old fort (d) A tiger asleep
25. 25.🌈 Which hex code is black? (a) #000000 (b) #ffff00 (c) #0000ff (d) #00ff00
26. 26.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
27. 27.📝 Which input type lets you pick only one? (a) email (b) radio (c) submit (d) text
28. 28.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) turned off (c) 600px or wider (d) exactly 1000px
29. 29.⚖️ What colour is the text of this element?
    <p class="menu" id="intro">Hi</p>
    CSS:
    p { color: yellow; }
    .menu { color: red; }
    #intro { color: blue; } (a) yellow (b) blue (c) red (d) purple
30. 30.🌍 Which one shows the page to you? (a) the URL (b) HTTPS (c) the server (d) the browser
31. 31.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    } (a) No (b) Yes
32. 32.🌍 What is the protocol in this URL?
    http://kids.example.org/games/chess.html (a) kids.example.org (b) http (c) /games/chess.html (d) https
33. 33.📝 How many paragraphs does this code make?
    <p>Fun facts</p>
    <p>I love mangoes.</p>
    <p>Our school trip</p>
34. 34.🛡️ Online: is it safe to ask before downloading? (a) not safe (b) safe
35. 35.📋 How many items does this list show?
    <ul>
      <li>Guava</li>
      <li>Mango</li>
      <li>Jamun</li>
    </ul>
36. 36.🔁 What does this code print?
    let score = 10;
    if (score < 16) {
      console.log("You win");
    } else {
      console.log("Play again");
    } (a) You win (b) Play again
37. 37.⚖️ What colour is the text of this element?
    <p class="note" id="intro">Hi</p>
    CSS:
    p { color: white; }
    .note { color: orange; }
    #intro { color: blue; } (a) orange (b) black (c) white (d) blue
38. 38.🔗 Where does this link open?
    <a href="maths.html" target="_blank">About us</a> (a) in a new tab (b) in the same tab
39. 39.📋 Does this list show bullets or numbers?
    <ul>
      <li>Jamun</li>
      <li>Orange</li>
    </ul> (a) bullets (b) numbers
40. 40.🖌️ What colour is behind the letters?
    h2 {
      color: blue;
      background-color: orange;
      font-size: 36px;
      text-align: right;
    } (a) blue (b) red (c) orange

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