Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 250 · 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 finds the server for a domain name like example.com? (a) alt (b) CSS (c) DNS (d) HTML
2. 2.🔍 One closing tag is missing. Which one?
   <h3>I love mangoes.</h3>
   <h1>The red kite</h1>
   <b>Good morning! (a) </h1> (b) </p> (c) </b> (d) </h3>
3. 3.🔁 How many times does this code print “Well done”?
   for (let i = 3; i < 11; i++) {
     console.log("Well done");
   }
4. 4.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 14px;
     }
   } (a) No (b) Yes
5. 5.🧭 How many <main> parts should a page have? (a) three (b) ten (c) none (d) one
6. 6.🛡️ Online: is it safe to share your OTP? (a) safe (b) not safe
7. 7.🖼️ Which attribute of <img> is read by screen readers? (a) height (b) src (c) alt (d) width
8. 8.📝 Does <p> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
9. 9.🔢 In a basic web page file, which comes LAST? (a) <body> (b) <!DOCTYPE html> (c) <head> (d) </html>
10. 10.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    .note { color: green; }
    p { color: blue; }
    #top { color: red; } (a) purple (b) red (c) blue (d) green
11. 11.🔗 Where does this link open?
    <a href="about.html">Art corner</a> (a) in the same tab (b) in a new tab
12. 12.True or false: padding is the gap round content. (a) False (b) True
13. 13.Which of these is an opening tag? (a) </p> (b) </body> (c) <p> (d) </li>
14. 14.🖌️ Where does the text sit on its line?
    li {
      background-color: purple;
      text-align: left;
      color: black;
      font-size: 32px;
    } (a) on the right (b) in the middle (c) on the left
15. 15.💬 How many paragraphs show on the page?
    <p>Rain today</p>
    <!-- <p>Fun facts</p> -->
    <p>Good morning!</p>
    <!-- <p>The red kite</p> -->
    <p>I love mangoes.</p>
16. 16.🔠 How many headings are in this code?
    <h1>I love mangoes.</h1>
    <p>Rain today</p>
    <h2>Cricket is fun.</h2>
17. 17.🔍 Which line is missing its closing tag?
    line 1: <u>Hello, world!</u>
    line 2: <em>Fun facts</em>
    line 3: <i>Our school trip (a) line 2 (b) line 1 (c) line 3
18. 18.🖌️ How big is the text, in px?
    h1 {
      font-size: 20px;
      text-align: left;
      color: orange;
      background-color: white;
    }
19. 19.⚡ What number does this code print?
    let score = 21;
    score = score + 19;
    score = score - 15;
    console.log(score);
20. 20.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    }
21. 21.♿ A part of the page is under a <h5> heading. Which tag should its sub-heading use? (a) <h1> (b) <h6> (c) <h2> (d) <h4>
22. 22.🔗 Which words do you click on?
    <a href="https://example.com">About us</a> (a) https://example.com (b) About us (c) Contact us (d) href
23. 23.True or false: the content is space inside the border. (a) True (b) False
24. 24.Which of these is a closing tag? (a) <h1> (b) <li> (c) <b> (d) </title>
25. 25.🔢 To build and share your first web page, which comes FIRST? (a) test in a browser (b) write the HTML (c) add CSS styles (d) plan what to show
26. 26.📝 How many paragraphs does this code make?
    <p>I love mangoes.</p>
    <h2>My best friend</h2>
    <p>Cricket is fun.</p>
    <h2>Good morning!</h2>
    <p>I love mangoes.</p>
27. 27.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    } (a) No (b) Yes
28. 28.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    }
29. 29.🧭 Is <section> semantic or not semantic? (a) not semantic (b) semantic
30. 30.🔗 Where does this link open?
    <a href="news.html">Take the quiz</a> (a) in the same tab (b) in a new tab
31. 31.🎯 What kind of selector is li? (a) an element selector (b) a class selector (c) an id selector
32. 32.📋 Does this list show bullets or numbers?
    <ol>
      <li>Mango</li>
      <li>Litchi</li>
      <li>Papaya</li>
    </ol> (a) bullets (b) numbers
33. 33.🔠 Which heading shows the BIGGEST text: <h4>, <h2>, <h5> or <h6>? (a) <h5> (b) <h6> (c) <h2> (d) <h4>
34. 34.📛 In <a href="x.html">, what is href? (a) an attribute (b) a comment (c) an element name (d) a closing tag
35. 35.🔢 When you open a web page, which comes first: “DNS finds the server” or “the browser shows it”? (a) the browser shows it (b) DNS finds the server
36. 36.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as a new line (b) as one space (c) as 5 spaces (d) as a dot
37. 37.🔠 Which heading shows the SMALLEST text: <h4>, <h2>, <h5> or <h6>? (a) <h2> (b) <h6> (c) <h5> (d) <h4>
38. 38.🖼️ Why do we add alt text to an image? (a) to make it bigger (b) to describe the image (c) to colour it (d) to load it faster
39. 39.True or false: HTML on its own cannot make a form. (a) True (b) False
40. 40.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No

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