← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 251 · 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 one is the page’s address? (a) the server (b) HTTPS (c) the browser (d) the URL
  2. 2.🖌️ What colour is behind the letters?
    h1 {
      font-size: 12px;
      color: green;
      text-align: right;
      background-color: red;
    }     (a) green (b) red (c) blue
  3. 3.🖌️ How big is the text, in px?
    h1 {
      font-size: 36px;
      background-color: red;
      text-align: left;
      color: white;
    }
  4. 4.💬 How many paragraphs show on the page?
    <!-- <p>My best friend</p> -->
    <p>Rain today</p>
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>My pets</p> -->
  5. 5.🖌️ Which CSS property makes letters bigger? (a) color (b) font-size (c) font-family (d) text-align
  6. 6.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 420px;
      justify-content: center;
    }
    Inside are 4 boxes, each 100px wide (no margins).
  7. 7.True or false: <input type="text"> lets you tick many. (a) True (b) False
  8. 8.Which of these does CSS do? (a) gives the page structure (b) changes the text size (c) reacts to a button click (d) counts down a timer
  9. 9.♿ Who uses a screen reader? (a) people who are blind (b) only teachers (c) only coders (d) only robots
  10. 10.🏷️ Is </p> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
  11. 11.🛡️ Online: is it safe to share your OTP? (a) not safe (b) safe
  12. 12.🔍 Which is the odd one out? (a) checks a quiz answer (b) changes the page live (c) counts down a timer (d) puts a picture on a page
  13. 13.🌈 Which colour is #000000? (a) black (b) blue (c) yellow (d) magenta
  14. 14.📊 How many cells are in each row?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Grapes</td><td>Orange</td><td>Jamun</td><td>Jamun</td></tr>
    </table>
  15. 15.📦 In the box model, which part is the gap round content? (a) content (b) margin (c) border (d) padding
  16. 16.Which of these is an opening tag? (a) </h1> (b) </title> (c) </li> (d) <h1>
  17. 17.Which of these is an empty tag? (a) <img> (b) <li> (c) <h1> (d) <title>
  18. 18.⚖️ What colour is the text of this element?
    <p class="star" id="end">Hi</p>
    CSS:
    p { color: green; }
    p { color: white; }     (a) green (b) white (c) orange (d) yellow
  19. 19.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    }
  20. 20.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) neither (c) the shorter one (d) the first one
  21. 21.🏷️ Which is the closing tag for <h1>? (a) </h1> (b) <\h1> (c) <h1/> (d) <h1>
  22. 22.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 280px;
      padding: 30px;
      border: 5px solid black;
      margin: 20px;
    }
  23. 23.🛡️ Online: is it safe to download from pop-ups? (a) not safe (b) safe
  24. 24.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
  25. 25.🌈 In #6d0000 the red part is the hex number 6d. What is it as a normal number?
  26. 26.📊 Which tag holds the whole table? (a) <caption> (b) <table> (c) <td> (d) <tr>
  27. 27.🖼️ Which attribute of <img> sets how wide it is? (a) src (b) alt (c) height (d) width
  28. 28.True or false: <a href="a.html">Go</a> goes in index.html. (a) False (b) True
  29. 29.💪 Which flexbox property turns on flexbox? (a) align-items (b) display: flex (c) gap (d) justify-content
  30. 30.🌈 Which colour is rgb(0, 255, 0)? (a) blue (b) red (c) bright green (d) black
  31. 31.True or false: “skipping heading levels” makes the page harder to use. (a) True (b) False
  32. 32.Which of these is a weak password? (a) Kite_Fl1es@Dawn (b) Blue@Tiger_74 (c) iloveyou (d) S0lar!Pen#8
  33. 33.Which of these is a weak password? (a) qwerty (b) Rain#Drop_42! (c) Blue@Tiger_74 (d) Kite_Fl1es@Dawn
  34. 34.🌍 Which one sends the page back? (a) the URL (b) the server (c) the browser (d) HTTPS
  35. 35.📄 Can HTML on its own make bullet lists? (a) No (b) Yes
  36. 36.📋 Which list tag is one item of a list? (a) <ul> (b) <ol> (c) <li>
  37. 37.⚖️ What colour is the text of this element?
    <p class="box" id="hero">Hi</p>
    CSS:
    .box { color: purple; }
    #hero { color: orange; }     (a) black (b) orange (c) purple (d) red
  38. 38.True or false: <meta charset="utf-8"> goes in the head. (a) True (b) False
  39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
  40. 40.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No

Answer key

  1. the URL
  2. red
  3. 36
  4. 1
  5. font-size
  6. 10
  7. False
  8. changes the text size
  9. people who are blind
  10. a closing tag
  11. not safe
  12. puts a picture on a page
  13. black
  14. 4
  15. padding
  16. <h1>
  17. <img>
  18. white
  19. 24
  20. the later one
  21. </h1>
  22. 350
  23. not safe
  24. 50
  25. 109
  26. <table>
  27. width
  28. True
  29. display: flex
  30. bright green
  31. True
  32. iloveyou
  33. qwerty
  34. the server
  35. Yes
  36. <li>
  37. orange
  38. True
  39. 80
  40. Yes

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