← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 324 · 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 file should this code go in: <p>Hello!</p> (a) script.js (b) index.html (c) style.css
  2. 2.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
  3. 3.🔁 What does i++ do? (a) takes 1 from i (b) doubles i (c) prints i (d) adds 1 to i
  4. 4.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    }
  5. 5.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Riya’s Recipes</title>
    </head>
    <body>
      <h1>Match report</h1>
      <p>I like to read.</p>
    </body>
    </html>     (a) I like to read. (b) Riya’s Recipes (c) Match report (d) index.html
  6. 6.📝 What does a password box show instead of letters? (a) emojis (b) numbers (c) capital letters (d) dots
  7. 7.🔠 Which heading shows the SMALLEST text: <h5>, <h6>, <h3> or <h2>? (a) <h5> (b) <h3> (c) <h6> (d) <h2>
  8. 8.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="fruit"> Banana
      <input type="radio" name="fruit"> Papaya
      <input type="radio" name="fruit"> Mango
    </form>
  9. 9.💪 Which flexbox property picks row or column? (a) flex-direction (b) gap (c) justify-content (d) align-items
  10. 10.True or false: CSS makes a link. (a) True (b) False
  11. 11.True or false: #top is an id selector. (a) True (b) False
  12. 12.✍️ Which property is set to yellow in this rule?
    h2 {
      font-weight: bold;
      margin: 10px;
      background-color: yellow;
    }     (a) margin (b) yellow (c) padding (d) background-color
  13. 13.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
  14. 14.🔗 Which words do you click on?
    <a href="maths.html">School news</a>     (a) School news (b) href (c) Take the quiz (d) maths.html
  15. 15.🛡️ Online: is it safe to share your password? (a) not safe (b) safe
  16. 16.🔠 How many <h1> headings should a page usually have? (a) 1 (b) 6 (c) 3 (d) 10
  17. 17.🖌️ Which CSS property centres a heading? (a) background-color (b) font-family (c) text-align (d) color
  18. 18.⚡ Which JavaScript word repeats code? (a) alert() (b) console.log() (c) let (d) for
  19. 19.📝 Which input type is for one line of words? (a) number (b) submit (c) text (d) radio
  20. 20.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) blue (c) green (d) white
  21. 21.🖼️ Does <img> need a closing tag? (a) Yes (b) No
  22. 22.⚡ What number does this code print?
    let score = 8;
    score = score + 4;
    score = score - 3;
    console.log(score);
  23. 23.What does background-color do? (a) colours behind the text (b) makes letters bigger (c) picks the font style (d) sets the letter colour
  24. 24.📊 Which tag makes one table row? (a) <th> (b) <table> (c) <tr> (d) <caption>
  25. 25.What is <input type="text"> for? (a) is for an email address (b) lets you pick only one (c) sends the form (d) is for one line of words
  26. 26.True or false: in <img>, alt sets how tall it is. (a) True (b) False
  27. 27.🌗 Is light grey on white easy or hard to read? (a) easy to read (b) hard to read
  28. 28.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    .big { color: green; }
    .big { color: red; }     (a) yellow (b) green (c) red (d) purple
  29. 29.📄 Which part holds everything you see on the page? (a) the body (b) the title (c) the doctype (d) the head
  30. 30.🔍 Which line is missing its closing tag?
    line 1: <i>Rain today</i>
    line 2: <strong>I love mangoes.</strong>
    line 3: <h3>Hello, world!     (a) line 2 (b) line 1 (c) line 3
  31. 31.🧩 Which language checks a quiz answer? (a) CSS (b) JavaScript (c) HTML
  32. 32.✍️ In color: blue; which part is the property? (a) color (b) ; (c) blue (d) :
  33. 33.What does text-align do? (a) makes letters bigger (b) picks the font style (c) sets the letter colour (d) centres a heading
  34. 34.🖼️ Which tag puts a picture on a page? (a) <a> (b) <p> (c) <img> (d) <pic>
  35. 35.🌈 Which colour is #00ff00? (a) magenta (b) blue (c) black (d) bright green
  36. 36.✍️ How does a CSS comment start? (a) // (b) # (c) <!-- (d) /*
  37. 37.📝 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 a dot (d) as one space
  38. 38.🎯 Which CSS selector matches this element?
    <span class="star" id="logo">Hello</span>     (a) .logo (b) .menu (c) #star (d) #logo
  39. 39.🧩 Which language counts down a timer? (a) HTML (b) JavaScript (c) CSS
  40. 40.📝 Does <title> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag

Answer key

  1. index.html
  2. equal gaps, none at ends
  3. adds 1 to i
  4. 12
  5. Riya’s Recipes
  6. dots
  7. <h6>
  8. 1
  9. flex-direction
  10. False
  11. True
  12. background-color
  13. an element selector
  14. School news
  15. not safe
  16. 1
  17. text-align
  18. for
  19. text
  20. blue
  21. No
  22. 9
  23. colours behind the text
  24. <tr>
  25. is for one line of words
  26. False
  27. hard to read
  28. red
  29. the body
  30. line 3
  31. JavaScript
  32. color
  33. centres a heading
  34. <img>
  35. bright green
  36. /*
  37. as one space
  38. #logo
  39. JavaScript
  40. has a closing tag

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