Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 643 · 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 tag gives the table a title? (a) <td> (b) <th> (c) <caption> (d) <table>
2. 2.⚖️ What colour is the text of this element?
   <h2 class="red" id="intro">Hi</h2>
   CSS:
   .red { color: orange; }
   h2 { color: yellow; } (a) yellow (b) black (c) white (d) orange
3. 3.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-start (c) flex-end (d) space-between
4. 4.🌈 Which hex code is yellow? (a) #ff0000 (b) #ffffff (c) #000000 (d) #ffff00
5. 5.🖌️ Which CSS property makes letters bigger? (a) color (b) font-family (c) font-size (d) text-align
6. 6.⚡ What number does this code print?
   let books = 16;
   books = books + 16;
   books = books - 32;
   console.log(books);
7. 7.🎯 Which CSS selector matches this element?
   <h1 class="box" id="main">Hello</h1> (a) h2 (b) #logo (c) #main (d) .main
8. 8.🔗 Which address opens when you click this link?
   <a href="quiz.html">Play games</a> (a) Play games (b) quiz.html (c) about.html (d) games.html
9. 9.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as a dot (b) as a new line (c) as 5 spaces (d) as one space
10. 10.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>Planets</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) index.html (b) I like to read. (c) Class 7 Blog (d) Planets
11. 11.🔗 What does target="_blank" do to a link? (a) hides the link (b) makes it blank (c) makes it bold (d) opens it in a new tab
12. 12.🔗 Where does this link open?
    <a href="news.html" target="_blank">Play games</a> (a) in the same tab (b) in a new tab
13. 13.💪 Which flexbox property turns on flexbox? (a) gap (b) flex-direction (c) display: flex (d) justify-content
14. 14.True or false: HTML on its own can add up two numbers. (a) False (b) True
15. 15.True or false: HTML on its own can make headings. (a) True (b) False
16. 16.⚖️ What colour is the text of this element?
    <h2 class="box" id="end">Hi</h2>
    CSS:
    .box { color: red; }
    .box { color: yellow; } (a) red (b) black (c) yellow (d) purple
17. 17.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 4 boxes, each 60px wide (no margins).
18. 18.True or false: li is a class selector. (a) False (b) True
19. 19.📝 Which tag makes a big box for many lines of text? (a) <p> (b) <br> (c) <textarea> (d) <input>
20. 20.🖼️ Does <img> need a closing tag? (a) No (b) Yes
21. 21.📝 Which tag holds a whole form? (a) <ol> (b) <form> (c) <table> (d) <input>
22. 22.📄 What is the first line of an HTML5 page? (a) <body> (b) <head> (c) <!DOCTYPE html> (d) <html>
23. 23.📊 How many cells does this table have in all?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Jamun</td><td>Grapes</td><td>Litchi</td></tr>
      <tr><td>Orange</td><td>Banana</td><td>Litchi</td></tr>
    </table>
24. 24.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) helps everyone (b) makes it harder
25. 25.Which of these does CSS do? (a) changes the text size (b) gives the page structure (c) puts a picture on a page (d) changes the page live
26. 26.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
27. 27.True or false: in <img>, alt sets how wide it is. (a) True (b) False
28. 28.📋 Does this list show bullets or numbers?
    <ul>
      <li>Banana</li>
      <li>Papaya</li>
      <li>Orange</li>
    </ul> (a) bullets (b) numbers
29. 29.📊 How many cells are in each row?
    <table>
      <tr><td>Banana</td><td>Papaya</td></tr>
      <tr><td>Litchi</td><td>Mango</td></tr>
    </table>
30. 30.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="tiger.jpg" alt="A tiger asleep" width="100"> (a) tiger.jpg (b) A red kite (c) A tiger asleep (d) width
31. 31.🎯 Which CSS selector matches this element?
    <h2 class="big" id="end">Hello</h2> (a) #end (b) .red (c) li (d) #hero
32. 32.🔍 One closing tag is missing. Which one?
    <h1>My best friend</h1>
    <h2>My pets</h2>
    <p>The red kite (a) </h2> (b) </p> (c) </h1> (d) </strong>
33. 33.♿ What does good colour contrast mean? (a) only red text (b) text stands out clearly (c) many bright colours (d) no colours at all
34. 34.What does justify-content: flex-start do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
35. 35.🖼️ Why do we add alt text to an image? (a) to describe the image (b) to colour it (c) to make it bigger (d) to load it faster
36. 36.Which colour pair is easy to read? (a) yellow on white (b) dark grey on white (c) red on green (d) light grey on white
37. 37.♿ Who uses a screen reader? (a) only coders (b) people who are blind (c) only teachers (d) only robots
38. 38.🧭 Which semantic tag sits at the bottom? (a) <main> (b) <article> (c) <header> (d) <footer>
39. 39.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the title tag (c) the br tag (d) the viewport meta tag
40. 40.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 12; i = i + 4) {
      console.log(i);
    }

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