Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 676 · 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 justify-content value packs boxes at the end? (a) flex-end (b) space-between (c) center (d) flex-start
2. 2.💪 Which flexbox property sets space between boxes? (a) display: flex (b) flex-direction (c) gap (d) justify-content
3. 3.🔗 Which tag makes a clickable link? (a) <p> (b) <img> (c) <link> (d) <a>
4. 4.🖼️ The picture cannot load. Which text does the browser show instead?
   <img src="dog.jpg" alt="A happy dog" width="350"> (a) The full moon (b) A happy dog (c) dog.jpg (d) width
5. 5.🔁 Which word runs code only when something is true? (a) for (b) let (c) if (d) log
6. 6.🖼️ Which attribute of <img> shows if the image fails? (a) alt (b) width (c) height (d) src
7. 7.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) center (d) flex-start
8. 8.True or false: “tiny grey text” helps everyone use the page. (a) False (b) True
9. 9.🖼️ Which attribute of <img> sets how wide it is? (a) src (b) alt (c) height (d) width
10. 10.🔗 Where does this link open?
    <a href="quiz.html" target="_blank">Visit the site</a> (a) in a new tab (b) in the same tab
11. 11.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) never changes (d) fits every screen
12. 12.⚡ What does this code show?
    let name = "Aman";
    console.log("Hi, " + name + "!"); (a) Hi, name! (b) Aman (c) Hi, Aman! (d) name
13. 13.🏷️ Is </h1> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
14. 14.♿ Does this help everyone, or make the page harder to use: colour as the only clue? (a) makes it harder (b) helps everyone
15. 15.Which of these is the content? (a) space inside the border (b) the text or picture (c) the line round the box (d) the gap to other boxes
16. 16.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      font-weight: bold;
      width: 300px;
    }
17. 17.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    }
18. 18.🔢 When you open a web page, which comes FIRST? (a) you type the URL (b) the browser asks it (c) the server sends files (d) DNS finds the server
19. 19.⚖️ What colour is the text of this element?
    <h2 class="menu" id="end">Hi</h2>
    CSS:
    .menu { color: red; }
    h2 { color: blue; }
    #end { color: yellow; } (a) blue (b) green (c) red (d) yellow
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 300px;
      padding: 20px;
      border: 1px solid black;
      margin: 5px;
    }
21. 21.📋 What number does the browser show next to “Litchi”?
    <ol start="9">
      <li>Guava</li>
      <li>Jamun</li>
      <li>Litchi</li>
      <li>Papaya</li>
      <li>Grapes</li>
      <li>Orange</li>
    </ol>
22. 22.♿ What does good colour contrast mean? (a) text stands out clearly (b) only red text (c) many bright colours (d) no colours at all
23. 23.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h4> → <h4> (a) No (b) Yes
24. 24.🎯 Can many elements share the same class? (a) No (b) Yes
25. 25.🔠 Which heading shows the SMALLEST text: <h4>, <h2>, <h1> or <h6>? (a) <h4> (b) <h1> (c) <h6> (d) <h2>
26. 26.🔍 Which is the odd one out? (a) hosts websites online (b) stores a website’s files (c) shows pages from the web (d) sends pages over the net
27. 27.🔗 Which words do you click on?
    <a href="about.html">Contact us</a> (a) Contact us (b) Visit the site (c) href (d) about.html
28. 28.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 30px;
      border: 4px solid black;
      margin: 0px;
    }
29. 29.⚡ What does this code print? (Look at the quotes!)
    let x = "1";
    let y = 8;
    console.log(x + y); (a) Error (b) 18 (c) 9
30. 30.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="kite.png" alt="A red kite" width="50"> (a) width (b) Map of India (c) A red kite (d) kite.png
31. 31.True or false: <ul> is an empty tag. (a) True (b) False
32. 32.True or false: “use big enough text” makes the page harder to use. (a) True (b) False
33. 33.🌗 Is dark grey on white easy or hard to read? (a) hard to read (b) easy to read
34. 34.💬 Which text will NOT show on the page?
    <p>Fun facts</p>
    <!-- <p>Rain today</p> -->
    <p>The red kite</p> (a) Fun facts (b) The red kite (c) Rain today
35. 35.🏷️ Which is the closing tag for <em>? (a) <em/> (b) <em> (c) <\em> (d) </em>
36. 36.📝 How many paragraphs does this code make?
    <p>My best friend</p>
    <p>Fun facts</p>
    <p>My best friend</p>
37. 37.📋 How many items does this list show?
    <ol>
      <li>Grapes</li>
      <li>Guava</li>
      <li>Mango</li>
      <li>Litchi</li>
    </ol>
38. 38.🏷️ Which is the closing tag for <b>? (a) </b> (b) <b> (c) <\b> (d) <b/>
39. 39.🌍 What do we call the computer that stores a website? (a) a printer (b) a mouse (c) a server (d) a keyboard
40. 40.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector

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