Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 578 · 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 heading shows the SMALLEST text: <h4>, <h2>, <h3> or <h6>? (a) <h3> (b) <h4> (c) <h6> (d) <h2>
2. 2.📦 In the box model, which part is the text or picture? (a) padding (b) content (c) margin (d) border
3. 3.True or false: the content is the gap round content. (a) False (b) True
4. 4.📝 How many paragraphs does this code make?
   <p>Rain today</p>
   <p>Rain today</p>
   <h2>Good morning!</h2>
   <h2>I love mangoes.</h2>
   <p>Hello, world!</p>
   <p>Good morning!</p>
5. 5.🔗 Where does this link open?
   <a href="news.html">School news</a> (a) in the same tab (b) in a new tab
6. 6.🖌️ What colour is behind the letters?
   p {
     text-align: right;
     font-size: 24px;
     background-color: blue;
     color: orange;
   } (a) yellow (b) orange (c) blue
7. 7.🌈 Which colour is #ff0000? (a) blue (b) red (c) magenta (d) bright green
8. 8.True or false: <header> helps you move around. (a) True (b) False
9. 9.⚖️ What colour is the text of this element?
   <h1 class="big" id="hero">Hi</h1>
   CSS:
   #hero { color: white; }
   .big { color: orange; }
   h1 { color: yellow; } (a) black (b) yellow (c) white (d) orange
10. 10.📝 How many paragraphs does this code make?
    <p>The red kite</p>
    <p>Good morning!</p>
    <p>Cricket is fun.</p>
    <h2>My pets</h2>
    <p>I love mangoes.</p>
    <h2>I love mangoes.</h2>
11. 11.📊 How many cells are in each row?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Mango</td><td>Mango</td></tr>
      <tr><td>Banana</td><td>Mango</td></tr>
    </table>
12. 12.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
13. 13.⚡ Which JavaScript word writes in the console? (a) let (b) console.log() (c) alert() (d) if
14. 14.⚡ Which JavaScript word runs code when true? (a) if (b) console.log() (c) let (d) for
15. 15.What does color do? (a) sets the letter colour (b) makes the text bold (c) centres a heading (d) makes letters bigger
16. 16.🎯 Which element does the selector .note style? (a) <li id="note"> (b) <li class="note"> (c) <div class="red"> (d) <li class="big">
17. 17.Which of these is a strong password? (a) password (b) S0lar!Pen#8 (c) riya2014 (d) qwerty
18. 18.💬 How many paragraphs show on the page?
    <p>My pets</p>
    <p>Good morning!</p>
    <!-- <p>Our school trip</p> -->
19. 19.True or false: JavaScript makes headings and lists. (a) False (b) True
20. 20.What does justify-content: space-between do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
21. 21.True or false: <nav> helps you move around. (a) False (b) True
22. 22.🔗 Which words do you click on?
    <a href="about.html">Contact us</a> (a) Visit the site (b) about.html (c) href (d) Contact us
23. 23.🔢 When you open a web page, what comes right after “DNS finds the server”? (a) you type the URL (b) the browser asks it (c) the server sends files (d) the browser shows it
24. 24.🎯 Which element does the selector #hero style? (a) <p id="hero"> (b) <p class="hero"> (c) <h1 class="star"> (d) <p id="top">
25. 25.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 5; i++) {
      total = total + 4;
    }
    console.log(total);
26. 26.📄 Where does <title> go: in the head or in the body? (a) in the body (b) in the head
27. 27.True or false: .box { padding: 8px; } goes in style.css. (a) False (b) True
28. 28.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
29. 29.Which of these has a closing tag? (a) <meta> (b) <b> (c) <input> (d) <hr>
30. 30.Which of these is a closing tag? (a) <li> (b) <p> (c) <h1> (d) </li>
31. 31.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
32. 32.📋 Which list shows the steps of a recipe best? (a) <hr> (b) <ul> (c) <br> (d) <ol>
33. 33.📝 Does <input> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
34. 34.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) neither (c) the first one (d) the shorter one
35. 35.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) turned off (d) 800px or wider
36. 36.Which of these goes in the body? (a) <h1> (b) <style> (c) <meta charset="utf-8"> (d) <title>
37. 37.True or false: a web server is where we type code. (a) True (b) False
38. 38.🔗 Which code links to about.html? (a) <link about.html> (b) <a alt="about.html"> (c) <a href="about.html"> (d) <a src="about.html">
39. 39.🔁 How many times does this code print “Well done”?
    for (let i = 3; i < 12; i++) {
      console.log("Well done");
    }
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