Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 650 · 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 value is given to font-weight in this rule?
   .note {
     text-align: center;
     width: 300px;
     background-color: yellow;
     font-weight: bold;
   } (a) 300px (b) bold (c) font-weight (d) 2px solid
2. 2.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 140px;
     padding: 25px;
     border: 4px solid black;
     margin: 0px;
   }
3. 3.Which of these goes in the head? (a) <link rel="stylesheet"> (b) <ul> (c) <h1> (d) <p>
4. 4.📋 Does this list show bullets or numbers?
   <ul>
     <li>Banana</li>
     <li>Papaya</li>
   </ul> (a) bullets (b) numbers
5. 5.🖌️ Which CSS property colours behind the text? (a) font-weight (b) font-size (c) background-color (d) font-family
6. 6.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) green (d) blue
7. 7.🏷️ Which is the closing tag for <i>? (a) <i> (b) <i/> (c) <\i> (d) </i>
8. 8.🎯 Which CSS selector matches this element?
   <li class="note" id="main">Hello</li> (a) .big (b) #note (c) div (d) #main
9. 9.True or false: to ask before downloading is safe. (a) True (b) False
10. 10.🖼️ Why do we add alt text to an image? (a) to make it bigger (b) to colour it (c) to describe the image (d) to load it faster
11. 11.🔢 To build and share your first web page, which comes first: “add CSS styles” or “publish it online”? (a) publish it online (b) add CSS styles
12. 12.🌐 Which one hosts websites online? (a) a code editor (b) a web server (c) a web browser
13. 13.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 300px;
      padding: 20px;
      border: 2px solid black;
      margin: 20px;
    }
14. 14.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 380px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 80px wide (no margins).
15. 15.🔍 One closing tag is missing. Which one?
    <h3>Our school trip</h3>
    <p>I love mangoes.
    <strong>Hello, world!</strong> (a) </strong> (b) </h3> (c) </h2> (d) </p>
16. 16.🔠 How many heading levels does HTML have? (a) 10 (b) 6 (c) 3 (d) 4
17. 17.📄 Can HTML on its own pick a random number? (a) No (b) Yes
18. 18.📝 Which tag gives a form box a name you can click? (a) <h1> (b) <label> (c) <title> (d) <hr>
19. 19.🔗 Which words do you click on?
    <a href="maths.html">Take the quiz</a> (a) href (b) maths.html (c) Take the quiz (d) Play games
20. 20.🔢 On a typical page, from top to bottom, what comes right after “<header>”? (a) <footer> (b) <main> (c) <nav>
21. 21.✍️ Which property is set to 300px in this rule?
    body {
      text-align: center;
      background-color: yellow;
      width: 300px;
    } (a) font-style (b) width (c) 300px (d) color
22. 22.📦 In the box model, which part is space inside the border? (a) border (b) content (c) padding (d) margin
23. 23.What is <input type="text"> for? (a) is for one line of words (b) is for an email address (c) hides what you type (d) picks a day
24. 24.🎯 Which element does the selector h2 style? (a) <h2 class="star"> (b) <li> (c) <div class="star"> (d) <span id="hero">
25. 25.✍️ What value is given to text-align in this rule?
    p {
      text-align: center;
      background-color: yellow;
    } (a) 10px (b) center (c) yellow (d) text-align
26. 26.⚡ Which JavaScript word runs code when true? (a) alert() (b) if (c) for (d) console.log()
27. 27.Which of these is not safe to do online? (a) keep passwords secret (b) tell a trusted adult (c) meet an online stranger (d) use a nickname in games
28. 28.♿ A part of the page is under a <h5> heading. Which tag should its sub-heading use? (a) <h6> (b) <h4> (c) <h1> (d) <h2>
29. 29.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
30. 30.Which of these is margin? (a) space outside the border (b) the text or picture (c) the line round the box (d) the gap round content
31. 31.🔠 Which heading shows the SMALLEST text: <h1>, <h3>, <h5> or <h6>? (a) <h6> (b) <h5> (c) <h1> (d) <h3>
32. 32.📊 Which tag gives the table a title? (a) <tr> (b) <table> (c) <caption> (d) <td>
33. 33.🔁 What does i++ do? (a) takes 1 from i (b) doubles i (c) prints i (d) adds 1 to i
34. 34.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
35. 35.🎯 What kind of selector is #hero? (a) an id selector (b) an element selector (c) a class selector
36. 36.📄 Where does <p> go: in the head or in the body? (a) in the head (b) in the body
37. 37.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    }
38. 38.🔍 Which is the odd one out? (a) shows a pop-up message (b) checks a quiz answer (c) adds space around boxes (d) changes the page live
39. 39.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Mango</td><td>Mango</td><td>Mango</td></tr>
      <tr><td>Orange</td><td>Grapes</td><td>Papaya</td></tr>
    </table>
40. 40.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 6; i++) {
      total = total + 5;
    }
    console.log(total);

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