← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 585 · 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 does <br> do? (a) makes text bold (b) makes a list (c) adds a picture (d) starts a new line
  2. 2.True or false: <b> is an empty tag. (a) False (b) True
  3. 3.📊 Which tag makes one table row? (a) <table> (b) <td> (c) <caption> (d) <tr>
  4. 4.⚖️ What colour is the text of this element?
    <h2 class="big" id="main">Hi</h2>
    CSS:
    #main { color: orange; }
    #main { color: blue; }     (a) white (b) purple (c) blue (d) orange
  5. 5.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) J (c) F (d) G
  6. 6.🌈 Which colour is #00ff00? (a) cyan (b) magenta (c) bright green (d) yellow
  7. 7.📝 Which tag gives a form box a name you can click? (a) <title> (b) <hr> (c) <label> (d) <h1>
  8. 8.🔁 How many times does this code print “Hello”?
    for (let i = 2; i < 9; i++) {
      console.log("Hello");
    }
  9. 9.📊 Which tag makes a heading cell? (a) <td> (b) <tr> (c) <caption> (d) <th>
  10. 10.🌍 What does a web address (URL) tell the browser? (a) your password (b) where the page is (c) how old you are (d) the page colour
  11. 11.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    .note { color: yellow; }
    .note { color: white; }     (a) orange (b) yellow (c) white (d) blue
  12. 12.🎨 Which tag holds CSS inside the head? (a) <css> (b) <body> (c) <script> (d) <style>
  13. 13.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the shorter one (c) the first one (d) neither
  14. 14.💬 How many paragraphs show on the page?
    <!-- <p>Hello, world!</p> -->
    <!-- <p>My pets</p> -->
    <p>Rain today</p>
  15. 15.Which of these is margin? (a) the gap round content (b) space outside the border (c) the text or picture (d) space inside the border
  16. 16.🖼️ Which attribute of <img> sets how tall it is? (a) alt (b) src (c) width (d) height
  17. 17.🔒 Is the connection to this address scrambled (encrypted)?
    https://school.example.in/art/gallery.html     (a) No (b) Yes
  18. 18.🌍 What is the path in this URL?
    https://www.example.net/games/chess.html     (a) www.example.net (b) /games/chess.html (c) /about.html (d) https
  19. 19.📝 On how many lines does the browser show this paragraph?
    <p>Rivers flow<br>Sky is blue</p>
  20. 20.🖼️ Which picture file does the browser load?
    <img src="cake.jpg" alt="Birthday cake" width="250">     (a) dog.jpg (b) Birthday cake (c) cake.jpg (d) moon.png
  21. 21.♿ What does good colour contrast mean? (a) only red text (b) no colours at all (c) text stands out clearly (d) many bright colours
  22. 22.🖼️ Which tag puts a picture on a page? (a) <img> (b) <a> (c) <pic> (d) <p>
  23. 23.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) flex-start (c) center (d) space-between
  24. 24.📝 Which input type hides what you type? (a) email (b) checkbox (c) radio (d) password
  25. 25.🌗 Is pink on red easy or hard to read? (a) hard to read (b) easy to read
  26. 26.🎯 Which CSS selector matches this element?
    <li class="note" id="intro">Hello</li>     (a) .big (b) div (c) #main (d) .note
  27. 27.🔢 To build and share your first web page, which comes LAST? (a) write the HTML (b) add CSS styles (c) plan what to show (d) publish it online
  28. 28.📊 Which tag makes one data cell? (a) <caption> (b) <table> (c) <td> (d) <tr>
  29. 29.True or false: .star is a class selector. (a) False (b) True
  30. 30.🏷️ What does a closing tag have that an opening tag does not? (a) a dollar $ (b) a hash # (c) a slash / (d) a dot .
  31. 31.🌗 Is yellow on black easy or hard to read? (a) easy to read (b) hard to read
  32. 32.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 50px wide (no margins).
  33. 33.🔠 How many headings are in this code?
    <h1>I love mangoes.</h1>
    <p>I love mangoes.</p>
    <h3>I love mangoes.</h3>
    <p>The red kite</p>
    <h2>My pets</h2>
  34. 34.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 180px;
      padding: 25px;
      border: 2px solid black;
      margin: 5px;
    }
  35. 35.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Riya’s Recipes</title>
    </head>
    <body>
      <h1>Planets</h1>
      <p>Thanks for visiting.</p>
    </body>
    </html>     (a) Thanks for visiting. (b) Planets (c) body (d) Riya’s Recipes
  36. 36.True or false: margin is the line round the box. (a) False (b) True
  37. 37.🌈 Which colour of light is strongest in rgb(30, 76, 167)? (a) blue (b) green (c) red
  38. 38.🖌️ How big is the text, in px?
    p {
      font-size: 16px;
      color: blue;
      background-color: red;
      text-align: left;
    }
  39. 39.✍️ CSS declarations go inside which brackets? (a) { } (b) < > (c) [ ] (d) ( )
  40. 40.🔁 How many times does this code print “Hi”?
    for (let i = 3; i <= 10; i++) {
      console.log("Hi");
    }

Answer key

  1. starts a new line
  2. False
  3. <tr>
  4. blue
  5. F
  6. bright green
  7. <label>
  8. 7
  9. <th>
  10. where the page is
  11. white
  12. <style>
  13. the later one
  14. 1
  15. space outside the border
  16. height
  17. Yes
  18. /games/chess.html
  19. 2
  20. cake.jpg
  21. text stands out clearly
  22. <img>
  23. flex-start
  24. password
  25. hard to read
  26. .note
  27. publish it online
  28. <td>
  29. True
  30. a slash /
  31. easy to read
  32. 50
  33. 3
  34. 244
  35. Planets
  36. False
  37. blue
  38. 16
  39. { }
  40. 8

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