Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 846 · 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 picture cannot load. Which text does the browser show instead?
   <img src="moon.png" alt="The full moon" width="100"> (a) moon.png (b) Our school bus (c) The full moon (d) width
2. 2.True or false: <input type="password"> lets you tick many. (a) True (b) False
3. 3.📝 How many <input> tags are in this form?
   <form>
     <input type="number">
     <input type="email">
     <input type="date">
     <input type="text">
     <input type="password">
     <input type="submit" value="Send">
   </form>
4. 4.What does color do? (a) colours behind the text (b) makes letters bigger (c) picks the font style (d) sets the letter colour
5. 5.💬 How many paragraphs show on the page?
   <!-- <p>My best friend</p> -->
   <p>Cricket is fun.</p>
   <p>I love mangoes.</p>
6. 6.🎯 Which element does the selector #main style? (a) <h1 id="main"> (b) <h1 class="main"> (c) <h2 class="star"> (d) <h1 id="logo">
7. 7.📋 What number does the browser show next to “Orange”?
   <ol>
     <li>Grapes</li>
     <li>Orange</li>
     <li>Mango</li>
     <li>Papaya</li>
     <li>Litchi</li>
   </ol>
8. 8.What is <input type="radio"> for? (a) is for an email address (b) picks a day (c) lets you pick only one (d) lets you tick many
9. 9.📱 Responsive design means a page ___. (a) never changes (b) has no pictures (c) is only for laptops (d) fits every screen
10. 10.True or false: to check for https first is safe. (a) True (b) False
11. 11.True or false: margin is space outside the border. (a) True (b) False
12. 12.🌈 Which hex code is bright green? (a) #000000 (b) #ffffff (c) #00ff00 (d) #0000ff
13. 13.🌈 Which hex code is magenta? (a) #ffffff (b) #00ff00 (c) #ffff00 (d) #ff00ff
14. 14.🌈 Which colour is rgb(255, 0, 0)? (a) magenta (b) cyan (c) bright green (d) red
15. 15.🔍 Which is the odd one out? (a) lays out the page (b) adds space around boxes (c) changes the text size (d) counts down a timer
16. 16.🛡️ Online: is it safe to post your home address? (a) not safe (b) safe
17. 17.🔠 Which tag is used for the main title on a page? (a) <p> (b) <br> (c) <h6> (d) <h1>
18. 18.📝 Which tag makes a big box for many lines of text? (a) <br> (b) <input> (c) <textarea> (d) <p>
19. 19.True or false: HTTPS stores the site’s files. (a) False (b) True
20. 20.🖼️ Which picture file does the browser load?
    <img src="tiger.jpg" alt="A tiger asleep" width="350"> (a) map.png (b) kite.png (c) A tiger asleep (d) tiger.jpg
21. 21.🖌️ What colour are the letters?
    li {
      font-size: 12px;
      text-align: left;
      color: yellow;
      background-color: purple;
    } (a) yellow (b) blue (c) purple
22. 22.🔠 How many <h1> headings should a page usually have? (a) 3 (b) 10 (c) 1 (d) 6
23. 23.🔠 Which heading shows the BIGGEST text: <h5>, <h4>, <h2> or <h1>? (a) <h4> (b) <h5> (c) <h2> (d) <h1>
24. 24.🌈 Which colour of light is strongest in rgb(131, 59, 174)? (a) red (b) green (c) blue
25. 25.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) center (c) flex-start (d) space-between
26. 26.📊 How many cells does this table have in all?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Litchi</td><td>Jamun</td><td>Banana</td></tr>
      <tr><td>Litchi</td><td>Jamun</td><td>Mango</td></tr>
      <tr><td>Orange</td><td>Grapes</td><td>Grapes</td></tr>
    </table>
27. 27.📝 How many paragraphs does this code make?
    <p>Good morning!</p>
    <p>Fun facts</p>
    <p>My pets</p>
28. 28.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 20px;
      border: 4px solid black;
      margin: 5px;
    }
29. 29.True or false: to keep passwords secret is safe. (a) True (b) False
30. 30.True or false: #end is a class selector. (a) False (b) True
31. 31.⚖️ What colour is the text of this element?
    <h1 class="note" id="logo">Hi</h1>
    CSS:
    .note { color: white; }
    #logo { color: green; } (a) white (b) yellow (c) green (d) purple
32. 32.Which of these does JavaScript do? (a) makes a link (b) reacts to a button click (c) lays out the page (d) gives the page structure
33. 33.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
34. 34.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    #top { color: orange; }
    #top { color: yellow; } (a) blue (b) green (c) orange (d) yellow
35. 35.🔠 How many headings are in this code?
    <h1>My best friend</h1>
    <p>Good morning!</p>
    <h3>Good morning!</h3>
36. 36.🔗 Which words do you click on?
    <a href="about.html">Take the quiz</a> (a) Play games (b) Take the quiz (c) about.html (d) href
37. 37.📄 Where does <style> go: in the head or in the body? (a) in the body (b) in the head
38. 38.🌍 Which one scrambles data on its way? (a) HTTPS (b) the URL (c) the browser (d) the server
39. 39.📄 Can HTML on its own add pictures to a page? (a) Yes (b) No
40. 40.What is <input type="number"> for? (a) is for an email address (b) lets you tick many (c) takes only numbers (d) picks a day

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