← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 24 · 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 justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) center (d) flex-end
  2. 2.🌍 Which one shows the page to you? (a) the server (b) the browser (c) the URL (d) HTTPS
  3. 3.🔠 Which heading shows the SMALLEST text: <h3>, <h4>, <h5> or <h6>? (a) <h6> (b) <h4> (c) <h5> (d) <h3>
  4. 4.🔗 Which words do you click on?
    <a href="contact.html">Art corner</a>
    (a) contact.html (b) School news (c) href (d) Art corner
  5. 5.📋 Which tag goes around each item of a list? (a) <p> (b) <li> (c) <ul> (d) <ol>
  6. 6.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
  7. 7.Which of these is a strong password? (a) password (b) Rain#Drop_42! (c) riya2014 (d) iloveyou
  8. 8.📋 Does this list show bullets or numbers?
    <ul>
      <li>Grapes</li>
      <li>Guava</li>
      <li>Mango</li>
    </ul>
    (a) bullets (b) numbers
  9. 9.⚖️ What colour is the text of this element?
    <h2 class="red" id="intro">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: yellow; }
    (a) yellow (b) orange (c) blue (d) white
  10. 10.🌍 What is the path in this URL?
    http://learn.example.com/about.html
    (a) learn.example.com (b) http (c) /about.html (d) /maths/tables.html
  11. 11.True or false: “write clear link text” makes the page harder to use. (a) True (b) False
  12. 12.🎯 Which element does the selector .big style? (a) <h1 id="big"> (b) <h1 class="red"> (c) <h2 class="box"> (d) <h1 class="big">
  13. 13.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or wider (c) turned off (d) 600px or narrower
  14. 14.🔠 How many headings are in this code?
    <h1>Good morning!</h1>
    <h2>My pets</h2>
    <p>I love mangoes.</p>
    <p>Hello, world!</p>
  15. 15.🖼️ Which picture file does the browser load?
    <img src="kite.png" alt="A red kite" width="250">
    (a) A red kite (b) map.png (c) kite.png (d) cake.jpg
  16. 16.💬 Why do coders write comments? (a) to show pictures (b) to add colour (c) to make links (d) to leave notes
  17. 17.🚀 Which file should this code go in: console.log(5 + 2); (a) style.css (b) index.html (c) script.js
  18. 18.🧩 Which language makes headings and lists? (a) CSS (b) HTML (c) JavaScript
  19. 19.Which of these goes in the body? (a) <h1> (b) <link rel="stylesheet"> (c) <meta charset="utf-8"> (d) <style>
  20. 20.True or false: <meta> has a closing tag. (a) True (b) False
  21. 21.🔍 Which is the odd one out? (a) is where we type code (b) hosts websites online (c) saves our .html files (d) colours code to help us
  22. 22.💬 How many paragraphs show on the page?
    <p>Hello, world!</p>
    <p>The red kite</p>
    <!-- <p>Fun facts</p> -->
  23. 23.True or false: the URL asks for a web page. (a) True (b) False
  24. 24.🔗 Which words do you click on?
    <a href="art.html">Art corner</a>
    (a) art.html (b) href (c) School news (d) Art corner
  25. 25.🔍 Which is the odd one out? (a) has an address bar (b) shows line numbers (c) shows pages from the web (d) turns HTML into a page
  26. 26.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
  27. 27.⚡ What number does this code print?
    let a = 39;
    let b = 31;
    console.log(a + b);
  28. 28.🌈 In #0000d2 the blue part is the hex number d2. What is it as a normal number?
  29. 29.📦 In the box model, which part is space outside the border? (a) content (b) padding (c) margin (d) border
  30. 30.🖼️ How many pixels wide is the picture drawn?
    <img src="dog.jpg" alt="A happy dog" width="100">
  31. 31.Which of these is true of <aside>? (a) sits at the very top (b) holds a news story (c) holds the main content (d) holds a side box of tips
  32. 32.🔍 Which is the odd one out? (a) changes the page live (b) makes a form box (c) puts a picture on a page (d) makes headings and lists
  33. 33.📄 Which part holds everything you see on the page? (a) the body (b) the doctype (c) the title (d) the head
  34. 34.True or false: alert(score); goes in index.html. (a) True (b) False
  35. 35.True or false: score = score + 1; goes in index.html. (a) True (b) False
  36. 36.📝 How many paragraphs does this code make?
    <p>Cricket is fun.</p>
    <p>My best friend</p>
    <p>Rain today</p>
    <p>Rain today</p>
    <h2>My best friend</h2>
  37. 37.True or false: CSS changes the text size. (a) True (b) False
  38. 38.🔐 Is Chai$Cup_19x a strong or a weak password? (a) strong (b) weak
  39. 39.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 20; i = i + 4) {
      console.log(i);
    }
  40. 40.🔍 Which line is missing its closing tag?
    line 1: <b>Fun facts</b>
    line 2: <u>I love mangoes.</u>
    line 3: <p>Good morning!
    (a) line 2 (b) line 3 (c) line 1

Answer key

  1. flex-end
  2. the browser
  3. <h6>
  4. Art corner
  5. <li>
  6. Yes
  7. Rain#Drop_42!
  8. bullets
  9. yellow
  10. /about.html
  11. False
  12. <h1 class="big">
  13. 600px or narrower
  14. 2
  15. kite.png
  16. to leave notes
  17. script.js
  18. HTML
  19. <h1>
  20. False
  21. hosts websites online
  22. 2
  23. False
  24. Art corner
  25. shows line numbers
  26. 70
  27. 70
  28. 210
  29. margin
  30. 100
  31. holds a side box of tips
  32. changes the page live
  33. the body
  34. False
  35. False
  36. 4
  37. True
  38. strong
  39. 16
  40. line 3

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