Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 486 · 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.🌈 In #00c200 the green part is the hex number c2. What is it as a normal number?
2. 2.🔍 Which is the odd one out? (a) opens web pages for us (b) shows pages from the web (c) hosts websites online (d) has an address bar
3. 3.True or false: p { color: red; } goes in style.css. (a) False (b) True
4. 4.📄 What is the big heading shown on this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Riya’s Recipes</title>
   </head>
   <body>
     <h1>All about me</h1>
     <p>Thanks for visiting.</p>
   </body>
   </html> (a) All about me (b) Riya’s Recipes (c) Thanks for visiting. (d) body
5. 5.🖼️ Which attribute of <img> describes the picture? (a) height (b) src (c) alt (d) width
6. 6.⚖️ What colour is the text of this element?
   <h2 class="big" id="end">Hi</h2>
   CSS:
   h2 { color: purple; }
   .big { color: green; } (a) green (b) red (c) white (d) purple
7. 7.🌍 Which one stores the site’s files? (a) the browser (b) HTTPS (c) the URL (d) the server
8. 8.Which of these is an opening tag? (a) </b> (b) <h1> (c) </title> (d) </body>
9. 9.True or false: <main> holds the logo and title. (a) True (b) False
10. 10.True or false: JavaScript lays out the page. (a) False (b) True
11. 11.What is <input type="date"> for? (a) picks a day (b) sends the form (c) lets you pick only one (d) lets you tick many
12. 12.📊 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>Mango</td><td>Grapes</td></tr>
      <tr><td>Guava</td><td>Jamun</td><td>Jamun</td></tr>
      <tr><td>Orange</td><td>Guava</td><td>Orange</td></tr>
    </table>
13. 13.🌈 Which colour is #ff0000? (a) black (b) red (c) bright green (d) cyan
14. 14.True or false: a code editor opens web pages for us. (a) False (b) True
15. 15.📋 Does this list show bullets or numbers?
    <ol>
      <li>Jamun</li>
      <li>Orange</li>
    </ol> (a) bullets (b) numbers
16. 16.🔁 How many numbers does this code print?
    for (let i = 0; i < 9; i = i + 2) {
      console.log(i);
    }
17. 17.🔗 Which address opens when you click this link?
    <a href="contact.html">Maths fun</a> (a) contact.html (b) Maths fun (c) maths.html (d) https://example.com
18. 18.📄 Which part holds everything you see on the page? (a) the body (b) the head (c) the doctype (d) the title
19. 19.🏷️ What does a closing tag have that an opening tag does not? (a) a dot . (b) a dollar $ (c) a slash / (d) a hash #
20. 20.📛 In <a href="x.html">, what is href? (a) an attribute (b) a closing tag (c) an element name (d) a comment
21. 21.🔠 Which tag is the least important heading? (a) <h6> (b) <h1> (c) <p> (d) <h3>
22. 22.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) flex-start (d) center
23. 23.🖼️ How many pixels wide is the picture drawn?
    <img src="moon.png" alt="The full moon" width="250">
24. 24.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 17; i = i + 4) {
      console.log(i);
    }
25. 25.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) has no pictures (d) is only for laptops
26. 26.🖼️ Does <img> need a closing tag? (a) No (b) Yes
27. 27.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>Match report</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) Match report (b) index.html (c) Class 7 Blog (d) Mars is red.
28. 28.True or false: HTML on its own can make bullet lists. (a) False (b) True
29. 29.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 9; i++) {
      total = total + 3;
    }
    console.log(total);
30. 30.🔒 Is the connection to this address scrambled (encrypted)?
    http://kids.example.org/index.html (a) Yes (b) No
31. 31.⚡ Which JavaScript word shows a pop-up box? (a) for (b) let (c) console.log() (d) alert()
32. 32.🖼️ Which tag puts a picture on a page? (a) <p> (b) <a> (c) <img> (d) <pic>
33. 33.🧭 Why use <nav> instead of <div> for a menu? (a) it tells its meaning (b) it loads faster (c) it makes text red (d) it adds pictures
34. 34.🔗 Where does this link open?
    <a href="art.html">Contact us</a> (a) in a new tab (b) in the same tab
35. 35.📋 How many items does this list show?
    <ul>
      <li>Litchi</li>
      <li>Guava</li>
    </ul>
36. 36.🔠 Which heading shows the SMALLEST text: <h1>, <h2>, <h3> or <h5>? (a) <h3> (b) <h1> (c) <h2> (d) <h5>
37. 37.⚖️ What colour is the text of this element?
    <h2 class="menu" id="hero">Hi</h2>
    CSS:
    h2 { color: green; }
    .menu { color: black; }
    #hero { color: purple; } (a) green (b) black (c) purple (d) yellow
38. 38.🎯 Which CSS selector matches this element?
    <p class="red" id="main">Hello</p> (a) .main (b) p (c) #red (d) .box
39. 39.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }
40. 40.🔍 Which is the odd one out? (a) lays out the page (b) changes the text size (c) adds space around boxes (d) makes a link

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