Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 468 · 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.📝 How many <input> tags are in this form?
   <form>
     <input type="password">
     <input type="text">
     <input type="submit" value="Send">
   </form>
2. 2.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) center (c) space-between (d) flex-start
3. 3.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
4. 4.♿ Does this help everyone, or make the page harder to use: add alt text to images? (a) makes it harder (b) helps everyone
5. 5.📝 What does a password box show instead of letters? (a) dots (b) emojis (c) capital letters (d) numbers
6. 6.📋 Which list tag shows bullet points? (a) <li> (b) <ul> (c) <ol>
7. 7.💾 A web page file usually ends with which extension? (a) .html (b) .txt (c) .mp3 (d) .png
8. 8.🔠 Which tag is the least important heading? (a) <h1> (b) <h6> (c) <p> (d) <h3>
9. 9.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) Z (c) G (d) F
10. 10.True or false: <li> lists steps in order. (a) True (b) False
11. 11.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-start (c) space-between (d) flex-end
12. 12.⚡ What number does this code print?
    let coins = 20;
    coins = coins + 6;
    coins = coins - 17;
    console.log(coins);
13. 13.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    }
14. 14.🧭 Which semantic tag holds one blog post? (a) <footer> (b) <aside> (c) <header> (d) <article>
15. 15.📋 Which list tag lists things in any order? (a) <ul> (b) <li> (c) <ol>
16. 16.🔍 One closing tag is missing. Which one?
    <strong>I love mangoes.
    <b>Our school trip</b>
    <small>Cricket is fun.</small> (a) </strong> (b) </b> (c) </small> (d) </u>
17. 17.🎯 Which sign starts an id selector? (a) & (b) # (c) . (d) @
18. 18.📝 What does <p> make? (a) a table (b) a paragraph (c) a picture (d) a link
19. 19.True or false: <li> shows bullet points. (a) False (b) True
20. 20.Which of these is an empty tag? (a) <li> (b) <title> (c) <meta> (d) <ul>
21. 21.⚖️ What colour is the text of this element?
    <h1 class="star" id="main">Hi</h1>
    CSS:
    .star { color: white; }
    .star { color: red; } (a) green (b) white (c) orange (d) red
22. 22.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
23. 23.✍️ Which sign goes between a property and its value? (a) - (b) ; (c) : (d) =
24. 24.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Jamun</td><td>Mango</td><td>Guava</td></tr>
      <tr><td>Grapes</td><td>Guava</td><td>Papaya</td></tr>
    </table>
25. 25.📝 How many paragraphs does this code make?
    <p>Hello, world!</p>
    <p>Rain today</p>
    <h2>I love mangoes.</h2>
    <h2>The red kite</h2>
    <h2>My pets</h2>
26. 26.📊 How many rows does this table have?
    <table>
      <tr><td>Guava</td><td>Orange</td><td>Orange</td></tr>
      <tr><td>Banana</td><td>Papaya</td><td>Guava</td></tr>
      <tr><td>Orange</td><td>Jamun</td><td>Jamun</td></tr>
    </table>
27. 27.🔁 What does this code print?
    let age = 12;
    if (age > 43) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
28. 28.🌈 Which colour is rgb(0, 255, 0)? (a) white (b) red (c) cyan (d) bright green
29. 29.📋 Does this list show bullets or numbers?
    <ul>
      <li>Papaya</li>
      <li>Litchi</li>
    </ul> (a) numbers (b) bullets
30. 30.📦 In the box model, which part is space inside the border? (a) padding (b) content (c) border (d) margin
31. 31.🔍 Which is the odd one out? (a) adds space around boxes (b) reacts to a button click (c) lays out the page (d) rounds box corners
32. 32.🔗 Which words do you click on?
    <a href="games.html">Play games</a> (a) href (b) About us (c) Play games (d) games.html
33. 33.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 7; i++) {
      total = total + i;
    }
    console.log(total);
34. 34.📄 Where does <a> go: in the head or in the body? (a) in the body (b) in the head
35. 35.📝 Does <p> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
36. 36.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    p { color: black; }
    .big { color: yellow; }
    #logo { color: white; } (a) black (b) purple (c) white (d) yellow
37. 37.Which of these is true of a web server? (a) colours code to help us (b) saves our .html files (c) hosts websites online (d) opens web pages for us
38. 38.🚀 Which file should this code go in: let score = 0; (a) style.css (b) script.js (c) index.html
39. 39.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>My drawings</h1>
      <p>Here is my best one.</p>
    </body>
    </html> (a) Class 7 Blog (b) body (c) Here is my best one. (d) My drawings
40. 40.⚡ Which tag holds JavaScript in a page? (a) <style> (b) <js> (c) <code> (d) <script>

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