← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 413 · 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.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) color (d) :
  2. 2.Which of these is padding? (a) the gap to other boxes (b) the gap round content (c) the text or picture (d) space outside the border
  3. 3.Which colour pair is easy to read? (a) dark grey on white (b) yellow on white (c) pink on red (d) blue on purple
  4. 4.🔠 Which heading shows the SMALLEST text: <h1>, <h6>, <h5> or <h3>? (a) <h1> (b) <h6> (c) <h3> (d) <h5>
  5. 5.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h4> → <h3>     (a) Yes (b) No
  6. 6.Which of these goes in the body? (a) <link rel="stylesheet"> (b) <meta charset="utf-8"> (c) <style> (d) <a>
  7. 7.🔢 On a typical page, from top to bottom, which comes FIRST? (a) <main> (b) <nav> (c) <header> (d) <footer>
  8. 8.Which of these is safe to do online? (a) log out on shared PCs (b) share your password (c) click prize links (d) type a password on http
  9. 9.🔁 How many times does this code print “Hello”?
    for (let i = 1; i <= 10; i++) {
      console.log("Hello");
    }
  10. 10.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 20px;
      border: 3px solid black;
      margin: 15px;
    }
  11. 11.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
  12. 12.📋 What number does the browser show next to “Jamun”?
    <ol>
      <li>Mango</li>
      <li>Jamun</li>
      <li>Papaya</li>
      <li>Grapes</li>
    </ol>
  13. 13.🌈 Which colour is #ffff00? (a) bright green (b) blue (c) magenta (d) yellow
  14. 14.📝 Which input type lets you tick many? (a) checkbox (b) number (c) email (d) password
  15. 15.🏷️ Which is the closing tag for <h3>? (a) </h3> (b) <h3/> (c) <h3> (d) <\h3>
  16. 16.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    }
  17. 17.🖌️ Which CSS property sets the letter colour? (a) font-size (b) font-family (c) background-color (d) color
  18. 18.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
  19. 19.🔐 Is Mango#Kite29! a strong or a weak password? (a) strong (b) weak
  20. 20.💬 Which text will NOT show on the page?
    <p>Good morning!</p>
    <!-- <p>I love mangoes.</p> -->
    <p>Fun facts</p>     (a) I love mangoes. (b) Good morning! (c) Fun facts
  21. 21.🔁 How many times does this code print “Well done”?
    for (let i = 0; i <= 5; i++) {
      console.log("Well done");
    }
  22. 22.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) type the password (b) share it with friends (c) click it twice (d) close it, tell an adult
  23. 23.🎨 A CSS file usually ends with which extension? (a) .js (b) .css (c) .html (d) .png
  24. 24.⚡ Which JavaScript word runs code when true? (a) console.log() (b) alert() (c) if (d) let
  25. 25.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 250px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
  26. 26.💬 Which text will NOT show on the page?
    <p>Our school trip</p>
    <p>Good morning!</p>
    <!-- <p>The red kite</p> -->     (a) Good morning! (b) The red kite (c) Our school trip
  27. 27.🎯 How many elements on a page should have the same id? (a) 2 (b) any number (c) 5 (d) 1
  28. 28.🔗 What does target="_blank" do to a link? (a) opens it in a new tab (b) makes it blank (c) hides the link (d) makes it bold
  29. 29.🧭 Which semantic tag holds the main content? (a) <nav> (b) <footer> (c) <main> (d) <header>
  30. 30.🌈 In #e70000 the red part is the hex number e7. What is it as a normal number?
  31. 31.True or false: the browser asks for a web page. (a) False (b) True
  32. 32.🖼️ Which picture file does the browser load?
    <img src="tiger.jpg" alt="A tiger asleep" width="400">     (a) A tiger asleep (b) kite.png (c) map.png (d) tiger.jpg
  33. 33.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) red (c) black (d) green
  34. 34.📦 In the box model, which part is the text or picture? (a) margin (b) padding (c) border (d) content
  35. 35.True or false: <ul> lists things in any order. (a) False (b) True
  36. 36.True or false: <td> gives the table a title. (a) False (b) True
  37. 37.🔗 Which words do you click on?
    <a href="games.html">Maths fun</a>     (a) Art corner (b) games.html (c) Maths fun (d) href
  38. 38.🧩 Which language changes the page live? (a) CSS (b) HTML (c) JavaScript
  39. 39.🔠 How many headings are in this code?
    <h1>The red kite</h1>
    <p>My best friend</p>
    <p>My best friend</p>
    <p>My pets</p>
    <h4>Good morning!</h4>
  40. 40.🖼️ Which tag puts a picture on a page? (a) <a> (b) <p> (c) <img> (d) <pic>

Answer key

  1. color
  2. the gap round content
  3. dark grey on white
  4. <h6>
  5. No
  6. <a>
  7. <header>
  8. log out on shared PCs
  9. 10
  10. 146
  11. ;
  12. 2
  13. yellow
  14. checkbox
  15. </h3>
  16. 18
  17. color
  18. 16
  19. strong
  20. I love mangoes.
  21. 6
  22. close it, tell an adult
  23. .css
  24. if
  25. 10
  26. The red kite
  27. 1
  28. opens it in a new tab
  29. <main>
  30. 231
  31. True
  32. tiger.jpg
  33. red
  34. content
  35. True
  36. False
  37. Maths fun
  38. JavaScript
  39. 2
  40. <img>

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