Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 677 · 40 questions

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.

1. 1.Which of these is not safe to do online? (a) check for https first (b) tell a trusted adult (c) use a nickname in games (d) click prize links
2. 2.🌐 Which one colours code to help us? (a) a web server (b) a web browser (c) a code editor
3. 3.🔍 Which is the odd one out? (a) opens web pages for us (b) turns HTML into a page (c) shows pages from the web (d) answers page requests
4. 4.True or false: HTML makes a form box. (a) False (b) True
5. 5.💬 How does an HTML comment start? (a) // (b) # (c) /* (d) <!--
6. 6.True or false: <li> is one item of a list. (a) True (b) False
7. 7.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 320px;
     justify-content: center;
   }
   Inside are 2 boxes, each 80px wide (no margins).
8. 8.⚖️ What colour is the text of this element?
   <h1 class="big" id="end">Hi</h1>
   CSS:
   h1 { color: black; }
   h1 { color: yellow; } (a) black (b) yellow (c) red (d) blue
9. 9.📄 Where does <link rel="stylesheet"> go: in the head or in the body? (a) in the head (b) in the body
10. 10.Which of these is safe to do online? (a) post your home address (b) put secrets in comments (c) meet an online stranger (d) ask before downloading
11. 11.What does justify-content: center do? (a) packs boxes at the start (b) puts boxes in the middle (c) packs boxes at the end (d) equal gaps, none at ends
12. 12.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or wider (c) turned off (d) 600px or narrower
13. 13.🖼️ Which picture file does the browser load?
    <img src="bus.jpg" alt="Our school bus" width="150"> (a) tiger.jpg (b) bus.jpg (c) Our school bus (d) fort.jpg
14. 14.🔠 Which heading shows the BIGGEST text: <h1>, <h4>, <h6> or <h2>? (a) <h6> (b) <h2> (c) <h4> (d) <h1>
15. 15.♿ A part of the page is under a <h4> heading. Which tag should its sub-heading use? (a) <h2> (b) <h1> (c) <h3> (d) <h5>
16. 16.True or false: the border is space outside the border. (a) False (b) True
17. 17.Which of these is true of <nav>? (a) holds the menu of links (b) holds extra side notes (c) holds copyright notes (d) holds a news story
18. 18.🔗 Which words do you click on?
    <a href="maths.html">Play games</a> (a) maths.html (b) href (c) About us (d) Play games
19. 19.🔢 On a typical page, from top to bottom, which comes LAST? (a) <header> (b) <footer> (c) <main> (d) <nav>
20. 20.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 10px;
      border: 2px solid black;
      margin: 20px;
    }
21. 21.📋 Which list tag shows 1, 2, 3 numbers? (a) <li> (b) <ol> (c) <ul>
22. 22.True or false: <nav> helps you move around. (a) False (b) True
23. 23.🖌️ What colour are the letters?
    li {
      text-align: left;
      color: green;
      font-size: 16px;
      background-color: black;
    } (a) yellow (b) green (c) black
24. 24.🏷️ Every HTML tag starts with which sign? (a) [ (b) ( (c) < (d) {
25. 25.📝 How many <input> tags are in this form?
    <form>
      <input type="number">
      <input type="email">
      <input type="submit" value="Send">
    </form>
26. 26.🌈 Which colour is #ffff00? (a) bright green (b) red (c) yellow (d) black
27. 27.✍️ In color: blue; which part is the property? (a) : (b) ; (c) color (d) blue
28. 28.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    }
29. 29.🖼️ Does <img> need a closing tag? (a) Yes (b) No
30. 30.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) space-between (c) flex-start (d) center
31. 31.🔁 How many numbers does this code print?
    for (let i = 0; i < 16; i = i + 3) {
      console.log(i);
    }
32. 32.📝 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"> Green
      <input type="checkbox" name="colour"> Orange
      <input type="checkbox" name="colour"> Blue
    </form>
33. 33.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the br tag (d) the hr tag
34. 34.🛡️ Before typing a password on a site, check the address starts with ___. (a) www (b) ftp (c) https (d) http
35. 35.🎯 What kind of selector is .menu? (a) an element selector (b) an id selector (c) a class selector
36. 36.🛡️ Online: is it safe to keep passwords secret? (a) not safe (b) safe
37. 37.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
38. 38.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
39. 39.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Space Facts</title>
    </head>
    <body>
      <h1>Match report</h1>
      <p>We won by 5 runs.</p>
    </body>
    </html> (a) Match report (b) Space Facts (c) We won by 5 runs. (d) index.html
40. 40.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No

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