← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 355 · 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 tag helps phones show a page at the right size? (a) the br tag (b) the title tag (c) the viewport meta tag (d) the hr tag
  2. 2.📋 What number does the browser show next to “Orange”?
    <ol>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Litchi</li>
      <li>Jamun</li>
    </ol>
  3. 3.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) space-between (c) center (d) flex-start
  4. 4.What is <input type="password"> for? (a) lets you pick only one (b) takes only numbers (c) sends the form (d) hides what you type
  5. 5.True or false: a web browser stores a website’s files. (a) False (b) True
  6. 6.🔠 Which heading shows the BIGGEST text: <h3>, <h5>, <h6> or <h1>? (a) <h5> (b) <h1> (c) <h6> (d) <h3>
  7. 7.⚖️ What colour is the text of this element?
    <h2 class="star" id="end">Hi</h2>
    CSS:
    #end { color: purple; }
    #end { color: orange; }
    (a) black (b) orange (c) purple (d) blue
  8. 8.🌐 Which one turns HTML into a page? (a) a web browser (b) a web server (c) a code editor
  9. 9.True or false: <a href="a.html">Go</a> goes in script.js. (a) True (b) False
  10. 10.🔠 How many heading levels does HTML have? (a) 6 (b) 10 (c) 3 (d) 4
  11. 11.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 8px;
      }
    }
  12. 12.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is free (b) the site is fast (c) the data is scrambled (d) the site is a game
  13. 13.🎯 Which sign starts an id selector? (a) # (b) . (c) & (d) @
  14. 14.🏷️ Which is the closing tag for <h3>? (a) <h3> (b) <\h3> (c) <h3/> (d) </h3>
  15. 15.True or false: in <img>, src sets how wide it is. (a) False (b) True
  16. 16.True or false: <hr> has a closing tag. (a) True (b) False
  17. 17.🔠 Which heading shows the SMALLEST text: <h5>, <h4>, <h1> or <h2>? (a) <h4> (b) <h2> (c) <h1> (d) <h5>
  18. 18.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 90px;
      padding: 20px;
      border: 2px solid black;
      margin: 15px;
    }
  19. 19.True or false: .big is an element selector. (a) False (b) True
  20. 20.🌈 In #009d00 the green part is the hex number 9d. What is it as a normal number?
  21. 21.🔗 Where does this link open?
    <a href="news.html">Maths fun</a>
    (a) in the same tab (b) in a new tab
  22. 22.📝 On how many lines does the browser show this paragraph?
    <p>Kites fly high<br>Birds sing<br>Rivers flow</p>
  23. 23.🌍 What finds the server for a domain name like example.com? (a) alt (b) DNS (c) HTML (d) CSS
  24. 24.What does color do? (a) sets the letter colour (b) colours behind the text (c) makes the text bold (d) centres a heading
  25. 25.🔗 Which address opens when you click this link?
    <a href="games.html">Art corner</a>
    (a) contact.html (b) games.html (c) about.html (d) Art corner
  26. 26.🖌️ What colour are the letters?
    li {
      color: white;
      text-align: right;
      background-color: blue;
      font-size: 40px;
    }
    (a) white (b) blue (c) red
  27. 27.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 2 (c) 6 (d) 3
  28. 28.♿ Does this help everyone, or make the page harder to use: tiny grey text? (a) makes it harder (b) helps everyone
  29. 29.True or false: <th> makes a heading cell. (a) False (b) True
  30. 30.💬 Which text will NOT show on the page?
    <p>Fun facts</p>
    <p>Hello, world!</p>
    <!-- <p>I love mangoes.</p> -->
    (a) Fun facts (b) I love mangoes. (c) Hello, world!
  31. 31.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) space-between (c) flex-start (d) center
  32. 32.🌐 Which one colours code to help us? (a) a web browser (b) a web server (c) a code editor
  33. 33.⚡ What number does this code print?
    let runs = 23;
    runs = runs + 16;
    runs = runs - 22;
    console.log(runs);
  34. 34.🎯 Which CSS selector matches this element?
    <div class="menu" id="hero">Hello</div>
    (a) #menu (b) .hero (c) .menu (d) .note
  35. 35.🌍 What is the domain name in this URL?
    https://learn.example.com/index.html
    (a) www.example.com (b) https (c) learn.example.com (d) /index.html
  36. 36.🔢 In a basic web page file, which comes first: “<body>” or “<!DOCTYPE html>”? (a) <body> (b) <!DOCTYPE html>
  37. 37.📄 Where does <a> go: in the head or in the body? (a) in the body (b) in the head
  38. 38.📋 What number does the browser show next to “Jamun”?
    <ol start="3">
      <li>Papaya</li>
      <li>Jamun</li>
      <li>Mango</li>
      <li>Litchi</li>
    </ol>
  39. 39.🎯 Which element does the selector li style? (a) <p id="top"> (b) <span class="box"> (c) <li class="box"> (d) <div>
  40. 40.🌍 What is the domain name in this URL?
    https://learn.example.com/maths/tables.html
    (a) www.example.com (b) /maths/tables.html (c) learn.example.com (d) https

Answer key

  1. the viewport meta tag
  2. 2
  3. center
  4. hides what you type
  5. False
  6. <h1>
  7. orange
  8. a web browser
  9. False
  10. 6
  11. 12
  12. the data is scrambled
  13. #
  14. </h3>
  15. False
  16. False
  17. <h5>
  18. 164
  19. False
  20. 157
  21. in the same tab
  22. 3
  23. DNS
  24. sets the letter colour
  25. games.html
  26. white
  27. 3
  28. makes it harder
  29. True
  30. I love mangoes.
  31. space-between
  32. a code editor
  33. 17
  34. .menu
  35. learn.example.com
  36. <!DOCTYPE html>
  37. in the body
  38. 4
  39. <li class="box">
  40. learn.example.com

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