← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 138 · 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 <br> do? (a) makes text bold (b) starts a new line (c) adds a picture (d) makes a list
  2. 2.🎯 Which sign starts an id selector? (a) @ (b) # (c) & (d) .
  3. 3.⚡ What number does this code print?
    let a = 10;
    let b = 10;
    console.log(a * b);
  4. 4.📋 What number does the browser show next to “Jamun”?
    <ol>
      <li>Grapes</li>
      <li>Papaya</li>
      <li>Jamun</li>
      <li>Banana</li>
      <li>Guava</li>
    </ol>
  5. 5.📝 How many <input> tags are in this form?
    <form>
      <input type="checkbox">
      <input type="text">
      <input type="date">
      <input type="submit" value="Send">
    </form>
  6. 6.🔠 Which heading shows the SMALLEST text: <h1>, <h3>, <h6> or <h5>? (a) <h3> (b) <h6> (c) <h1> (d) <h5>
  7. 7.🔠 How many <h1> headings should a page usually have? (a) 10 (b) 3 (c) 1 (d) 6
  8. 8.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      text-align: center;
      background-color: yellow;
      font-size: 20px;
    }
  9. 9.🔗 Which tag makes a clickable link? (a) <a> (b) <link> (c) <p> (d) <img>
  10. 10.🖼️ Does <img> need a closing tag? (a) No (b) Yes
  11. 11.🛡️ Online: is it safe to type a password on http? (a) safe (b) not safe
  12. 12.📋 Which tag goes around each item of a list? (a) <ol> (b) <ul> (c) <p> (d) <li>
  13. 13.🌈 Which colour is #ffffff? (a) blue (b) white (c) bright green (d) red
  14. 14.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    }     (a) No (b) Yes
  15. 15.🧩 An opening tag + content + a closing tag together make an ___. (a) editor (b) address (c) attribute (d) element
  16. 16.True or false: “use headings in order” makes the page harder to use. (a) False (b) True
  17. 17.🔗 Where does this link open?
    <a href="quiz.html">School news</a>     (a) in the same tab (b) in a new tab
  18. 18.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 10px;
      border: 1px solid black;
      margin: 20px;
    }
  19. 19.🖼️ Why do we add alt text to an image? (a) to colour it (b) to make it bigger (c) to describe the image (d) to load it faster
  20. 20.🔗 Where does this link open?
    <a href="maths.html">Maths fun</a>     (a) in the same tab (b) in a new tab
  21. 21.🧭 Is <div> semantic or not semantic? (a) not semantic (b) semantic
  22. 22.🌈 Which colour of light is strongest in rgb(227, 71, 70)? (a) blue (b) green (c) red
  23. 23.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 150px;
      padding: 30px;
      border: 5px solid black;
      margin: 15px;
    }
  24. 24.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 90px;
      padding: 25px;
      border: 2px solid black;
      margin: 10px;
    }
  25. 25.🔡 Are HTML tag names usually written in small letters? (a) Yes (b) No
  26. 26.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="colour"> Blue
      <input type="radio" name="colour"> Green
      <input type="radio" name="colour"> Pink
      <input type="radio" name="colour"> Red
      <input type="radio" name="colour"> Orange
    </form>
  27. 27.🛡️ Should you share your password with your best friend? (a) Yes (b) No
  28. 28.🖼️ Which attribute of <img> sets how wide it is? (a) width (b) src (c) height (d) alt
  29. 29.🖌️ Where does the text sit on its line?
    p {
      color: blue;
      font-size: 36px;
      text-align: center;
      background-color: yellow;
    }     (a) on the left (b) in the middle (c) on the right
  30. 30.♿ Who uses a screen reader? (a) only teachers (b) only robots (c) people who are blind (d) only coders
  31. 31.🎯 Which CSS selector matches this element?
    <h1 class="menu" id="logo">Hello</h1>     (a) .note (b) #menu (c) h1 (d) #end
  32. 32.True or false: <th> makes one table row. (a) True (b) False
  33. 33.🔐 Is Blue@Tiger_74 a strong or a weak password? (a) strong (b) weak
  34. 34.📋 Which list shows the steps of a recipe best? (a) <br> (b) <ol> (c) <hr> (d) <ul>
  35. 35.⚖️ What colour is the text of this element?
    <h1 class="star" id="top">Hi</h1>
    CSS:
    #top { color: red; }
    #top { color: blue; }     (a) blue (b) black (c) yellow (d) red
  36. 36.📊 Where do <td> cells go? (a) inside a <tr> (b) inside the <head> (c) inside a <li> (d) inside a <p>
  37. 37.📄 Where does <h1> go: in the head or in the body? (a) in the body (b) in the head
  38. 38.Which colour pair is hard to read? (a) yellow on black (b) yellow on white (c) black on white (d) white on dark blue
  39. 39.🌗 Is pink on red easy or hard to read? (a) easy to read (b) hard to read
  40. 40.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    p { color: white; }
    #top { color: yellow; }
    .star { color: red; }     (a) yellow (b) white (c) orange (d) red

Answer key

  1. starts a new line
  2. #
  3. 100
  4. 3
  5. 4
  6. <h6>
  7. 1
  8. 3
  9. <a>
  10. No
  11. not safe
  12. <li>
  13. white
  14. No
  15. element
  16. False
  17. in the same tab
  18. 172
  19. to describe the image
  20. in the same tab
  21. not semantic
  22. red
  23. 250
  24. 144
  25. Yes
  26. 1
  27. No
  28. width
  29. in the middle
  30. people who are blind
  31. h1
  32. False
  33. strong
  34. <ol>
  35. blue
  36. inside a <tr>
  37. in the body
  38. yellow on white
  39. hard to read
  40. yellow

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