← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 857 · 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.🔠 How many heading levels does HTML have? (a) 6 (b) 3 (c) 4 (d) 10
  2. 2.♿ Who uses a screen reader? (a) only coders (b) people who are blind (c) only robots (d) only teachers
  3. 3.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }     (a) Yes (b) No
  4. 4.🧭 Why use <nav> instead of <div> for a menu? (a) it adds pictures (b) it tells its meaning (c) it loads faster (d) it makes text red
  5. 5.📋 Which list tag lists things in any order? (a) <li> (b) <ul> (c) <ol>
  6. 6.🧭 Which semantic tag holds a news story? (a) <header> (b) <article> (c) <aside> (d) <nav>
  7. 7.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the hr tag (d) the br tag
  8. 8.🎯 What kind of selector is .note? (a) an element selector (b) an id selector (c) a class selector
  9. 9.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 120px;
      padding: 25px;
      border: 4px solid black;
      margin: 15px;
    }
  10. 10.🔠 Which heading shows the BIGGEST text: <h3>, <h4>, <h2> or <h6>? (a) <h3> (b) <h4> (c) <h6> (d) <h2>
  11. 11.True or false: HTML on its own can show paragraphs. (a) False (b) True
  12. 12.🧩 Which language shows a pop-up message? (a) HTML (b) JavaScript (c) CSS
  13. 13.🖌️ What colour are the letters?
    p {
      text-align: center;
      font-size: 20px;
      color: yellow;
      background-color: red;
    }     (a) purple (b) yellow (c) red
  14. 14.What is <input type="submit"> for? (a) lets you pick only one (b) is for an email address (c) takes only numbers (d) sends the form
  15. 15.✍️ What is the selector in this CSS rule?
    body {
      color: red;
      margin: 10px;
      font-size: 20px;
      text-align: center;
    }     (a) 10px (b) .box (c) color (d) body
  16. 16.💬 Does the browser show comments on the page? (a) Yes (b) No
  17. 17.🔗 Which address opens when you click this link?
    <a href="art.html">School news</a>     (a) quiz.html (b) news.html (c) School news (d) art.html
  18. 18.What is <input type="checkbox"> for? (a) sends the form (b) picks a day (c) lets you tick many (d) lets you pick only one
  19. 19.⚖️ What colour is the text of this element?
    <h1 class="star" id="intro">Hi</h1>
    CSS:
    h1 { color: white; }
    h1 { color: red; }     (a) white (b) green (c) blue (d) red
  20. 20.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h2> → <h3>     (a) Yes (b) No
  21. 21.🌍 Which one asks for a web page? (a) the browser (b) HTTPS (c) the server (d) the URL
  22. 22.Which of these is a strong password? (a) password (b) Mango#Kite29! (c) 123456 (d) abcd1234
  23. 23.🏷️ Is </title> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
  24. 24.True or false: <title> goes in the body. (a) True (b) False
  25. 25.⚡ What does this code show?
    let name = "Meera";
    alert("Welcome, " + name + "!");     (a) Welcome, Meera! (b) Welcome, name! (c) name (d) Meera
  26. 26.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    p { color: purple; }
    p { color: blue; }     (a) purple (b) yellow (c) blue (d) white
  27. 27.🔗 Which tag makes a clickable link? (a) <img> (b) <link> (c) <a> (d) <p>
  28. 28.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      font-size: 20px;
      font-style: italic;
      border: 2px solid;
      width: 300px;
    }
  29. 29.🔠 Which heading shows the SMALLEST text: <h3>, <h6>, <h4> or <h5>? (a) <h4> (b) <h6> (c) <h3> (d) <h5>
  30. 30.True or false: score = score + 1; goes in index.html. (a) False (b) True
  31. 31.📊 Are <th> cells shown bold and centred by default? (a) Yes (b) No
  32. 32.🖼️ Which picture file does the browser load?
    <img src="cake.jpg" alt="Birthday cake" width="250">     (a) moon.png (b) dog.jpg (c) Birthday cake (d) cake.jpg
  33. 33.🏷️ Which is the closing tag for <i>? (a) </i> (b) <\i> (c) <i> (d) <i/>
  34. 34.🏷️ Is </p> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
  35. 35.📝 Which input type picks a day? (a) submit (b) radio (c) checkbox (d) date
  36. 36.🔁 How many numbers does this code print?
    for (let i = 0; i < 14; i = i + 3) {
      console.log(i);
    }
  37. 37.💬 How does an HTML comment end? (a) // (b) */ (c) --> (d) >>
  38. 38.🧭 Who is helped most by semantic tags? (a) screen-reader users (b) only the server (c) nobody (d) only the printer
  39. 39.🌗 Is blue on purple easy or hard to read? (a) easy to read (b) hard to read
  40. 40.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Colourful Site Styles (c) Cascading Style Sheets (d) Creative Sheet System

Answer key

  1. 6
  2. people who are blind
  3. No
  4. it tells its meaning
  5. <ul>
  6. <article>
  7. the viewport meta tag
  8. a class selector
  9. 178
  10. <h2>
  11. True
  12. JavaScript
  13. yellow
  14. sends the form
  15. body
  16. No
  17. art.html
  18. lets you tick many
  19. red
  20. Yes
  21. the browser
  22. Mango#Kite29!
  23. a closing tag
  24. False
  25. Welcome, Meera!
  26. blue
  27. <a>
  28. 4
  29. <h6>
  30. False
  31. Yes
  32. cake.jpg
  33. </i>
  34. a closing tag
  35. date
  36. 5
  37. -->
  38. screen-reader users
  39. hard to read
  40. Cascading Style Sheets

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