Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 908 · 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.🖼️ How many pixels wide is the picture drawn?
   <img src="kite.png" alt="A red kite" width="350">
2. 2.🔁 Which word runs code only when something is true? (a) let (b) if (c) log (d) for
3. 3.🖌️ What colour is behind the letters?
   p {
     text-align: left;
     color: red;
     background-color: orange;
     font-size: 32px;
   } (a) black (b) red (c) orange
4. 4.📝 Which input type lets you tick many? (a) checkbox (b) number (c) text (d) submit
5. 5.🖌️ How big is the text, in px?
   li {
     background-color: purple;
     font-size: 20px;
     text-align: right;
     color: black;
   }
6. 6.True or false: body { margin: 0; } goes in style.css. (a) False (b) True
7. 7.🔗 Which words do you click on?
   <a href="https://example.com">Maths fun</a> (a) href (b) Art corner (c) https://example.com (d) Maths fun
8. 8.🌈 Which colour is #000000? (a) cyan (b) bright green (c) blue (d) black
9. 9.Which of these is a closing tag? (a) <title> (b) <p> (c) </body> (d) <li>
10. 10.💬 Which text will NOT show on the page?
    <p>Hello, world!</p>
    <!-- <p>I love mangoes.</p> -->
    <p>The red kite</p> (a) Hello, world! (b) I love mangoes. (c) The red kite
11. 11.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 4 boxes, each 40px wide (no margins).
12. 12.🎯 Which element does the selector div style? (a) <span> (b) <h1 id="intro"> (c) <p class="big"> (d) <div class="big">
13. 13.True or false: padding is the gap round content. (a) False (b) True
14. 14.🔍 One closing tag is missing. Which one?
    <small>I love mangoes.
    <h1>Hello, world!</h1>
    <i>Cricket is fun.</i> (a) </i> (b) </small> (c) </p> (d) </h1>
15. 15.📋 How many items does this list show?
    <ul>
      <li>Jamun</li>
      <li>Papaya</li>
      <li>Litchi</li>
      <li>Orange</li>
      <li>Grapes</li>
    </ul>
16. 16.Which of these is an empty tag? (a) <hr> (b) <ul> (c) <li> (d) <h1>
17. 17.💪 Which flexbox property turns on flexbox? (a) align-items (b) justify-content (c) display: flex (d) gap
18. 18.🖌️ What colour is behind the letters?
    h2 {
      font-size: 40px;
      color: white;
      background-color: red;
      text-align: left;
    } (a) white (b) purple (c) red
19. 19.🧭 Is <article> semantic or not semantic? (a) semantic (b) not semantic
20. 20.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
21. 21.🌈 In #0000db the blue part is the hex number db. What is it as a normal number?
22. 22.🧭 Is <main> semantic or not semantic? (a) not semantic (b) semantic
23. 23.📝 On how many lines does the browser show this paragraph?
    <p>Roses are red<br>Birds sing<br>Rivers flow<br>Kites fly high<br>Sky is blue</p>
24. 24.🔠 Which heading shows the BIGGEST text: <h6>, <h4>, <h2> or <h1>? (a) <h4> (b) <h1> (c) <h6> (d) <h2>
25. 25.True or false: a web server stores a website’s files. (a) False (b) True
26. 26.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 360px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 80px wide (no margins).
27. 27.True or false: HTML on its own cannot make headings. (a) True (b) False
28. 28.📄 Where does <ul> go: in the head or in the body? (a) in the head (b) in the body
29. 29.🔗 Which words do you click on?
    <a href="news.html">School news</a> (a) School news (b) news.html (c) Take the quiz (d) href
30. 30.✍️ Which sign ends each CSS declaration? (a) ; (b) : (c) . (d) ,
31. 31.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).
32. 32.🖌️ How big is the text, in px?
    li {
      text-align: center;
      background-color: green;
      color: red;
      font-size: 36px;
    }
33. 33.🔗 Which address opens when you click this link?
    <a href="quiz.html">About us</a> (a) about.html (b) quiz.html (c) About us (d) games.html
34. 34.True or false: a code editor hosts websites online. (a) True (b) False
35. 35.Which of these is a strong password? (a) riya2014 (b) abcd1234 (c) Rain#Drop_42! (d) 123456
36. 36.🧱 HTML gives a web page its ___. (a) speed (b) colours (c) sound (d) structure
37. 37.🔗 Where does this link open?
    <a href="maths.html" target="_blank">Art corner</a> (a) in a new tab (b) in the same tab
38. 38.🔗 Which address opens when you click this link?
    <a href="games.html">About us</a> (a) About us (b) games.html (c) contact.html (d) about.html
39. 39.🔗 Which words do you click on?
    <a href="news.html">Contact us</a> (a) news.html (b) href (c) Visit the site (d) Contact us
40. 40.📋 Which list tag shows 1, 2, 3 numbers? (a) <li> (b) <ul> (c) <ol>

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