← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 129 · 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.True or false: padding is the text or picture. (a) False (b) True
  2. 2.🔗 Which tag makes a clickable link? (a) <a> (b) <p> (c) <img> (d) <link>
  3. 3.🔠 Which heading shows the BIGGEST text: <h5>, <h3>, <h2> or <h4>? (a) <h2> (b) <h3> (c) <h5> (d) <h4>
  4. 4.📝 What does <br> do? (a) adds a picture (b) makes text bold (c) makes a list (d) starts a new line
  5. 5.✍️ Which property is set to 8px in this rule?
    h1 {
      text-align: center;
      border: 2px solid;
      padding: 8px;
    }     (a) padding (b) border (c) font-weight (d) 8px
  6. 6.🖌️ Where does the text sit on its line?
    h2 {
      color: blue;
      text-align: right;
      font-size: 40px;
      background-color: red;
    }     (a) on the left (b) in the middle (c) on the right
  7. 7.✍️ What is the selector in this CSS rule?
    h1 {
      border: 2px solid;
      font-weight: bold;
      width: 300px;
    }     (a) h1 (b) bold (c) p (d) border
  8. 8.🖌️ What colour are the letters?
    li {
      font-size: 28px;
      background-color: red;
      color: yellow;
      text-align: left;
    }     (a) yellow (b) orange (c) red
  9. 9.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
  10. 10.Which of these goes in the head? (a) <p> (b) <ul> (c) <h1> (d) <title>
  11. 11.🔠 How many headings are in this code?
    <h1>My best friend</h1>
    <p>Fun facts</p>
    <p>I love mangoes.</p>
    <h4>My best friend</h4>
  12. 12.🔁 Which loop repeats code a set number of times? (a) else (b) let (c) if (d) for
  13. 13.🔍 Which is the odd one out? (a) sets colours and fonts (b) adds space around boxes (c) changes the text size (d) changes the page live
  14. 14.⚡ Which JavaScript word repeats code? (a) for (b) let (c) console.log() (d) alert()
  15. 15.True or false: <input type="email"> is for an email address. (a) True (b) False
  16. 16.🚀 Which file should this code go in: <p>Hello!</p> (a) script.js (b) style.css (c) index.html
  17. 17.💬 How does an HTML comment end? (a) // (b) --> (c) */ (d) >>
  18. 18.True or false: <input type="radio"> is for an email address. (a) False (b) True
  19. 19.⚡ Which JavaScript word runs code when true? (a) if (b) console.log() (c) let (d) alert()
  20. 20.📝 How many paragraphs does this code make?
    <p>Hello, world!</p>
    <p>Rain today</p>
    <h2>Hello, world!</h2>
    <p>Our school trip</p>
  21. 21.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 3; i++) {
      total = total + 7;
    }
    console.log(total);
  22. 22.🖌️ How big is the text, in px?
    h2 {
      background-color: blue;
      font-size: 36px;
      text-align: left;
      color: orange;
    }
  23. 23.🔠 Which tag is used for the main title on a page? (a) <br> (b) <h1> (c) <h6> (d) <p>
  24. 24.📋 Which list shows the steps of a recipe best? (a) <ul> (b) <hr> (c) <br> (d) <ol>
  25. 25.🔗 Which address opens when you click this link?
    <a href="games.html">Maths fun</a>     (a) Maths fun (b) contact.html (c) games.html (d) about.html
  26. 26.⚖️ What colour is the text of this element?
    <h2 class="menu" id="logo">Hi</h2>
    CSS:
    .menu { color: green; }
    .menu { color: blue; }     (a) white (b) green (c) blue (d) purple
  27. 27.📱 What does a media query check? (a) the time of day (b) the battery level (c) the screen width (d) the page title
  28. 28.🌈 In #00001d the blue part is the hex number 1d. What is it as a normal number?
  29. 29.✍️ Which property is set to red in this rule?
    li {
      margin: 10px;
      color: red;
      background-color: yellow;
      width: 300px;
    }     (a) font-size (b) color (c) red (d) text-align
  30. 30.True or false: <input> has a closing tag. (a) True (b) False
  31. 31.True or false: HTML on its own can keep a high score. (a) True (b) False
  32. 32.🔗 Where does this link open?
    <a href="contact.html" target="_blank">Art corner</a>     (a) in a new tab (b) in the same tab
  33. 33.True or false: <article> helps you move around. (a) True (b) False
  34. 34.📋 Which list suits a shopping list in any order? (a) <ol> (b) <hr> (c) <br> (d) <ul>
  35. 35.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 3; i++) {
      total = total + 8;
    }
    console.log(total);
  36. 36.📄 Where does <p> go: in the head or in the body? (a) in the head (b) in the body
  37. 37.♿ What does good colour contrast mean? (a) text stands out clearly (b) many bright colours (c) no colours at all (d) only red text
  38. 38.True or false: in <img>, height sets how tall it is. (a) False (b) True
  39. 39.📝 What do we need to write HTML? (a) a microphone (b) a paintbrush (c) a plain text editor (d) a printer
  40. 40.True or false: <style> goes in the head. (a) False (b) True

Answer key

  1. False
  2. <a>
  3. <h2>
  4. starts a new line
  5. padding
  6. on the right
  7. h1
  8. yellow
  9. Yes
  10. <title>
  11. 2
  12. for
  13. changes the page live
  14. for
  15. True
  16. index.html
  17. -->
  18. False
  19. if
  20. 3
  21. 21
  22. 36
  23. <h1>
  24. <ol>
  25. games.html
  26. blue
  27. the screen width
  28. 29
  29. color
  30. False
  31. False
  32. in a new tab
  33. False
  34. <ul>
  35. 24
  36. in the body
  37. text stands out clearly
  38. True
  39. a plain text editor
  40. True

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