Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 577 · 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.📝 How many paragraphs does this code make?
   <p>Hello, world!</p>
   <p>Hello, world!</p>
   <p>Hello, world!</p>
   <p>Our school trip</p>
2. 2.💬 How many paragraphs show on the page?
   <!-- <p>Rain today</p> -->
   <!-- <p>My pets</p> -->
   <!-- <p>Good morning!</p> -->
   <p>I love mangoes.</p>
3. 3.True or false: <ul> goes in the head. (a) True (b) False
4. 4.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 18px;
     }
   }
5. 5.🔗 Which tag makes a clickable link? (a) <img> (b) <a> (c) <link> (d) <p>
6. 6.🌈 Which hex code is magenta? (a) #0000ff (b) #00ff00 (c) #ff00ff (d) #ffff00
7. 7.🚀 Which program lets you see your web page while you build it? (a) a photo viewer (b) a music player (c) a web browser (d) a calculator
8. 8.⚖️ What colour is the text of this element?
   <h2 class="box" id="hero">Hi</h2>
   CSS:
   .box { color: red; }
   .box { color: white; } (a) green (b) red (c) yellow (d) white
9. 9.🎯 What kind of selector is #end? (a) an id selector (b) an element selector (c) a class selector
10. 10.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      width: 300px;
      text-align: center;
    }
12. 12.🔠 Which heading shows the BIGGEST text: <h1>, <h2>, <h6> or <h3>? (a) <h3> (b) <h1> (c) <h6> (d) <h2>
13. 13.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Mango</td><td>Jamun</td><td>Mango</td><td>Mango</td></tr>
      <tr><td>Papaya</td><td>Grapes</td><td>Jamun</td><td>Litchi</td></tr>
    </table>
14. 14.🔠 Which heading shows the BIGGEST text: <h3>, <h6>, <h1> or <h2>? (a) <h1> (b) <h3> (c) <h2> (d) <h6>
15. 15.🔗 Which address opens when you click this link?
    <a href="contact.html">Maths fun</a> (a) contact.html (b) Maths fun (c) https://example.com (d) maths.html
16. 16.True or false: .note is a class selector. (a) True (b) False
17. 17.True or false: a code editor sends pages over the net. (a) False (b) True
18. 18.📝 On how many lines does the browser show this paragraph?
    <p>Birds sing<br>Rivers flow<br>Roses are red<br>Kites fly high<br>Stars shine</p>
19. 19.Which colour pair is hard to read? (a) white on dark blue (b) dark grey on white (c) yellow on white (d) white on black
20. 20.📊 How many cells are in each row?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Mango</td><td>Mango</td><td>Guava</td><td>Papaya</td></tr>
      <tr><td>Jamun</td><td>Grapes</td><td>Orange</td><td>Papaya</td></tr>
      <tr><td>Litchi</td><td>Grapes</td><td>Mango</td><td>Jamun</td></tr>
    </table>
21. 21.True or false: <img> is an empty tag. (a) False (b) True
22. 22.📋 Which list tag lists things in any order? (a) <li> (b) <ul> (c) <ol>
23. 23.📊 Which tag holds the whole table? (a) <td> (b) <tr> (c) <caption> (d) <table>
24. 24.💬 How does an HTML comment start? (a) # (b) // (c) /* (d) <!--
25. 25.⚡ What number does this code print?
    let runs = 27;
    runs = runs + 11;
    runs = runs - 29;
    console.log(runs);
26. 26.🔠 Which heading shows the SMALLEST text: <h3>, <h4>, <h6> or <h5>? (a) <h6> (b) <h5> (c) <h3> (d) <h4>
27. 27.♿ Is this heading order correct (no level skipped)?
    <h1> → <h3> → <h3> → <h4> (a) Yes (b) No
28. 28.🖌️ How big is the text, in px?
    h1 {
      text-align: right;
      color: black;
      background-color: blue;
      font-size: 16px;
    }
29. 29.🔁 How many times does this code print “Hi”?
    for (let i = 1; i <= 4; i++) {
      console.log("Hi");
    }
30. 30.🔢 In a basic web page file, which comes FIRST? (a) <body> (b) </body> (c) </html> (d) <!DOCTYPE html>
31. 31.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).
32. 32.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 11; i = i + 4) {
      console.log(i);
    }
33. 33.🔁 When does the else part run? (a) never (b) always (c) when if is true (d) when if is false
34. 34.🔍 One closing tag is missing. Which one?
    <p>Fun facts
    <em>My pets</em>
    <small>I love mangoes.</small> (a) </small> (b) </p> (c) </em> (d) </u>
35. 35.💪 Which flexbox property lines boxes up across? (a) display: flex (b) flex-direction (c) align-items (d) gap
36. 36.⚡ What number does this code print?
    let runs = 8;
    runs = runs + 9;
    runs = runs - 12;
    console.log(runs);
37. 37.📊 In a table, which tag is a row? (a) <th> (b) <tr> (c) <td> (d) <tb>
38. 38.📋 Which list tag is one item of a list? (a) <ol> (b) <ul> (c) <li>
39. 39.✍️ Which property is set to 2px solid in this rule?
    p {
      border: 2px solid;
      font-size: 20px;
      font-weight: bold;
    } (a) width (b) 2px solid (c) font-style (d) border
40. 40.True or false: CSS counts down a timer. (a) False (b) True

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