Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 440 · 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.True or false: HTML on its own cannot make bullet lists. (a) True (b) False
2. 2.True or false: <input type="email"> sends the form. (a) True (b) False
3. 3.🖼️ Which picture file does the browser load?
   <img src="cake.jpg" alt="Birthday cake" width="150"> (a) Birthday cake (b) moon.png (c) cake.jpg (d) dog.jpg
4. 4.📦 In the box model, which part is a solid or dotted edge? (a) border (b) margin (c) content (d) padding
5. 5.True or false: the server sends the page back. (a) False (b) True
6. 6.🔠 How many heading levels does HTML have? (a) 4 (b) 10 (c) 3 (d) 6
7. 7.🧩 Which language gives the page structure? (a) CSS (b) JavaScript (c) HTML
8. 8.🖌️ Which CSS property colours behind the text? (a) background-color (b) text-align (c) color (d) font-family
9. 9.📋 Which list tag shows bullet points? (a) <li> (b) <ul> (c) <ol>
10. 10.📦 In the box model, which part is the gap round content? (a) border (b) margin (c) padding (d) content
11. 11.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-end (d) flex-start
12. 12.🔗 Which address opens when you click this link?
    <a href="quiz.html">School news</a> (a) games.html (b) about.html (c) School news (d) quiz.html
13. 13.True or false: <ol> goes inside ul or ol. (a) True (b) False
14. 14.🖼️ Why do we add alt text to an image? (a) to load it faster (b) to colour it (c) to describe the image (d) to make it bigger
15. 15.True or false: a code editor stores a website’s files. (a) True (b) False
16. 16.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
17. 17.🔠 How many headings are in this code?
    <h1>I love mangoes.</h1>
    <p>Fun facts</p>
    <h2>I love mangoes.</h2>
    <p>Good morning!</p>
    <h3>Fun facts</h3>
18. 18.💬 How does an HTML comment end? (a) >> (b) --> (c) */ (d) //
19. 19.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Litchi</td><td>Papaya</td><td>Banana</td><td>Jamun</td></tr>
      <tr><td>Orange</td><td>Banana</td><td>Papaya</td><td>Litchi</td></tr>
      <tr><td>Litchi</td><td>Grapes</td><td>Orange</td><td>Orange</td></tr>
    </table>
20. 20.⚖️ What colour is the text of this element?
    <h2 class="red" id="main">Hi</h2>
    CSS:
    .red { color: blue; }
    .red { color: red; } (a) red (b) black (c) white (d) blue
21. 21.🖌️ What colour is behind the letters?
    h2 {
      color: orange;
      font-size: 16px;
      background-color: yellow;
      text-align: center;
    } (a) yellow (b) orange (c) white
22. 22.✍️ Which property is set to red in this rule?
    #top {
      color: red;
      width: 300px;
    } (a) color (b) font-size (c) red (d) text-align
23. 23.🌗 Is red on green easy or hard to read? (a) easy to read (b) hard to read
24. 24.True or false: to click prize links is safe. (a) True (b) False
25. 25.🔍 Which is the odd one out? (a) sends pages over the net (b) hosts websites online (c) colours code to help us (d) answers page requests
26. 26.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
27. 27.True or false: <main> holds the main content. (a) False (b) True
28. 28.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
29. 29.✍️ Which property is set to center in this rule?
    body {
      text-align: center;
      font-size: 20px;
      padding: 8px;
    } (a) center (b) background-color (c) margin (d) text-align
30. 30.✍️ What is the selector in this CSS rule?
    h1 {
      border: 2px solid;
      margin: 10px;
    } (a) border (b) p (c) h1 (d) 10px
31. 31.🎨 Which attribute adds CSS inside one tag? (a) src (b) href (c) style (d) alt
32. 32.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) makes it harder (b) helps everyone
33. 33.✍️ What value is given to font-size in this rule?
    li {
      font-size: 20px;
      background-color: yellow;
    } (a) center (b) font-size (c) 20px (d) yellow
34. 34.True or false: <input type="password"> hides what you type. (a) True (b) False
35. 35.What is <input type="text"> for? (a) picks a day (b) takes only numbers (c) is for one line of words (d) sends the form
36. 36.📋 What number does the browser show next to “Grapes”?
    <ol start="9">
      <li>Jamun</li>
      <li>Grapes</li>
      <li>Litchi</li>
      <li>Orange</li>
      <li>Mango</li>
    </ol>
37. 37.Which of these is a strong password? (a) password (b) iloveyou (c) 123456 (d) Mango#Kite29!
38. 38.Which colour pair is hard to read? (a) red on green (b) yellow on black (c) white on black (d) black on white
39. 39.True or false: <header> holds copyright notes. (a) False (b) True
40. 40.🌈 Which hex code is magenta? (a) #000000 (b) #ffff00 (c) #ff0000 (d) #ff00ff

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