Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 141 · 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.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 28px;
     }
   }
2. 2.⚡ A JavaScript file usually ends with which extension? (a) .css (b) .html (c) .js (d) .jpg
3. 3.📝 On how many lines does the browser show this paragraph?
   <p>Rivers flow<br>Birds sing<br>Stars shine<br>Roses are red</p>
4. 4.🔒 What does the lock (HTTPS) in the address bar mean? (a) the data is scrambled (b) the site is fast (c) the site is a game (d) the site is free
5. 5.🌍 What is the domain name in this URL?
   https://www.example.com/about.html (a) https (b) /about.html (c) www.example.com (d) kids.example.org
6. 6.🔠 Are headings shown in bold by default? (a) Yes (b) No
7. 7.📝 Does <input> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
8. 8.📊 How many cells does this table have in all?
   <table>
     <tr><td>Mango</td><td>Guava</td><td>Grapes</td></tr>
     <tr><td>Papaya</td><td>Grapes</td><td>Guava</td></tr>
     <tr><td>Papaya</td><td>Jamun</td><td>Jamun</td></tr>
   </table>
9. 9.📦 In the box model, which part is space inside the border? (a) border (b) content (c) margin (d) padding
10. 10.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="50"> (a) tiger.jpg (b) kite.png (c) fort.jpg (d) An old fort
11. 11.Which of these is margin? (a) the text or picture (b) a solid or dotted edge (c) space inside the border (d) space outside the border
12. 12.🖼️ Which attribute of <img> tells which image to load? (a) height (b) width (c) src (d) alt
13. 13.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
14. 14.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the shorter one (d) the later one
15. 15.🎯 What kind of selector is #main? (a) an element selector (b) an id selector (c) a class selector
16. 16.💬 Which text will NOT show on the page?
    <!-- <p>Hello, world!</p> -->
    <p>Good morning!</p>
    <p>Rain today</p> (a) Rain today (b) Good morning! (c) Hello, world!
17. 17.True or false: <input type="number"> takes only numbers. (a) False (b) True
18. 18.Which of these is padding? (a) the line round the box (b) the gap round content (c) space outside the border (d) the text or picture
19. 19.What does font-family do? (a) centres a heading (b) sets the letter colour (c) makes the text bold (d) picks the font style
20. 20.🔗 Where does this link open?
    <a href="maths.html">Maths fun</a> (a) in the same tab (b) in a new tab
21. 21.📦 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: 5px;
      border: 1px solid black;
      margin: 0px;
    }
22. 22.📋 How many items does this list show?
    <ul>
      <li>Guava</li>
      <li>Papaya</li>
      <li>Grapes</li>
      <li>Jamun</li>
      <li>Orange</li>
      <li>Litchi</li>
    </ul>
23. 23.🌈 In #610000 the red part is the hex number 61. What is it as a normal number?
24. 24.🔍 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) shows line numbers
25. 25.True or false: the border is the text or picture. (a) True (b) False
26. 26.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 140px;
      padding: 5px;
      border: 5px solid black;
      margin: 20px;
    }
27. 27.💬 Which text will NOT show on the page?
    <p>Good morning!</p>
    <p>Our school trip</p>
    <!-- <p>Fun facts</p> --> (a) Good morning! (b) Fun facts (c) Our school trip
28. 28.🖼️ Why do we add alt text to an image? (a) to make it bigger (b) to load it faster (c) to describe the image (d) to colour it
29. 29.⚖️ What colour is the text of this element?
    <h1 class="box" id="hero">Hi</h1>
    CSS:
    h1 { color: green; }
    h1 { color: white; } (a) red (b) white (c) blue (d) green
30. 30.What is <input type="radio"> for? (a) lets you tick many (b) lets you pick only one (c) is for one line of words (d) picks a day
31. 31.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 3; i++) {
      total = total + 9;
    }
    console.log(total);
32. 32.True or false: in <img>, height shows if the image fails. (a) True (b) False
33. 33.🔠 Which tag is used for the main title on a page? (a) <h1> (b) <br> (c) <h6> (d) <p>
34. 34.🖼️ Which picture file does the browser load?
    <img src="tiger.jpg" alt="A tiger asleep" width="350"> (a) map.png (b) A tiger asleep (c) kite.png (d) tiger.jpg
35. 35.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
36. 36.🧭 Is <main> semantic or not semantic? (a) not semantic (b) semantic
37. 37.📋 How many items does this list show?
    <ul>
      <li>Papaya</li>
      <li>Guava</li>
      <li>Orange</li>
      <li>Grapes</li>
      <li>Mango</li>
    </ul>
38. 38.💪 Which justify-content value packs boxes at the end? (a) center (b) space-between (c) flex-start (d) flex-end
39. 39.📦 In the box model, which part is space outside the border? (a) margin (b) content (c) border (d) padding
40. 40.🖌️ What colour are the letters?
    h1 {
      text-align: left;
      color: green;
      background-color: white;
      font-size: 32px;
    } (a) white (b) yellow (c) green

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