Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 997 · 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 headings are in this code?
   <h1>I love mangoes.</h1>
   <p>My pets</p>
   <h2>Hello, world!</h2>
2. 2.Which colour pair is easy to read? (a) dark grey on white (b) yellow on white (c) light grey on white (d) red on green
3. 3.🔐 Is Blue@Tiger_74 a strong or a weak password? (a) strong (b) weak
4. 4.🧩 Which language rounds box corners? (a) CSS (b) HTML (c) JavaScript
5. 5.🛡️ Online: is it safe to tell a trusted adult? (a) safe (b) not safe
6. 6.🌈 Which colour is rgb(0, 0, 255)? (a) magenta (b) black (c) red (d) blue
7. 7.Which of these is the content? (a) the gap round content (b) space inside the border (c) the text or picture (d) the gap to other boxes
8. 8.📝 At most, how many of these can be chosen at the same time?
   <form>
     <input type="radio" name="fruit"> Mango
     <input type="radio" name="fruit"> Papaya
     <input type="radio" name="fruit"> Guava
   </form>
9. 9.True or false: padding is the gap round content. (a) True (b) False
10. 10.📄 Can HTML on its own show paragraphs? (a) No (b) Yes
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      text-align: center;
      width: 300px;
      font-size: 20px;
    }
12. 12.📝 On how many lines does the browser show this paragraph?
    <p>Kites fly high<br>Sky is blue</p>
13. 13.✍️ Which property is set to center in this rule?
    h1 {
      font-weight: bold;
      background-color: yellow;
      text-align: center;
    } (a) center (b) background-color (c) margin (d) text-align
14. 14.True or false: a web browser opens web pages for us. (a) False (b) True
15. 15.📊 In a table, which tag is a row? (a) <tr> (b) <tb> (c) <th> (d) <td>
16. 16.True or false: <ul> shows bullet points. (a) False (b) True
17. 17.📊 How many cells does this table have in all?
    <table>
      <tr><td>Jamun</td><td>Mango</td></tr>
      <tr><td>Grapes</td><td>Guava</td></tr>
      <tr><td>Jamun</td><td>Guava</td></tr>
    </table>
18. 18.⚖️ What colour is the text of this element?
    <h1 class="menu" id="intro">Hi</h1>
    CSS:
    .menu { color: blue; }
    .menu { color: black; } (a) orange (b) blue (c) black (d) white
19. 19.🛡️ Online: is it safe to post your home address? (a) not safe (b) safe
20. 20.🔠 How many <h1> headings should a page usually have? (a) 1 (b) 6 (c) 10 (d) 3
21. 21.🔗 Where does this link open?
    <a href="about.html" target="_blank">About us</a> (a) in the same tab (b) in a new tab
22. 22.💬 How many paragraphs show on the page?
    <!-- <p>Our school trip</p> -->
    <p>My pets</p>
    <!-- <p>Fun facts</p> -->
    <p>Hello, world!</p>
23. 23.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) click it twice (b) type the password (c) close it, tell an adult (d) share it with friends
24. 24.📱 What does a media query check? (a) the battery level (b) the time of day (c) the page title (d) the screen width
25. 25.📦 In the box model, which part is space outside the border? (a) margin (b) content (c) padding (d) border
26. 26.🔁 What does this code print?
    let temp = 31;
    if (temp < 38) {
      console.log("Hot");
    } else {
      console.log("Cool");
    } (a) Cool (b) Hot
27. 27.Which of these is padding? (a) the text or picture (b) a solid or dotted edge (c) space inside the border (d) space outside the border
28. 28.True or false: “label every form box” helps everyone use the page. (a) False (b) True
29. 29.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="cake.jpg" alt="Birthday cake" width="100"> (a) Birthday cake (b) cake.jpg (c) A happy dog (d) width
30. 30.⚖️ What colour is the text of this element?
    <h2 class="menu" id="top">Hi</h2>
    CSS:
    .menu { color: green; }
    #top { color: yellow; } (a) green (b) red (c) yellow (d) blue
31. 31.🚀 Where in index.html does the link to style.css go? (a) after </html> (b) inside a <p> (c) in the footer (d) in the head
32. 32.🔁 How many times does this code print “Hello”?
    for (let i = 0; i <= 9; i++) {
      console.log("Hello");
    }
33. 33.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 140px;
      padding: 5px;
      border: 3px solid black;
      margin: 20px;
    }
34. 34.🖼️ Which tag puts a picture on a page? (a) <p> (b) <a> (c) <pic> (d) <img>
35. 35.🔠 Are headings shown in bold by default? (a) Yes (b) No
36. 36.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
37. 37.True or false: <aside> holds a side box of tips. (a) False (b) True
38. 38.True or false: the server sends the page back. (a) True (b) False
39. 39.🖌️ Which CSS property sets the letter colour? (a) font-family (b) color (c) background-color (d) font-size
40. 40.✍️ Which property is set to 10px in this rule?
    body {
      border: 2px solid;
      background-color: yellow;
      padding: 8px;
      margin: 10px;
    } (a) 10px (b) font-weight (c) margin (d) padding

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