Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 795 · 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.🌍 What does a web address (URL) tell the browser? (a) the page colour (b) where the page is (c) your password (d) how old you are
2. 2.🔍 Which is the odd one out? (a) makes a link (b) changes the text size (c) makes headings and lists (d) puts a picture on a page
3. 3.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 130px;
     padding: 10px;
     border: 2px solid black;
     margin: 15px;
   }
4. 4.📋 Which list suits a shopping list in any order? (a) <ul> (b) <ol> (c) <br> (d) <hr>
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 140px;
     justify-content: center;
   }
   Inside are 2 boxes, each 50px wide (no margins).
6. 6.📝 Which tag holds a whole form? (a) <table> (b) <ol> (c) <form> (d) <input>
7. 7.🔁 Which word runs code only when something is true? (a) for (b) let (c) if (d) log
8. 8.🔁 What does this code print?
   let temp = 35;
   if (temp > 16) {
     console.log("Hot");
   } else {
     console.log("Cool");
   } (a) Cool (b) Hot
9. 9.🖼️ Which attribute of <img> is read by screen readers? (a) height (b) width (c) alt (d) src
10. 10.🚀 Which file should this code go in: score = score + 1; (a) index.html (b) script.js (c) style.css
11. 11.🔍 One closing tag is missing. Which one?
    <h2>Rain today
    <u>My pets</u>
    <em>Hello, world!</em> (a) </em> (b) </h2> (c) </u> (d) </p>
12. 12.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <h4>My best friend</h4>
    <h2>Good morning!</h2>
13. 13.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="tiger.jpg" alt="A tiger asleep" width="400"> (a) tiger.jpg (b) A tiger asleep (c) A red kite (d) width
14. 14.✍️ Which property is set to center in this rule?
    .box {
      background-color: yellow;
      width: 300px;
      font-weight: bold;
      text-align: center;
    } (a) text-align (b) margin (c) background-color (d) center
15. 15.📝 How many <input> tags are in this form?
    <form>
      <input type="checkbox">
      <input type="email">
      <input type="submit" value="Send">
    </form>
16. 16.📝 Which tag makes a drop-down list? (a) <ol> (b) <select> (c) <ul> (d) <li>
17. 17.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 9; i++) {
      total = total + 5;
    }
    console.log(total);
18. 18.True or false: <main> sits at the bottom. (a) True (b) False
19. 19.🚀 Which file is best for code that reacts to clicks? (a) index.html (b) notes.txt (c) script.js (d) style.css
20. 20.🖌️ What colour are the letters?
    h2 {
      color: white;
      text-align: left;
      background-color: yellow;
      font-size: 32px;
    } (a) white (b) red (c) yellow
21. 21.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 170px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 60px wide (no margins).
22. 22.📝 Does <meta> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
23. 23.🔍 Which is the odd one out? (a) colours code to help us (b) answers page requests (c) stores a website’s files (d) hosts websites online
24. 24.🏷️ Which is the closing tag for <h3>? (a) <\h3> (b) </h3> (c) <h3> (d) <h3/>
25. 25.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) red (c) black (d) green
26. 26.✍️ What is the selector in this CSS rule?
    .box {
      text-align: center;
      font-size: 20px;
    } (a) h2 (b) 20px (c) text-align (d) .box
27. 27.📋 Which list tag is an ordered list? (a) <ul> (b) <ol> (c) <li>
28. 28.Which of these is the border? (a) the line round the box (b) the gap round content (c) space outside the border (d) space inside the border
29. 29.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) : (d) color
30. 30.♿ Is this heading order correct (no level skipped)?
    <h1> → <h3> → <h2> → <h2> (a) Yes (b) No
31. 31.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
32. 32.🖼️ Which attribute of <img> sets how tall it is? (a) width (b) height (c) alt (d) src
33. 33.🌐 Which one has an address bar? (a) a web server (b) a code editor (c) a web browser
34. 34.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
35. 35.📝 What does <hr> draw? (a) a link (b) a line across the page (c) a picture (d) a table
36. 36.📄 Where does <ul> go: in the head or in the body? (a) in the head (b) in the body
37. 37.⚖️ What colour is the text of this element?
    <h1 class="star" id="intro">Hi</h1>
    CSS:
    #intro { color: blue; }
    #intro { color: black; } (a) blue (b) orange (c) green (d) black
38. 38.True or false: .note is a class selector. (a) False (b) True
39. 39.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) space-between (c) center (d) flex-end
40. 40.📋 How many items does this list show?
    <ol>
      <li>Mango</li>
      <li>Grapes</li>
    </ol>

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