Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 811 · 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 semantic tag holds the menu of links? (a) <article> (b) <nav> (c) <footer> (d) <header>
2. 2.⚖️ What colour is the text of this element?
   <h2 class="note" id="top">Hi</h2>
   CSS:
   #top { color: red; }
   #top { color: purple; } (a) orange (b) white (c) purple (d) red
3. 3.⚡ Which JavaScript word repeats code? (a) console.log() (b) if (c) let (d) for
4. 4.🌈 Which colour of light is strongest in rgb(197, 130, 52)? (a) green (b) red (c) blue
5. 5.True or false: <tr> makes one data cell. (a) False (b) True
6. 6.✍️ What is the selector in this CSS rule?
   h2 {
     background-color: yellow;
     text-align: center;
     padding: 8px;
   } (a) center (b) background-color (c) h2 (d) h1
7. 7.🔗 Which address opens when you click this link?
   <a href="contact.html">Art corner</a> (a) Art corner (b) https://example.com (c) contact.html (d) maths.html
8. 8.🔗 Which address opens when you click this link?
   <a href="games.html">School news</a> (a) contact.html (b) games.html (c) School news (d) about.html
9. 9.🔁 What does this code print?
   let marks = 17;
   if (marks > 33) {
     console.log("Pass");
   } else {
     console.log("Try again");
   } (a) Pass (b) Try again
10. 10.📋 Which list tag is an ordered list? (a) <ul> (b) <ol> (c) <li>
11. 11.True or false: to share your OTP is safe. (a) True (b) False
12. 12.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as 5 spaces (b) as a dot (c) as a new line (d) as one space
13. 13.Which of these is safe to do online? (a) share your password (b) download from pop-ups (c) click prize links (d) use a strong password
14. 14.📝 How many paragraphs does this code make?
    <p>Rain today</p>
    <p>Good morning!</p>
    <p>Our school trip</p>
15. 15.✍️ What value is given to width in this rule?
    h2 {
      color: red;
      width: 300px;
      border: 2px solid;
    } (a) width (b) italic (c) red (d) 300px
16. 16.What does font-size do? (a) colours behind the text (b) makes letters bigger (c) sets the letter colour (d) makes the text bold
17. 17.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
18. 18.True or false: <ol> is an ordered list. (a) False (b) True
19. 19.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 8; i++) {
      total = total + 9;
    }
    console.log(total);
20. 20.💬 Which text will NOT show on the page?
    <!-- <p>Cricket is fun.</p> -->
    <p>My pets</p>
    <p>Our school trip</p> (a) Cricket is fun. (b) My pets (c) Our school trip
21. 21.🔁 What does i++ do? (a) doubles i (b) adds 1 to i (c) takes 1 from i (d) prints i
22. 22.🧩 Which language adds space around boxes? (a) HTML (b) JavaScript (c) CSS
23. 23.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="colour"> Green
      <input type="checkbox" name="colour"> Blue
      <input type="checkbox" name="colour"> Red
      <input type="checkbox" name="colour"> Pink
      <input type="checkbox" name="colour"> Orange
    </form>
24. 24.🔁 What does this code print?
    let temp = 16;
    if (temp >= 22) {
      console.log("Hot");
    } else {
      console.log("Cool");
    } (a) Hot (b) Cool
25. 25.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    }
26. 26.True or false: <b> has a closing tag. (a) False (b) True
27. 27.🔠 Which heading shows the SMALLEST text: <h3>, <h5>, <h2> or <h1>? (a) <h1> (b) <h3> (c) <h2> (d) <h5>
28. 28.True or false: <table> holds the whole table. (a) False (b) True
29. 29.⚖️ What colour is the text of this element?
    <h2 class="menu" id="logo">Hi</h2>
    CSS:
    h2 { color: blue; }
    .menu { color: green; }
    #logo { color: red; } (a) yellow (b) green (c) red (d) blue
30. 30.True or false: #hero is a class selector. (a) True (b) False
31. 31.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
32. 32.📄 Where does <img> go: in the head or in the body? (a) in the head (b) in the body
33. 33.🔗 Which code links to about.html? (a) <a src="about.html"> (b) <link about.html> (c) <a alt="about.html"> (d) <a href="about.html">
34. 34.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
35. 35.🖌️ How big is the text, in px?
    h2 {
      background-color: red;
      text-align: left;
      color: orange;
      font-size: 20px;
    }
36. 36.📝 How many <input> tags are in this form?
    <form>
      <input type="text">
      <input type="password">
      <input type="number">
      <input type="submit" value="Send">
    </form>
37. 37.📋 Does this list show bullets or numbers?
    <ul>
      <li>Guava</li>
      <li>Papaya</li>
      <li>Jamun</li>
    </ul> (a) numbers (b) bullets
38. 38.🔁 Which word runs code only when something is true? (a) let (b) if (c) log (d) for
39. 39.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
40. 40.♿ Does this help everyone, or make the page harder to use: images with no alt? (a) helps everyone (b) makes it harder

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