Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 160 · 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 language reacts to a button click? (a) CSS (b) HTML (c) JavaScript
2. 2.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 18px;
     }
   } (a) No (b) Yes
3. 3.📝 Does <p> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
4. 4.True or false: “write clear link text” makes the page harder to use. (a) True (b) False
5. 5.🧭 Why use <nav> instead of <div> for a menu? (a) it loads faster (b) it tells its meaning (c) it makes text red (d) it adds pictures
6. 6.True or false: <header> holds the logo and title. (a) True (b) False
7. 7.🌈 Which colour is #ffff00? (a) yellow (b) blue (c) cyan (d) bright green
8. 8.📝 How many <input> tags are in this form?
   <form>
     <input type="text">
     <input type="checkbox">
     <input type="email">
     <input type="number">
     <input type="submit" value="Send">
   </form>
9. 9.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 8px;
     }
   }
10. 10.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>Match report</h1>
      <p>Thanks for visiting.</p>
    </body>
    </html> (a) index.html (b) Thanks for visiting. (c) My Hobbies (d) Match report
11. 11.📋 How many items does this list show?
    <ol>
      <li>Guava</li>
      <li>Mango</li>
      <li>Banana</li>
      <li>Litchi</li>
    </ol>
12. 12.🌈 In #000031 the blue part is the hex number 31. What is it as a normal number?
13. 13.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Jamun</td><td>Banana</td><td>Guava</td></tr>
      <tr><td>Mango</td><td>Jamun</td><td>Litchi</td></tr>
      <tr><td>Jamun</td><td>Mango</td><td>Banana</td></tr>
    </table>
14. 14.♿ Who uses a screen reader? (a) only coders (b) only robots (c) people who are blind (d) only teachers
15. 15.True or false: alert(score); goes in index.html. (a) False (b) True
16. 16.📝 What does <p> make? (a) a picture (b) a table (c) a link (d) a paragraph
17. 17.✍️ In color: blue; which part is the property? (a) color (b) : (c) ; (d) blue
18. 18.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
19. 19.✍️ Which property is set to 2px solid in this rule?
    h1 {
      padding: 8px;
      font-weight: bold;
      border: 2px solid;
      font-size: 20px;
    } (a) font-style (b) border (c) 2px solid (d) width
20. 20.🔗 Which tag makes a clickable link? (a) <a> (b) <img> (c) <link> (d) <p>
21. 21.What is <input type="text"> for? (a) is for an email address (b) lets you tick many (c) is for one line of words (d) lets you pick only one
22. 22.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
23. 23.🖌️ Where does the text sit on its line?
    h1 {
      text-align: center;
      font-size: 32px;
      background-color: green;
      color: black;
    } (a) on the right (b) in the middle (c) on the left
24. 24.⚡ Which word makes a new variable? (a) make (b) give (c) put (d) let
25. 25.⚡ Where does console.log() show its output? (a) on the printer (b) on the title bar (c) in the address bar (d) in the console
26. 26.Which of these has a closing tag? (a) <hr> (b) <img> (c) <br> (d) <b>
27. 27.True or false: <th> makes a heading cell. (a) False (b) True
28. 28.⚖️ What colour is the text of this element?
    <h2 class="note" id="main">Hi</h2>
    CSS:
    .note { color: blue; }
    .note { color: purple; } (a) white (b) purple (c) black (d) blue
29. 29.🔢 To build and share your first web page, what comes right after “add CSS styles”? (a) plan what to show (b) test in a browser (c) write the HTML (d) publish it online
30. 30.🔠 Which heading shows the SMALLEST text: <h2>, <h1>, <h3> or <h5>? (a) <h1> (b) <h3> (c) <h5> (d) <h2>
31. 31.🎯 What kind of selector is #end? (a) an element selector (b) a class selector (c) an id selector
32. 32.Which of these is true of a web server? (a) shows line numbers (b) stores a website’s files (c) saves our .html files (d) colours code to help us
33. 33.🏷️ HTML marks up text using ___. (a) pixels (b) wires (c) tags (d) keys
34. 34.🚀 Which file should this code go in: alert("Hi"); (a) index.html (b) style.css (c) script.js
35. 35.🎯 Can many elements share the same class? (a) No (b) Yes
36. 36.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Riya’s Recipes</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>Try this poha.</p>
    </body>
    </html> (a) Try this poha. (b) Riya’s Recipes (c) body (d) Welcome!
37. 37.🔍 Which line is missing its closing tag?
    line 1: <p>Our school trip
    line 2: <b>I love mangoes.</b>
    line 3: <em>Fun facts</em> (a) line 2 (b) line 3 (c) line 1
38. 38.✍️ Which property is set to 300px in this rule?
    body {
      width: 300px;
      margin: 10px;
      text-align: center;
    } (a) width (b) font-style (c) 300px (d) color
39. 39.True or false: <h1> goes in the body. (a) True (b) False
40. 40.True or false: .note is a class selector. (a) False (b) True

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