← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 504 · 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.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="colour"> Red
      <input type="checkbox" name="colour"> Orange
      <input type="checkbox" name="colour"> Pink
      <input type="checkbox" name="colour"> Green
      <input type="checkbox" name="colour"> Blue
    </form>
  2. 2.⚡ What does this code print? (Look at the quotes!)
    let x = "5";
    let y = 6;
    console.log(x + y);     (a) 11 (b) Error (c) 56
  3. 3.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Litchi
      <input type="checkbox" name="fruit"> Guava
      <input type="checkbox" name="fruit"> Banana
      <input type="checkbox" name="fruit"> Papaya
      <input type="checkbox" name="fruit"> Mango
    </form>
  4. 4.True or false: “link text “click here”” helps everyone use the page. (a) True (b) False
  5. 5.Which of these does CSS do? (a) lays out the page (b) shows a pop-up message (c) makes a link (d) checks a quiz answer
  6. 6.True or false: #top is an id selector. (a) False (b) True
  7. 7.⚡ What does this code print? (Look at the quotes!)
    let x = "9";
    let y = 3;
    console.log(x + y);     (a) 12 (b) Error (c) 93
  8. 8.🌐 Which one is where we type code? (a) a code editor (b) a web server (c) a web browser
  9. 9.⚡ What does this code show?
    let name = "Kabir";
    console.log("Hi, " + name + "!");     (a) name (b) Kabir (c) Hi, name! (d) Hi, Kabir!
  10. 10.💬 Which text will NOT show on the page?
    <p>I love mangoes.</p>
    <!-- <p>Rain today</p> -->
    <p>My best friend</p>
    <p>Hello, world!</p>     (a) Hello, world! (b) My best friend (c) I love mangoes. (d) Rain today
  11. 11.📝 How many <input> tags are in this form?
    <form>
      <input type="password">
      <input type="number">
      <input type="text">
      <input type="email">
      <input type="checkbox">
      <input type="submit" value="Send">
    </form>
  12. 12.🔍 Which is the odd one out? (a) changes the text size (b) lays out the page (c) sets colours and fonts (d) makes a link
  13. 13.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 310px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 60px wide (no margins).
  14. 14.🚀 Which file should this code go in: <p>Hello!</p> (a) index.html (b) script.js (c) style.css
  15. 15.💬 Which text will NOT show on the page?
    <p>My pets</p>
    <p>Good morning!</p>
    <!-- <p>Hello, world!</p> -->     (a) Hello, world! (b) My pets (c) Good morning!
  16. 16.What does font-size do? (a) centres a heading (b) makes the text bold (c) makes letters bigger (d) picks the font style
  17. 17.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
  18. 18.🖼️ How many pixels wide is the picture drawn?
    <img src="map.png" alt="Map of India" width="200">
  19. 19.🔢 When you open a web page, which comes LAST? (a) the browser asks it (b) DNS finds the server (c) you type the URL (d) the browser shows it
  20. 20.🎨 A CSS file usually ends with which extension? (a) .css (b) .js (c) .html (d) .png
  21. 21.🌍 What does a web address (URL) tell the browser? (a) how old you are (b) the page colour (c) your password (d) where the page is
  22. 22.🖌️ What colour is behind the letters?
    li {
      text-align: left;
      background-color: black;
      font-size: 28px;
      color: red;
    }     (a) red (b) black (c) green
  23. 23.🔍 Which line is missing its closing tag?
    line 1: <em>My best friend</em>
    line 2: <u>My pets
    line 3: <h1>I love mangoes.</h1>     (a) line 1 (b) line 3 (c) line 2
  24. 24.🚀 Which file should this code go in: .box { padding: 8px; } (a) index.html (b) style.css (c) script.js
  25. 25.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Guava
      <input type="checkbox" name="fruit"> Banana
      <input type="checkbox" name="fruit"> Mango
      <input type="checkbox" name="fruit"> Papaya
    </form>
  26. 26.🔗 Where does this link open?
    <a href="maths.html">About us</a>     (a) in a new tab (b) in the same tab
  27. 27.🖼️ How many pixels wide is the picture drawn?
    <img src="moon.png" alt="The full moon" width="350">
  28. 28.⚡ Which JavaScript word shows a pop-up box? (a) for (b) let (c) alert() (d) if
  29. 29.True or false: #logo is a class selector. (a) False (b) True
  30. 30.📝 What does <br> do? (a) makes a list (b) starts a new line (c) adds a picture (d) makes text bold
  31. 31.🌈 Which colour is #00ff00? (a) cyan (b) magenta (c) yellow (d) bright green
  32. 32.🔍 One closing tag is missing. Which one?
    <b>The red kite</b>
    <p>Cricket is fun.
    <u>Hello, world!</u>     (a) </h2> (b) </b> (c) </p> (d) </u>
  33. 33.Which of these is true of a code editor? (a) shows pages from the web (b) shows line numbers (c) sends pages over the net (d) turns HTML into a page
  34. 34.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the shorter one (d) the later one
  35. 35.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 500px;
      justify-content: center;
    }
    Inside are 4 boxes, each 100px wide (no margins).
  36. 36.True or false: “write clear link text” makes the page harder to use. (a) True (b) False
  37. 37.✍️ Which property is set to yellow in this rule?
    p {
      border: 2px solid;
      color: red;
      font-weight: bold;
      background-color: yellow;
    }     (a) margin (b) yellow (c) padding (d) background-color
  38. 38.💬 How many paragraphs show on the page?
    <!-- <p>Good morning!</p> -->
    <p>Cricket is fun.</p>
    <!-- <p>Fun facts</p> -->
  39. 39.📊 How many cells does this table have in all?
    <table>
      <tr><td>Jamun</td><td>Papaya</td><td>Grapes</td><td>Banana</td></tr>
      <tr><td>Guava</td><td>Litchi</td><td>Banana</td><td>Orange</td></tr>
      <tr><td>Guava</td><td>Grapes</td><td>Orange</td><td>Orange</td></tr>
      <tr><td>Mango</td><td>Orange</td><td>Guava</td><td>Jamun</td></tr>
    </table>
  40. 40.🌍 What is the path in this URL?
    https://kids.example.org/index.html     (a) /art/gallery.html (b) https (c) /index.html (d) kids.example.org

Answer key

  1. 5
  2. 56
  3. 5
  4. False
  5. lays out the page
  6. True
  7. 93
  8. a code editor
  9. Hi, Kabir!
  10. Rain today
  11. 6
  12. makes a link
  13. 70
  14. index.html
  15. Hello, world!
  16. makes letters bigger
  17. 10
  18. 200
  19. the browser shows it
  20. .css
  21. where the page is
  22. black
  23. line 2
  24. style.css
  25. 4
  26. in the same tab
  27. 350
  28. alert()
  29. False
  30. starts a new line
  31. bright green
  32. </p>
  33. shows line numbers
  34. the later one
  35. 50
  36. False
  37. background-color
  38. 1
  39. 16
  40. /index.html

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