Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 930 · 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.📦 In the box model, which part is the gap to other boxes? (a) content (b) padding (c) border (d) margin
2. 2.Which of these is a weak password? (a) Kite_Fl1es@Dawn (b) Mango#Kite29! (c) S0lar!Pen#8 (d) 111111
3. 3.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 90px;
     padding: 10px;
     border: 2px solid black;
     margin: 5px;
   }
4. 4.What does font-family do? (a) centres a heading (b) makes the text bold (c) picks the font style (d) colours behind the text
5. 5.📝 Does <hr> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
6. 6.📝 What does <p> make? (a) a table (b) a paragraph (c) a picture (d) a link
7. 7.🖼️ Which attribute of <img> names the picture file? (a) alt (b) height (c) src (d) width
8. 8.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Class 7 Blog</title>
   </head>
   <body>
     <h1>Easy snacks</h1>
     <p>We won by 5 runs.</p>
   </body>
   </html> (a) Class 7 Blog (b) Easy snacks (c) We won by 5 runs. (d) index.html
9. 9.🎯 Which CSS selector matches this element?
   <p class="menu" id="top">Hello</p> (a) #top (b) .top (c) #intro (d) .note
10. 10.🧭 Is <footer> semantic or not semantic? (a) not semantic (b) semantic
11. 11.True or false: <tr> makes a heading cell. (a) True (b) False
12. 12.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
13. 13.🌈 Which colour is rgb(255, 0, 0)? (a) red (b) bright green (c) magenta (d) cyan
14. 14.True or false: <caption> gives the table a title. (a) True (b) False
15. 15.Which of these does CSS do? (a) makes a form box (b) makes a link (c) gives the page structure (d) adds space around boxes
16. 16.📱 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;
      }
    }
17. 17.True or false: HTML lays out the page. (a) True (b) False
18. 18.🔠 Which heading shows the BIGGEST text: <h3>, <h6>, <h5> or <h2>? (a) <h5> (b) <h6> (c) <h3> (d) <h2>
19. 19.True or false: <p> is an empty tag. (a) False (b) True
20. 20.🔗 Where does this link open?
    <a href="quiz.html" target="_blank">School news</a> (a) in a new tab (b) in the same tab
21. 21.True or false: <meta charset="utf-8"> goes in the head. (a) True (b) False
22. 22.🎯 What kind of selector is body? (a) an id selector (b) an element selector (c) a class selector
23. 23.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    }
24. 24.🖌️ Which CSS property makes letters bigger? (a) color (b) font-size (c) font-family (d) text-align
25. 25.🧩 Which language reacts to a button click? (a) CSS (b) JavaScript (c) HTML
26. 26.📋 Does this list show bullets or numbers?
    <ul>
      <li>Litchi</li>
      <li>Guava</li>
    </ul> (a) bullets (b) numbers
27. 27.True or false: <li> shows bullet points. (a) True (b) False
28. 28.🔗 Which words do you click on?
    <a href="maths.html">About us</a> (a) maths.html (b) About us (c) Contact us (d) href
29. 29.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 7; i++) {
      total = total + i;
    }
    console.log(total);
30. 30.🧭 Why use <nav> instead of <div> for a menu? (a) it loads faster (b) it makes text red (c) it adds pictures (d) it tells its meaning
31. 31.Which of these is an empty tag? (a) <ul> (b) <p> (c) <hr> (d) <h1>
32. 32.♿ A part of the page is under a <h2> heading. Which tag should its sub-heading use? (a) <h2> (b) <h3> (c) <h1> (d) <h6>
33. 33.📋 Does this list show bullets or numbers?
    <ol>
      <li>Jamun</li>
      <li>Papaya</li>
      <li>Mango</li>
    </ol> (a) numbers (b) bullets
34. 34.📝 How many paragraphs does this code make?
    <p>Rain today</p>
    <p>Our school trip</p>
    <p>Hello, world!</p>
    <p>I love mangoes.</p>
    <p>My pets</p>
    <h2>Good morning!</h2>
35. 35.Which colour pair is hard to read? (a) white on dark blue (b) light grey on white (c) yellow on black (d) dark grey on white
36. 36.📊 In a table, which tag is a row? (a) <tb> (b) <th> (c) <td> (d) <tr>
37. 37.🌈 Which colour of light is strongest in rgb(13, 52, 200)? (a) green (b) red (c) blue
38. 38.📦 In the box model, which part is a solid or dotted edge? (a) content (b) padding (c) margin (d) border
39. 39.🧭 How many <main> parts should a page have? (a) none (b) three (c) ten (d) one
40. 40.📄 Where does the text of <title> appear? (a) on the browser tab (b) at the bottom (c) in a big heading (d) nowhere

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