← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 118 · 40 questions
TalentJR

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.

NameDateTime takenScore ___ / 40
  1. 1.📊 Where do <td> cells go? (a) inside a <li> (b) inside a <tr> (c) inside the <head> (d) inside a <p>
  2. 2.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }
  3. 3.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
  4. 4.🖼️ Which picture file does the browser load?
    <img src="kite.png" alt="A red kite" width="350">     (a) kite.png (b) cake.jpg (c) A red kite (d) map.png
  5. 5.🔗 Where does this link open?
    <a href="about.html">Maths fun</a>     (a) in the same tab (b) in a new tab
  6. 6.True or false: #main is an id selector. (a) True (b) False
  7. 7.🔠 How many <h1> headings should a page usually have? (a) 6 (b) 10 (c) 3 (d) 1
  8. 8.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    p { color: yellow; }
    .box { color: orange; }
    #top { color: black; }     (a) blue (b) yellow (c) orange (d) black
  9. 9.📋 Which tag goes around each item of a list? (a) <ol> (b) <p> (c) <ul> (d) <li>
  10. 10.💪 Which justify-content value packs boxes at the end? (a) center (b) space-between (c) flex-start (d) flex-end
  11. 11.Which of these is a strong password? (a) Kite_Fl1es@Dawn (b) abcd1234 (c) password (d) qwerty
  12. 12.♿ Does this help everyone, or make the page harder to use: add alt text to images? (a) makes it harder (b) helps everyone
  13. 13.🔍 One closing tag is missing. Which one?
    <i>Rain today
    <h1>Good morning!</h1>
    <h2>Hello, world!</h2>     (a) </b> (b) </i> (c) </h2> (d) </h1>
  14. 14.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the body (b) in the head
  15. 15.True or false: padding is the gap to other boxes. (a) True (b) False
  16. 16.⚡ Which JavaScript word runs code when true? (a) for (b) alert() (c) if (d) console.log()
  17. 17.🔠 Which heading shows the BIGGEST text: <h5>, <h3>, <h1> or <h6>? (a) <h1> (b) <h3> (c) <h5> (d) <h6>
  18. 18.True or false: <table> holds the whole table. (a) True (b) False
  19. 19.True or false: in <img>, src shows if the image fails. (a) True (b) False
  20. 20.📄 Where does the text of <title> appear? (a) on the browser tab (b) at the bottom (c) nowhere (d) in a big heading
  21. 21.🔗 Which address opens when you click this link?
    <a href="art.html">Take the quiz</a>     (a) news.html (b) art.html (c) Take the quiz (d) quiz.html
  22. 22.🖌️ Which CSS property centres a heading? (a) color (b) background-color (c) text-align (d) font-weight
  23. 23.🧭 Is <header> semantic or not semantic? (a) not semantic (b) semantic
  24. 24.Which of these is true of <nav>? (a) helps you move around (b) sits at the very top (c) is the page’s key part (d) sits at the bottom
  25. 25.🧩 Which language reacts to a button click? (a) JavaScript (b) HTML (c) CSS
  26. 26.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
  27. 27.True or false: <input type="text"> is for one line of words. (a) True (b) False
  28. 28.🧭 Why use <nav> instead of <div> for a menu? (a) it tells its meaning (b) it adds pictures (c) it loads faster (d) it makes text red
  29. 29.True or false: margin is the gap to other boxes. (a) True (b) False
  30. 30.Which of these is an opening tag? (a) </body> (b) </h1> (c) </title> (d) <body>
  31. 31.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
  32. 32.🔗 Which words do you click on?
    <a href="about.html">Art corner</a>     (a) Art corner (b) href (c) School news (d) about.html
  33. 33.🔗 Which tag makes a clickable link? (a) <p> (b) <link> (c) <img> (d) <a>
  34. 34.🎯 How many elements on a page should have the same id? (a) any number (b) 1 (c) 5 (d) 2
  35. 35.Which of these is margin? (a) a solid or dotted edge (b) the text or picture (c) space outside the border (d) the line round the box
  36. 36.🏷️ What does a closing tag have that an opening tag does not? (a) a dot . (b) a dollar $ (c) a hash # (d) a slash /
  37. 37.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    .big { color: red; }
    .big { color: purple; }     (a) red (b) black (c) purple (d) blue
  38. 38.True or false: <p> goes in the body. (a) True (b) False
  39. 39.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) makes it harder (b) helps everyone
  40. 40.🔠 Which tag is the least important heading? (a) <h3> (b) <h6> (c) <h1> (d) <p>

Answer key

  1. inside a <tr>
  2. 18
  3. packs boxes at the start
  4. kite.png
  5. in the same tab
  6. True
  7. 1
  8. black
  9. <li>
  10. flex-end
  11. Kite_Fl1es@Dawn
  12. helps everyone
  13. </i>
  14. in the head
  15. False
  16. if
  17. <h1>
  18. True
  19. False
  20. on the browser tab
  21. art.html
  22. text-align
  23. semantic
  24. helps you move around
  25. JavaScript
  26. 50
  27. True
  28. it tells its meaning
  29. True
  30. <body>
  31. an element selector
  32. Art corner
  33. <a>
  34. 1
  35. space outside the border
  36. a slash /
  37. purple
  38. True
  39. helps everyone
  40. <h6>

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