← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 327 · 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.📋 Which list tag shows bullet points? (a) <li> (b) <ol> (c) <ul>
  2. 2.What does font-weight do? (a) centres a heading (b) makes the text bold (c) colours behind the text (d) makes letters bigger
  3. 3.🔤 In “HTML”, what does the M stand for? (a) Markup (b) Machine (c) Modern (d) Mouse
  4. 4.📝 What does <br> do? (a) makes a list (b) starts a new line (c) makes text bold (d) adds a picture
  5. 5.💬 Does the browser show comments on the page? (a) Yes (b) No
  6. 6.🌍 What is the domain name in this URL?
    http://kids.example.org/art/gallery.html     (a) school.example.in (b) /art/gallery.html (c) http (d) kids.example.org
  7. 7.True or false: <nav> holds the logo and title. (a) True (b) False
  8. 8.🔁 What does this code print?
    let temp = 40;
    if (temp >= 41) {
      console.log("Hot");
    } else {
      console.log("Cool");
    }     (a) Hot (b) Cool
  9. 9.🧩 Which language checks a quiz answer? (a) CSS (b) JavaScript (c) HTML
  10. 10.🔠 Which heading shows the BIGGEST text: <h3>, <h1>, <h2> or <h5>? (a) <h2> (b) <h1> (c) <h3> (d) <h5>
  11. 11.🎯 What kind of selector is .card? (a) an element selector (b) a class selector (c) an id selector
  12. 12.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
  13. 13.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 15px;
      border: 5px solid black;
      margin: 5px;
    }
  14. 14.⚖️ What colour is the text of this element?
    <h2 class="red" id="intro">Hi</h2>
    CSS:
    h2 { color: blue; }
    #intro { color: yellow; }     (a) blue (b) yellow (c) white (d) red
  15. 15.💬 How many paragraphs show on the page?
    <p>My best friend</p>
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>The red kite</p> -->
    <!-- <p>Cricket is fun.</p> -->
    <!-- <p>Hello, world!</p> -->
  16. 16.True or false: .menu is an id selector. (a) False (b) True
  17. 17.✍️ In color: blue; which part is the property? (a) : (b) ; (c) color (d) blue
  18. 18.🌈 Which colour of light is strongest in rgb(71, 162, 9)? (a) green (b) blue (c) red
  19. 19.🔗 Which address opens when you click this link?
    <a href="maths.html">Maths fun</a>     (a) Maths fun (b) maths.html (c) news.html (d) art.html
  20. 20.🔍 One closing tag is missing. Which one?
    <strong>Rain today</strong>
    <u>Hello, world!
    <em>Fun facts</em>     (a) </em> (b) </h3> (c) </strong> (d) </u>
  21. 21.🖌️ What colour is behind the letters?
    p {
      color: purple;
      text-align: left;
      font-size: 20px;
      background-color: green;
    }     (a) green (b) purple (c) red
  22. 22.🌈 Which colour is #00ff00? (a) blue (b) bright green (c) red (d) white
  23. 23.🌈 Which hex code is magenta? (a) #ff0000 (b) #00ff00 (c) #000000 (d) #ff00ff
  24. 24.🏷️ Every HTML tag starts with which sign? (a) < (b) { (c) ( (d) [
  25. 25.🔁 What does this code print?
    let age = 16;
    if (age >= 26) {
      console.log("teen");
    } else {
      console.log("child");
    }     (a) teen (b) child
  26. 26.🎯 Which element does the selector .note style? (a) <span class="note"> (b) <p class="red"> (c) <span class="big"> (d) <span id="note">
  27. 27.🔗 Where does this link open?
    <a href="games.html" target="_blank">Visit the site</a>     (a) in the same tab (b) in a new tab
  28. 28.📄 Where does the text of <title> appear? (a) nowhere (b) at the bottom (c) in a big heading (d) on the browser tab
  29. 29.🏷️ Is </b> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
  30. 30.🔒 Is the connection to this address scrambled (encrypted)?
    https://school.example.in/art/gallery.html     (a) No (b) Yes
  31. 31.🔗 Which address opens when you click this link?
    <a href="art.html">About us</a>     (a) art.html (b) About us (c) news.html (d) quiz.html
  32. 32.⚡ Which JavaScript word makes a new variable? (a) if (b) console.log() (c) alert() (d) let
  33. 33.🎯 Which element does the selector #main style? (a) <span class="main"> (b) <span id="logo"> (c) <p class="big"> (d) <span id="main">
  34. 34.🖌️ How big is the text, in px?
    p {
      text-align: left;
      color: orange;
      background-color: red;
      font-size: 20px;
    }
  35. 35.Which of these has a closing tag? (a) <br> (b) <img> (c) <li> (d) <hr>
  36. 36.Which colour pair is easy to read? (a) red on green (b) pink on red (c) black on white (d) yellow on white
  37. 37.🔐 Is iloveyou a strong or a weak password? (a) weak (b) strong
  38. 38.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 100 (c) 255 (d) 99
  39. 39.📱 What does a media query check? (a) the page title (b) the time of day (c) the battery level (d) the screen width
  40. 40.🎯 How many elements on a page should have the same id? (a) 5 (b) 2 (c) any number (d) 1

Answer key

  1. <ul>
  2. makes the text bold
  3. Markup
  4. starts a new line
  5. No
  6. kids.example.org
  7. False
  8. Cool
  9. JavaScript
  10. <h1>
  11. a class selector
  12. 30
  13. 290
  14. yellow
  15. 1
  16. False
  17. color
  18. green
  19. maths.html
  20. </u>
  21. green
  22. bright green
  23. #ff00ff
  24. <
  25. child
  26. <span class="note">
  27. in a new tab
  28. on the browser tab
  29. a closing tag
  30. Yes
  31. art.html
  32. let
  33. <span id="main">
  34. 20
  35. <li>
  36. black on white
  37. weak
  38. 255
  39. the screen width
  40. 1

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