Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 341 · 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 attribute of <img> sets how tall it is? (a) src (b) alt (c) height (d) width
2. 2.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 20px;
     }
   } (a) No (b) Yes
3. 3.True or false: the URL is the page’s address. (a) True (b) False
4. 4.Which of these does JavaScript do? (a) makes a link (b) makes headings and lists (c) gives the page structure (d) shows a pop-up message
5. 5.📝 How many <input> tags are in this form?
   <form>
     <input type="password">
     <input type="checkbox">
     <input type="email">
     <input type="text">
     <input type="submit" value="Send">
   </form>
6. 6.🔠 Which heading shows the BIGGEST text: <h6>, <h4>, <h2> or <h3>? (a) <h3> (b) <h6> (c) <h2> (d) <h4>
7. 7.⚖️ What colour is the text of this element?
   <p class="red" id="logo">Hi</p>
   CSS:
   .red { color: white; }
   .red { color: yellow; } (a) black (b) yellow (c) orange (d) white
8. 8.📝 Does <ul> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
9. 9.💬 How many paragraphs show on the page?
   <!-- <p>Good morning!</p> -->
   <p>Our school trip</p>
   <p>My pets</p>
10. 10.🔁 What does this code print?
    let score = 19;
    if (score >= 29) {
      console.log("You win");
    } else {
      console.log("Play again");
    } (a) You win (b) Play again
11. 11.Which of these is margin? (a) the text or picture (b) space outside the border (c) a solid or dotted edge (d) space inside the border
12. 12.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Art Gallery</title>
    </head>
    <body>
      <h1>Planets</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) I like to read. (b) Planets (c) index.html (d) Art Gallery
13. 13.📋 Which list shows the steps of a recipe best? (a) <ul> (b) <br> (c) <ol> (d) <hr>
14. 14.🎨 Which attribute adds CSS inside one tag? (a) src (b) style (c) alt (d) href
15. 15.True or false: <li> goes inside ul or ol. (a) True (b) False
16. 16.📝 Does <b> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
17. 17.🎯 Which sign starts a class selector? (a) & (b) . (c) # (d) @
18. 18.⚡ What number does this code print?
    let a = 4;
    let b = 6;
    console.log(a * b);
19. 19.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) green (c) blue (d) black
20. 20.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
21. 21.True or false: “link text “click here”” makes the page harder to use. (a) False (b) True
22. 22.What is <input type="password"> for? (a) lets you pick only one (b) hides what you type (c) lets you tick many (d) is for one line of words
23. 23.📝 On how many lines does the browser show this paragraph?
    <p>Stars shine<br>Roses are red</p>
24. 24.True or false: img is a class selector. (a) True (b) False
25. 25.🛡️ Online: is it safe to tell a trusted adult? (a) safe (b) not safe
26. 26.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>All about me</h1>
      <p>Here is my best one.</p>
    </body>
    </html> (a) body (b) Class 7 Blog (c) All about me (d) Here is my best one.
27. 27.✍️ Which property is set to 300px in this rule?
    h2 {
      width: 300px;
      text-align: center;
      font-weight: bold;
    } (a) width (b) color (c) font-style (d) 300px
28. 28.🛡️ Online: is it safe to put secrets in comments? (a) not safe (b) safe
29. 29.🖼️ Which attribute of <img> tells which image to load? (a) src (b) width (c) alt (d) height
30. 30.📦 In the box model, which part is space outside the border? (a) margin (b) border (c) content (d) padding
31. 31.📋 What number does the browser show next to “Jamun”?
    <ol start="7">
      <li>Orange</li>
      <li>Papaya</li>
      <li>Jamun</li>
      <li>Mango</li>
    </ol>
32. 32.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) ; (d) :
33. 33.♿ What does good colour contrast mean? (a) only red text (b) no colours at all (c) text stands out clearly (d) many bright colours
34. 34.🎯 Which element does the selector .menu style? (a) <h1 class="menu"> (b) <h1 id="menu"> (c) <h2 class="big"> (d) <h1 class="note">
35. 35.Which of these goes in the head? (a) <h1> (b) <img> (c) <table> (d) <style>
36. 36.🔁 How many numbers does this code print?
    for (let i = 0; i < 15; i = i + 2) {
      console.log(i);
    }
37. 37.🌐 Which one has an address bar? (a) a web server (b) a web browser (c) a code editor
38. 38.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Space Facts</title>
    </head>
    <body>
      <h1>My drawings</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) index.html (b) I like to read. (c) My drawings (d) Space Facts
39. 39.Which colour pair is hard to read? (a) yellow on black (b) dark grey on white (c) white on dark blue (d) red on green
40. 40.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    }

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