Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 910 · 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 attribute of <img> sets how tall it is? (a) height (b) alt (c) src (d) width
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 180px;
     justify-content: center;
   }
   Inside are 2 boxes, each 40px wide (no margins).
3. 3.📋 What number does the browser show next to “Mango”?
   <ol>
     <li>Grapes</li>
     <li>Guava</li>
     <li>Banana</li>
     <li>Mango</li>
   </ol>
4. 4.True or false: <aside> holds the logo and title. (a) True (b) False
5. 5.♿ Does this help everyone, or make the page harder to use: skipping heading levels? (a) helps everyone (b) makes it harder
6. 6.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 260px;
     justify-content: space-between;
   }
   Inside are 4 boxes, each 50px wide (no margins).
7. 7.True or false: to meet an online stranger is not safe. (a) True (b) False
8. 8.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) click it twice (b) close it, tell an adult (c) share it with friends (d) type the password
9. 9.What does justify-content: flex-start do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends
10. 10.🖌️ What colour are the letters?
    h1 {
      background-color: black;
      text-align: left;
      color: blue;
      font-size: 36px;
    } (a) black (b) orange (c) blue
11. 11.🔢 To build and share your first web page, which comes first: “test in a browser” or “plan what to show”? (a) plan what to show (b) test in a browser
12. 12.🖼️ Does <img> need a closing tag? (a) Yes (b) No
13. 13.🌈 Which colour is #00ffff? (a) red (b) cyan (c) white (d) blue
14. 14.📊 In a table, which tag is a row? (a) <td> (b) <th> (c) <tr> (d) <tb>
15. 15.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>Planets</h1>
      <p>Try this poha.</p>
    </body>
    </html> (a) Try this poha. (b) Planets (c) body (d) Class 7 Blog
16. 16.🔍 Which is the odd one out? (a) colours code to help us (b) is where we type code (c) saves our .html files (d) opens web pages for us
17. 17.🛡️ Online: is it safe to meet an online stranger? (a) safe (b) not safe
18. 18.🔤 In “HTML”, what does the M stand for? (a) Machine (b) Markup (c) Modern (d) Mouse
19. 19.📊 Are <th> cells shown bold and centred by default? (a) Yes (b) No
20. 20.🔢 When you open a web page, which comes FIRST? (a) the browser asks it (b) the browser shows it (c) you type the URL (d) DNS finds the server
21. 21.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    } (a) No (b) Yes
22. 22.🛡️ Online: is it safe to post your home address? (a) safe (b) not safe
23. 23.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    }
24. 24.Which of these goes in the body? (a) <meta charset="utf-8"> (b) <h1> (c) <title> (d) <style>
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      margin: 10px;
      width: 300px;
      font-size: 20px;
    }
26. 26.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the head (b) in the body
27. 27.🧩 An opening tag + content + a closing tag together make an ___. (a) attribute (b) editor (c) address (d) element
28. 28.🌈 Which colour is rgb(255, 0, 0)? (a) black (b) cyan (c) blue (d) red
29. 29.🎯 Which element does the selector span style? (a) <p> (b) <h1 class="box"> (c) <h2 id="logo"> (d) <span class="box">
30. 30.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 16px;
      }
    }
31. 31.Which of these is true of <main>? (a) holds a news story (b) holds a side box of tips (c) sits at the very top (d) is the page’s key part
32. 32.✍️ What value is given to background-color in this rule?
    .note {
      background-color: yellow;
      margin: 10px;
    } (a) 10px (b) background-color (c) 8px (d) yellow
33. 33.🔁 Which word runs code only when something is true? (a) for (b) let (c) if (d) log
34. 34.🌍 What finds the server for a domain name like example.com? (a) CSS (b) alt (c) HTML (d) DNS
35. 35.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    }
36. 36.True or false: JavaScript gives the page structure. (a) True (b) False
37. 37.♿ Does this help everyone, or make the page harder to use: link text “click here”? (a) makes it harder (b) helps everyone
38. 38.🌗 Is pink on red easy or hard to read? (a) hard to read (b) easy to read
39. 39.💬 How many paragraphs show on the page?
    <p>Our school trip</p>
    <p>My pets</p>
    <!-- <p>My best friend</p> -->
    <p>Fun facts</p>
    <p>Cricket is fun.</p>
40. 40.True or false: <ul> has a closing tag. (a) True (b) False

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