← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 834 · 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.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h2> → <h2>     (a) No (b) Yes
  2. 2.What does background-color do? (a) makes the text bold (b) colours behind the text (c) makes letters bigger (d) picks the font style
  3. 3.Which of these goes in the head? (a) <h1> (b) <meta charset="utf-8"> (c) <a> (d) <img>
  4. 4.🎯 What kind of selector is .big? (a) an element selector (b) a class selector (c) an id selector
  5. 5.⚡ Which word makes a new variable? (a) give (b) make (c) put (d) let
  6. 6.Which of these is safe to do online? (a) download from pop-ups (b) use a strong password (c) put secrets in comments (d) click prize links
  7. 7.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    }
  8. 8.⚡ What number does this code print?
    let marks = 22;
    marks = marks + 20;
    marks = marks - 36;
    console.log(marks);
  9. 9.✍️ Which property is set to bold in this rule?
    body {
      padding: 8px;
      font-weight: bold;
      width: 300px;
    }     (a) bold (b) border (c) width (d) font-weight
  10. 10.📝 Does <input> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
  11. 11.🖌️ Which CSS property sets the letter colour? (a) color (b) text-align (c) font-weight (d) font-family
  12. 12.⚖️ What colour is the text of this element?
    <h2 class="note" id="end">Hi</h2>
    CSS:
    h2 { color: black; }
    .note { color: blue; }     (a) purple (b) black (c) blue (d) green
  13. 13.True or false: the server sends the page back. (a) False (b) True
  14. 14.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 6; i = i + 4) {
      console.log(i);
    }
  15. 15.True or false: in <img>, alt sets how tall it is. (a) False (b) True
  16. 16.🔍 Which is the odd one out? (a) hosts websites online (b) shows line numbers (c) saves our .html files (d) colours code to help us
  17. 17.🌈 Which colour is rgb(255, 255, 0)? (a) blue (b) yellow (c) white (d) magenta
  18. 18.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 150px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }
  19. 19.What does font-family do? (a) makes the text bold (b) sets the letter colour (c) picks the font style (d) centres a heading
  20. 20.True or false: HTML on its own can run a game loop. (a) False (b) True
  21. 21.🌈 In #ab0000 the red part is the hex number ab. What is it as a normal number?
  22. 22.💬 How many paragraphs show on the page?
    <p>Rain today</p>
    <p>The red kite</p>
    <!-- <p>Our school trip</p> -->
    <!-- <p>I love mangoes.</p> -->
  23. 23.True or false: <li> goes inside ul or ol. (a) True (b) False
  24. 24.🔗 Which tag makes a clickable link? (a) <link> (b) <p> (c) <a> (d) <img>
  25. 25.🛡️ Online: is it safe to use a nickname in games? (a) safe (b) not safe
  26. 26.🖌️ What colour are the letters?
    p {
      text-align: left;
      background-color: orange;
      font-size: 40px;
      color: black;
    }     (a) orange (b) black (c) blue
  27. 27.✍️ What is the selector in this CSS rule?
    p {
      padding: 8px;
      font-style: italic;
      font-size: 20px;
    }     (a) padding (b) p (c) italic (d) .note
  28. 28.Which of these is margin? (a) the gap round content (b) the line round the box (c) a solid or dotted edge (d) space outside the border
  29. 29.💬 How many paragraphs show on the page?
    <!-- <p>Our school trip</p> -->
    <p>Fun facts</p>
    <p>Good morning!</p>
    <!-- <p>My best friend</p> -->
  30. 30.✍️ In color: blue; which part is the value? (a) color (b) : (c) ; (d) blue
  31. 31.🖼️ Which attribute of <img> is read by screen readers? (a) src (b) width (c) height (d) alt
  32. 32.🌈 Which colour is rgb(0, 0, 255)? (a) cyan (b) blue (c) black (d) yellow
  33. 33.♿ Is this heading order correct (no level skipped)?
    <h1> → <h1> → <h2> → <h3>     (a) No (b) Yes
  34. 34.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the viewport meta tag (c) the hr tag (d) the title tag
  35. 35.💪 Which flexbox property picks row or column? (a) flex-direction (b) gap (c) align-items (d) display: flex
  36. 36.🔁 What does i++ do? (a) doubles i (b) takes 1 from i (c) adds 1 to i (d) prints i
  37. 37.⚖️ What colour is the text of this element?
    <h2 class="big" id="intro">Hi</h2>
    CSS:
    .big { color: black; }
    #intro { color: orange; }     (a) green (b) black (c) yellow (d) orange
  38. 38.🎯 Which sign starts a class selector? (a) @ (b) & (c) . (d) #
  39. 39.🧭 Which semantic tag sits at the very top? (a) <article> (b) <footer> (c) <header> (d) <aside>
  40. 40.📄 Where does <p> go: in the head or in the body? (a) in the head (b) in the body

Answer key

  1. Yes
  2. colours behind the text
  3. <meta charset="utf-8">
  4. a class selector
  5. let
  6. use a strong password
  7. 16
  8. 6
  9. font-weight
  10. an empty tag
  11. color
  12. blue
  13. True
  14. 4
  15. False
  16. hosts websites online
  17. yellow
  18. 172
  19. picks the font style
  20. False
  21. 171
  22. 2
  23. True
  24. <a>
  25. safe
  26. black
  27. p
  28. space outside the border
  29. 2
  30. blue
  31. alt
  32. blue
  33. Yes
  34. the viewport meta tag
  35. flex-direction
  36. adds 1 to i
  37. orange
  38. .
  39. <header>
  40. in the body

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