← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 38 · 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: h1 { font-size: 32px; } goes in style.css. (a) True (b) False
  2. 2.What does justify-content: center do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the end (d) packs boxes at the start
  3. 3.📝 Does <img> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
  4. 4.What does justify-content: flex-start do? (a) packs boxes at the end (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the start
  5. 5.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      background-color: yellow;
      font-style: italic;
      padding: 8px;
      font-size: 20px;
    }
  6. 6.📝 How many paragraphs does this code make?
    <p>My best friend</p>
    <h2>Our school trip</h2>
    <h2>Fun facts</h2>
    <h2>My pets</h2>
    <h2>Cricket is fun.</h2>
    <h2>Hello, world!</h2>
  7. 7.📝 Which tag gives a form box a name you can click? (a) <hr> (b) <title> (c) <label> (d) <h1>
  8. 8.True or false: “link text “click here”” helps everyone use the page. (a) True (b) False
  9. 9.📝 How many paragraphs does this code make?
    <p>Fun facts</p>
    <p>Fun facts</p>
    <p>Fun facts</p>
    <p>My pets</p>
  10. 10.📊 Which tag makes one table row? (a) <table> (b) <caption> (c) <th> (d) <tr>
  11. 11.🔗 Where does this link open?
    <a href="about.html">Take the quiz</a>     (a) in a new tab (b) in the same tab
  12. 12.True or false: a web browser turns HTML into a page. (a) True (b) False
  13. 13.🔠 Which heading shows the BIGGEST text: <h4>, <h3>, <h6> or <h5>? (a) <h3> (b) <h5> (c) <h6> (d) <h4>
  14. 14.♿ Is this heading order correct (no level skipped)?
    <h1> → <h1> → <h3> → <h4>     (a) No (b) Yes
  15. 15.🎨 Which tag connects an outside CSS file? (a) <img> (b) <link> (c) <a> (d) <css>
  16. 16.🖌️ What colour is behind the letters?
    h2 {
      text-align: right;
      background-color: green;
      font-size: 24px;
      color: orange;
    }     (a) yellow (b) green (c) orange
  17. 17.🛡️ Online: is it safe to tell a trusted adult? (a) not safe (b) safe
  18. 18.📝 On how many lines does the browser show this paragraph?
    <p>Kites fly high<br>Rivers flow<br>Sky is blue<br>Stars shine</p>
  19. 19.🌍 Which one sends the page back? (a) the URL (b) HTTPS (c) the browser (d) the server
  20. 20.True or false: <ul><li>Art</li></ul> goes in style.css. (a) False (b) True
  21. 21.💾 A web page file usually ends with which extension? (a) .txt (b) .png (c) .html (d) .mp3
  22. 22.💬 Which text will NOT show on the page?
    <!-- <p>I love mangoes.</p> -->
    <p>Our school trip</p>
    <p>Rain today</p>
    <p>Good morning!</p>     (a) Rain today (b) Good morning! (c) I love mangoes. (d) Our school trip
  23. 23.🚀 Should file names have spaces, like my page.html? (a) Yes (b) No
  24. 24.🌐 Which one hosts websites online? (a) a web browser (b) a code editor (c) a web server
  25. 25.🔍 One closing tag is missing. Which one?
    <u>Our school trip</u>
    <em>The red kite</em>
    <h1>Good morning!     (a) </u> (b) </em> (c) </h1> (d) </h2>
  26. 26.🖌️ What colour is behind the letters?
    h2 {
      text-align: left;
      background-color: orange;
      font-size: 20px;
      color: blue;
    }     (a) yellow (b) orange (c) blue
  27. 27.📋 How many items does this list show?
    <ul>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Mango</li>
      <li>Jamun</li>
      <li>Litchi</li>
      <li>Banana</li>
    </ul>
  28. 28.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as a new line (b) as 5 spaces (c) as one space (d) as a dot
  29. 29.🖼️ How many pixels wide is the picture drawn?
    <img src="moon.png" alt="The full moon" width="50">
  30. 30.🧭 Which semantic tag holds a news story? (a) <aside> (b) <main> (c) <article> (d) <header>
  31. 31.🔢 In a basic web page file, which comes FIRST? (a) </html> (b) </body> (c) <!DOCTYPE html> (d) </head>
  32. 32.True or false: “write clear link text” helps everyone use the page. (a) True (b) False
  33. 33.🏷️ What does a closing tag have that an opening tag does not? (a) a hash # (b) a dot . (c) a slash / (d) a dollar $
  34. 34.🎯 Which CSS selector matches this element?
    <div class="red" id="intro">Hello</div>     (a) .box (b) .intro (c) #main (d) #intro
  35. 35.🔢 In a basic web page file, which comes LAST? (a) </html> (b) <!DOCTYPE html> (c) <html> (d) <head>
  36. 36.🌈 Which colour of light is strongest in rgb(22, 114, 254)? (a) green (b) blue (c) red
  37. 37.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
  38. 38.True or false: “images with no alt” makes the page harder to use. (a) True (b) False
  39. 39.Which of these is a weak password? (a) password (b) Blue@Tiger_74 (c) S0lar!Pen#8 (d) Kite_Fl1es@Dawn
  40. 40.🎯 Can many elements share the same class? (a) No (b) Yes

Answer key

  1. True
  2. puts boxes in the middle
  3. an empty tag
  4. packs boxes at the start
  5. 4
  6. 1
  7. <label>
  8. False
  9. 4
  10. <tr>
  11. in the same tab
  12. True
  13. <h3>
  14. No
  15. <link>
  16. green
  17. safe
  18. 4
  19. the server
  20. False
  21. .html
  22. I love mangoes.
  23. No
  24. a web server
  25. </h1>
  26. orange
  27. 6
  28. as one space
  29. 50
  30. <article>
  31. <!DOCTYPE html>
  32. True
  33. a slash /
  34. #intro
  35. </html>
  36. blue
  37. 20
  38. True
  39. password
  40. Yes

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