Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 80 · 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 line is missing its closing tag?
   line 1: <small>My best friend</small>
   line 2: <u>Rain today</u>
   line 3: <i>Hello, world! (a) line 3 (b) line 2 (c) line 1
2. 2.🔠 Which tag is used for the main title on a page? (a) <p> (b) <h1> (c) <br> (d) <h6>
3. 3.What does justify-content: space-between 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
4. 4.📊 How many rows does this table have?
   <table>
     <tr><td>Orange</td><td>Papaya</td></tr>
     <tr><td>Banana</td><td>Guava</td></tr>
     <tr><td>Mango</td><td>Mango</td></tr>
     <tr><td>Banana</td><td>Banana</td></tr>
   </table>
5. 5.⚡ Which JavaScript word writes in the console? (a) if (b) alert() (c) console.log() (d) let
6. 6.🔗 Which tag makes a clickable link? (a) <img> (b) <a> (c) <link> (d) <p>
7. 7.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the title tag (c) the br tag (d) the hr tag
8. 8.🖼️ Which attribute of <img> sets how wide it is? (a) src (b) height (c) alt (d) width
9. 9.🔗 Which address opens when you click this link?
   <a href="contact.html">Visit the site</a> (a) https://example.com (b) Visit the site (c) contact.html (d) maths.html
10. 10.📊 Which tag makes one table row? (a) <th> (b) <tr> (c) <td> (d) <table>
11. 11.🔢 When you open a web page, what comes right after “the browser asks it”? (a) the browser shows it (b) DNS finds the server (c) you type the URL (d) the server sends files
12. 12.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 20px;
      border: 1px solid black;
      margin: 20px;
    }
13. 13.🔠 Which heading shows the SMALLEST text: <h6>, <h3>, <h1> or <h2>? (a) <h3> (b) <h2> (c) <h6> (d) <h1>
14. 14.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Litchi
      <input type="checkbox" name="fruit"> Mango
      <input type="checkbox" name="fruit"> Banana
    </form>
15. 15.🔗 Which attribute holds the address of a link? (a) id (b) href (c) src (d) alt
16. 16.⚡ Which word makes a new variable? (a) put (b) make (c) let (d) give
17. 17.🖌️ What colour is behind the letters?
    li {
      background-color: red;
      color: yellow;
      font-size: 12px;
      text-align: center;
    } (a) green (b) red (c) yellow
18. 18.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 16px;
      }
    }
19. 19.🎯 What kind of selector is .note? (a) a class selector (b) an element selector (c) an id selector
20. 20.🏷️ Is <p> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
21. 21.⚖️ What colour is the text of this element?
    <h1 class="note" id="logo">Hi</h1>
    CSS:
    h1 { color: blue; }
    h1 { color: yellow; } (a) purple (b) yellow (c) blue (d) orange
22. 22.Which of these is not safe to do online? (a) post your home address (b) use a nickname in games (c) log out on shared PCs (d) keep passwords secret
23. 23.⚖️ What colour is the text of this element?
    <p class="star" id="main">Hi</p>
    CSS:
    #main { color: red; }
    .star { color: white; }
    p { color: purple; } (a) white (b) purple (c) green (d) red
24. 24.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
25. 25.⚡ What does this code show?
    let name = "Meera";
    alert("Hi, " + name + "!"); (a) name (b) Hi, Meera! (c) Hi, name! (d) Meera
26. 26.📄 What is the first line of an HTML5 page? (a) <body> (b) <html> (c) <head> (d) <!DOCTYPE html>
27. 27.📝 Which input type lets you pick only one? (a) checkbox (b) email (c) radio (d) password
28. 28.💬 Why do coders write comments? (a) to leave notes (b) to make links (c) to show pictures (d) to add colour
29. 29.Which of these is a strong password? (a) Chai$Cup_19x (b) riya2014 (c) 123456 (d) 111111
30. 30.📋 Does this list show bullets or numbers?
    <ol>
      <li>Orange</li>
      <li>Litchi</li>
      <li>Mango</li>
    </ol> (a) bullets (b) numbers
31. 31.📝 How many paragraphs does this code make?
    <p>Good morning!</p>
    <h2>Cricket is fun.</h2>
    <p>The red kite</p>
32. 32.📝 On how many lines does the browser show this paragraph?
    <p>Birds sing<br>Stars shine</p>
33. 33.🔗 Which address opens when you click this link?
    <a href="news.html">Maths fun</a> (a) Maths fun (b) news.html (c) games.html (d) quiz.html
34. 34.📄 Can HTML on its own show paragraphs? (a) No (b) Yes
35. 35.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 90px;
      padding: 20px;
      border: 2px solid black;
      margin: 20px;
    }
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }
37. 37.📝 What does <br> do? (a) starts a new line (b) makes a list (c) makes text bold (d) adds a picture
38. 38.📝 Which input type lets you tick many? (a) submit (b) number (c) checkbox (d) radio
39. 39.📋 How many items does this list show?
    <ol>
      <li>Banana</li>
      <li>Guava</li>
      <li>Papaya</li>
      <li>Grapes</li>
    </ol>
40. 40.🖌️ Where does the text sit on its line?
    h2 {
      background-color: white;
      text-align: left;
      font-size: 40px;
      color: green;
    } (a) on the left (b) in the middle (c) on the right

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