← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 310 · 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 tag makes a heading cell? (a) <tr> (b) <table> (c) <caption> (d) <th>
  2. 2.📝 What do we need to write HTML? (a) a microphone (b) a printer (c) a paintbrush (d) a plain text editor
  3. 3.What does font-weight do? (a) makes the text bold (b) sets the letter colour (c) makes letters bigger (d) colours behind the text
  4. 4.🧭 Which semantic tag holds the menu of links? (a) <nav> (b) <main> (c) <aside> (d) <footer>
  5. 5.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
  6. 6.🌈 Which hex code is magenta? (a) #ff00ff (b) #ff0000 (c) #ffffff (d) #0000ff
  7. 7.🖼️ Which tag puts a picture on a page? (a) <p> (b) <pic> (c) <img> (d) <a>
  8. 8.🧭 Is <span> semantic or not semantic? (a) semantic (b) not semantic
  9. 9.🔠 Which tag is the least important heading? (a) <p> (b) <h3> (c) <h6> (d) <h1>
  10. 10.True or false: <a href="a.html">Go</a> goes in script.js. (a) True (b) False
  11. 11.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 25px;
      border: 1px solid black;
      margin: 10px;
    }
  12. 12.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    .note { color: white; }
    .note { color: purple; }     (a) red (b) green (c) purple (d) white
  13. 13.📝 Does <b> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
  14. 14.🔁 What does this code print?
    let score = 18;
    if (score < 38) {
      console.log("You win");
    } else {
      console.log("Play again");
    }     (a) You win (b) Play again
  15. 15.Which of these is the content? (a) the text or picture (b) the line round the box (c) a solid or dotted edge (d) space outside the border
  16. 16.📊 Where do <td> cells go? (a) inside a <tr> (b) inside a <li> (c) inside the <head> (d) inside a <p>
  17. 17.🔁 Which loop repeats code a set number of times? (a) if (b) for (c) let (d) else
  18. 18.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
  19. 19.📝 What does a password box show instead of letters? (a) emojis (b) capital letters (c) numbers (d) dots
  20. 20.🌐 Which one shows line numbers? (a) a web browser (b) a code editor (c) a web server
  21. 21.True or false: in <img>, src tells which image to load. (a) True (b) False
  22. 22.Which of these is a strong password? (a) qwerty (b) Kite_Fl1es@Dawn (c) iloveyou (d) riya2014
  23. 23.True or false: HTML on its own can make a form. (a) False (b) True
  24. 24.⚖️ What colour is the text of this element?
    <h1 class="big" id="hero">Hi</h1>
    CSS:
    #hero { color: blue; }
    #hero { color: green; }     (a) blue (b) white (c) green (d) yellow
  25. 25.🔗 Which attribute holds the address of a link? (a) id (b) href (c) alt (d) src
  26. 26.True or false: <tr> makes one data cell. (a) False (b) True
  27. 27.Which colour pair is hard to read? (a) pink on red (b) yellow on black (c) white on dark blue (d) dark grey on white
  28. 28.🌗 Is pink on red easy or hard to read? (a) hard to read (b) easy to read
  29. 29.🖌️ Which CSS property sets the letter colour? (a) background-color (b) color (c) text-align (d) font-size
  30. 30.🧭 Is <header> semantic or not semantic? (a) not semantic (b) semantic
  31. 31.🖼️ Which picture file does the browser load?
    <img src="moon.png" alt="The full moon" width="400">     (a) fort.jpg (b) The full moon (c) bus.jpg (d) moon.png
  32. 32.🔢 To build and share your first web page, which comes first: “write the HTML” or “plan what to show”? (a) plan what to show (b) write the HTML
  33. 33.🎯 What kind of selector is .card? (a) a class selector (b) an element selector (c) an id selector
  34. 34.🖼️ How many pixels wide is the picture drawn?
    <img src="tiger.jpg" alt="A tiger asleep" width="250">
  35. 35.Which of these is not safe to do online? (a) log out on shared PCs (b) keep passwords secret (c) post your home address (d) check for https first
  36. 36.⚡ What does alert() show? (a) a picture (b) a pop-up box (c) a table (d) a new tab
  37. 37.⚡ Which JavaScript word makes a new variable? (a) for (b) let (c) alert() (d) if
  38. 38.🖌️ Which CSS property picks the font style? (a) color (b) font-family (c) font-weight (d) background-color
  39. 39.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
  40. 40.What is <input type="password"> for? (a) hides what you type (b) picks a day (c) lets you pick only one (d) is for one line of words

Answer key

  1. <th>
  2. a plain text editor
  3. makes the text bold
  4. <nav>
  5. 60
  6. #ff00ff
  7. <img>
  8. not semantic
  9. <h6>
  10. False
  11. 232
  12. purple
  13. has a closing tag
  14. You win
  15. the text or picture
  16. inside a <tr>
  17. for
  18. equal gaps, none at ends
  19. dots
  20. a code editor
  21. True
  22. Kite_Fl1es@Dawn
  23. True
  24. green
  25. href
  26. False
  27. pink on red
  28. hard to read
  29. color
  30. semantic
  31. moon.png
  32. plan what to show
  33. a class selector
  34. 250
  35. post your home address
  36. a pop-up box
  37. let
  38. font-family
  39. 12
  40. hides what you type

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