← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 576 · 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 colour is the text of this element?
    <p class="star" id="hero">Hi</p>
    CSS:
    .star { color: red; }
    .star { color: orange; }     (a) red (b) blue (c) orange (d) white
  2. 2.🛡️ Online: is it safe to tell a trusted adult? (a) not safe (b) safe
  3. 3.📊 How many rows does this table have?
    <table>
      <tr><td>Guava</td><td>Banana</td></tr>
      <tr><td>Orange</td><td>Orange</td></tr>
    </table>
  4. 4.✍️ Which sign ends each CSS declaration? (a) , (b) . (c) ; (d) :
  5. 5.📋 Which list tag is one item of a list? (a) <ul> (b) <li> (c) <ol>
  6. 6.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 25px;
      border: 4px solid black;
      margin: 10px;
    }
  7. 7.🔗 Which words do you click on?
    <a href="quiz.html">Play games</a>     (a) Play games (b) href (c) quiz.html (d) About us
  8. 8.⚖️ What colour is the text of this element?
    <h1 class="star" id="end">Hi</h1>
    CSS:
    #end { color: white; }
    #end { color: red; }     (a) red (b) black (c) purple (d) white
  9. 9.💬 How many paragraphs show on the page?
    <p>Fun facts</p>
    <!-- <p>Rain today</p> -->
    <p>Hello, world!</p>
    <!-- <p>My best friend</p> -->
    <p>My pets</p>
  10. 10.⚡ Which JavaScript word repeats code? (a) let (b) alert() (c) for (d) if
  11. 11.True or false: CSS rounds box corners. (a) False (b) True
  12. 12.📝 Does <img> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
  13. 13.🔁 Which word runs code only when something is true? (a) log (b) for (c) let (d) if
  14. 14.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="colour"> Red
      <input type="checkbox" name="colour"> Pink
      <input type="checkbox" name="colour"> Blue
      <input type="checkbox" name="colour"> Orange
    </form>
  15. 15.📋 Which list tag is an ordered list? (a) <ul> (b) <li> (c) <ol>
  16. 16.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="tiger.jpg" alt="A tiger asleep" width="50">     (a) tiger.jpg (b) A red kite (c) width (d) A tiger asleep
  17. 17.✍️ How does a CSS comment start? (a) // (b) <!-- (c) # (d) /*
  18. 18.📦 In the box model, which part is space outside the border? (a) border (b) padding (c) margin (d) content
  19. 19.🧩 Which language gives the page structure? (a) JavaScript (b) CSS (c) HTML
  20. 20.⚡ What number does this code print?
    let a = 3;
    let b = 11;
    console.log(a * b);
  21. 21.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
  22. 22.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 60px;
      padding: 5px;
      border: 5px solid black;
      margin: 10px;
    }
  23. 23.Which of these is a closing tag? (a) <body> (b) <b> (c) </b> (d) <h1>
  24. 24.💪 Which flexbox property sets space between boxes? (a) display: flex (b) flex-direction (c) align-items (d) gap
  25. 25.True or false: in <img>, src sets how tall it is. (a) False (b) True
  26. 26.🔠 Which heading shows the SMALLEST text: <h4>, <h3>, <h1> or <h5>? (a) <h1> (b) <h3> (c) <h5> (d) <h4>
  27. 27.⚖️ What colour is the text of this element?
    <p class="menu" id="main">Hi</p>
    CSS:
    p { color: blue; }
    p { color: red; }     (a) yellow (b) red (c) blue (d) orange
  28. 28.🖼️ Which tag puts a picture on a page? (a) <img> (b) <p> (c) <a> (d) <pic>
  29. 29.🔗 Which address opens when you click this link?
    <a href="news.html">Take the quiz</a>     (a) Take the quiz (b) games.html (c) news.html (d) quiz.html
  30. 30.⚖️ What colour is the text of this element?
    <h1 class="box" id="intro">Hi</h1>
    CSS:
    #intro { color: orange; }
    #intro { color: red; }     (a) red (b) orange (c) purple (d) green
  31. 31.🖌️ Where does the text sit on its line?
    p {
      background-color: black;
      text-align: center;
      font-size: 20px;
      color: red;
    }     (a) on the left (b) in the middle (c) on the right
  32. 32.📝 How many paragraphs does this code make?
    <p>Fun facts</p>
    <p>The red kite</p>
    <p>My pets</p>
  33. 33.Which of these is an opening tag? (a) </p> (b) <b> (c) </title> (d) </li>
  34. 34.📋 How many items does this list show?
    <ol>
      <li>Orange</li>
      <li>Banana</li>
      <li>Jamun</li>
      <li>Mango</li>
      <li>Litchi</li>
      <li>Papaya</li>
    </ol>
  35. 35.📊 In a table, which tag is a row? (a) <td> (b) <th> (c) <tb> (d) <tr>
  36. 36.📄 Can HTML on its own show paragraphs? (a) No (b) Yes
  37. 37.🔗 Which address opens when you click this link?
    <a href="about.html">Contact us</a>     (a) https://example.com (b) about.html (c) contact.html (d) Contact us
  38. 38.🖼️ Does <img> need a closing tag? (a) No (b) Yes
  39. 39.🖼️ Which attribute of <img> sets how tall it is? (a) src (b) alt (c) width (d) height
  40. 40.Which of these is true of a web browser? (a) is where we type code (b) hosts websites online (c) stores a website’s files (d) has an address bar

Answer key

  1. orange
  2. safe
  3. 2
  4. ;
  5. <li>
  6. 158
  7. Play games
  8. red
  9. 3
  10. for
  11. True
  12. an empty tag
  13. if
  14. 4
  15. <ol>
  16. A tiger asleep
  17. /*
  18. margin
  19. HTML
  20. 33
  21. an element selector
  22. 80
  23. </b>
  24. gap
  25. False
  26. <h5>
  27. red
  28. <img>
  29. news.html
  30. red
  31. in the middle
  32. 3
  33. <b>
  34. 6
  35. <tr>
  36. Yes
  37. about.html
  38. No
  39. height
  40. has an address bar

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