← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 823 · 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.🔗 What does target="_blank" do to a link? (a) opens it in a new tab (b) hides the link (c) makes it blank (d) makes it bold
  2. 2.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
  3. 3.💬 How does an HTML comment start? (a) // (b) # (c) <!-- (d) /*
  4. 4.📄 Can HTML on its own make tables? (a) No (b) Yes
  5. 5.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    }
  6. 6.🔠 Which heading shows the BIGGEST text: <h4>, <h1>, <h2> or <h3>? (a) <h3> (b) <h4> (c) <h1> (d) <h2>
  7. 7.✍️ Which sign goes between a property and its value? (a) - (b) = (c) : (d) ;
  8. 8.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 380px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 80px wide (no margins).
  9. 9.🚀 Which file should this code go in: body { margin: 0; } (a) script.js (b) index.html (c) style.css
  10. 10.True or false: HTML on its own cannot add up two numbers. (a) False (b) True
  11. 11.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) center (d) flex-end
  12. 12.🔢 On a typical page, from top to bottom, which comes first: “<footer>” or “<header>”? (a) <footer> (b) <header>
  13. 13.⚡ What number does this code print?
    let a = 7;
    let b = 3;
    console.log(a * b);
  14. 14.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }     (a) Yes (b) No
  15. 15.📝 Which tag holds a whole form? (a) <form> (b) <input> (c) <table> (d) <ol>
  16. 16.📦 In the box model, which part is space inside the border? (a) margin (b) content (c) border (d) padding
  17. 17.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 18px;
      }
    }
  18. 18.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or narrower (c) 800px or wider (d) exactly 100px
  19. 19.🔢 To build and share your first web page, what comes right after “add CSS styles”? (a) write the HTML (b) plan what to show (c) test in a browser (d) publish it online
  20. 20.🎯 Which sign starts a class selector? (a) . (b) @ (c) # (d) &
  21. 21.🖌️ Which CSS property centres a heading? (a) background-color (b) text-align (c) font-size (d) font-family
  22. 22.📝 Which tag makes a drop-down list? (a) <select> (b) <ol> (c) <li> (d) <ul>
  23. 23.Which of these has a closing tag? (a) <br> (b) <input> (c) <li> (d) <hr>
  24. 24.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      font-size: 20px;
    }
  25. 25.Which of these is an empty tag? (a) <p> (b) <li> (c) <title> (d) <hr>
  26. 26.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 150px;
      padding: 15px;
      border: 1px solid black;
      margin: 10px;
    }
  27. 27.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the hr tag (c) the viewport meta tag (d) the title tag
  28. 28.📋 How many items does this list show?
    <ul>
      <li>Litchi</li>
      <li>Orange</li>
      <li>Grapes</li>
      <li>Banana</li>
      <li>Mango</li>
      <li>Papaya</li>
    </ul>
  29. 29.True or false: <ol> shows bullet points. (a) False (b) True
  30. 30.🛡️ Online: is it safe to log out on shared PCs? (a) not safe (b) safe
  31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      text-align: center;
      border: 2px solid;
    }
  32. 32.Which of these is the border? (a) a solid or dotted edge (b) space inside the border (c) the text or picture (d) the gap to other boxes
  33. 33.📄 Where does <title> go: in the head or in the body? (a) in the head (b) in the body
  34. 34.Which of these is a closing tag? (a) <b> (b) </p> (c) <p> (d) <title>
  35. 35.🔗 Which tag makes a clickable link? (a) <link> (b) <p> (c) <img> (d) <a>
  36. 36.🧭 Which semantic tag sits at the bottom? (a) <header> (b) <main> (c) <nav> (d) <footer>
  37. 37.Which of these does JavaScript do? (a) makes a form box (b) makes a link (c) adds space around boxes (d) checks a quiz answer
  38. 38.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) flex-start (c) center (d) space-between
  39. 39.✍️ In color: blue; which part is the property? (a) ; (b) color (c) : (d) blue
  40. 40.🎯 What kind of selector is .note? (a) a class selector (b) an id selector (c) an element selector

Answer key

  1. opens it in a new tab
  2. 10
  3. <!--
  4. Yes
  5. 22
  6. <h1>
  7. :
  8. 60
  9. style.css
  10. True
  11. center
  12. <header>
  13. 21
  14. Yes
  15. <form>
  16. padding
  17. 18
  18. 800px or wider
  19. test in a browser
  20. .
  21. text-align
  22. <select>
  23. <li>
  24. 1
  25. <hr>
  26. 202
  27. the viewport meta tag
  28. 6
  29. False
  30. safe
  31. 2
  32. a solid or dotted edge
  33. in the head
  34. </p>
  35. <a>
  36. <footer>
  37. checks a quiz answer
  38. flex-end
  39. color
  40. a class selector

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