Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 199 · 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 is the odd one out? (a) saves our .html files (b) colours code to help us (c) sends pages over the net (d) is where we type code
2. 2.🔁 Which loop repeats code a set number of times? (a) if (b) else (c) let (d) for
3. 3.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
4. 4.🔒 Is the connection to this address scrambled (encrypted)?
   http://www.example.net/news/today.html (a) Yes (b) No
5. 5.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 24px;
     }
   }
6. 6.📋 What number does the browser show next to “Papaya”?
   <ol start="2">
     <li>Jamun</li>
     <li>Orange</li>
     <li>Papaya</li>
     <li>Mango</li>
   </ol>
7. 7.✍️ Which property is set to italic in this rule?
   p {
     font-weight: bold;
     border: 2px solid;
     font-style: italic;
   } (a) italic (b) color (c) font-style (d) font-size
8. 8.True or false: a web server has an address bar. (a) True (b) False
9. 9.📊 How many rows does this table have?
   <table>
     <tr><th>Name</th><th>Fruit</th></tr>
     <tr><td>Banana</td><td>Jamun</td></tr>
     <tr><td>Banana</td><td>Litchi</td></tr>
   </table>
10. 10.🚀 Which file should this code go in: body { margin: 0; } (a) style.css (b) script.js (c) index.html
11. 11.🌈 Which hex code is white? (a) #0000ff (b) #ffffff (c) #ff0000 (d) #000000
12. 12.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-start (c) center (d) flex-end
13. 13.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
14. 14.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Mango</td><td>Jamun</td><td>Guava</td><td>Jamun</td></tr>
      <tr><td>Guava</td><td>Guava</td><td>Grapes</td><td>Banana</td></tr>
    </table>
15. 15.🌈 Which colour of light is strongest in rgb(168, 0, 122)? (a) green (b) blue (c) red
16. 16.⚡ What does this code show?
    let name = "Aman";
    alert("Welcome, " + name + "!"); (a) Aman (b) Welcome, Aman! (c) Welcome, name! (d) name
17. 17.📝 Which input type lets you pick only one? (a) checkbox (b) email (c) radio (d) password
18. 18.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
19. 19.📝 Which tag gives a form box a name you can click? (a) <title> (b) <hr> (c) <h1> (d) <label>
20. 20.🔠 Which tag is the least important heading? (a) <p> (b) <h1> (c) <h3> (d) <h6>
21. 21.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the later one (d) the shorter one
22. 22.📊 How many cells are in each row?
    <table>
      <tr><td>Jamun</td><td>Banana</td><td>Papaya</td><td>Papaya</td></tr>
      <tr><td>Litchi</td><td>Banana</td><td>Banana</td><td>Orange</td></tr>
    </table>
23. 23.✍️ CSS declarations go inside which brackets? (a) ( ) (b) { } (c) [ ] (d) < >
24. 24.📊 How many cells are in each row?
    <table>
      <tr><td>Orange</td><td>Mango</td><td>Jamun</td></tr>
      <tr><td>Guava</td><td>Guava</td><td>Banana</td></tr>
      <tr><td>Litchi</td><td>Orange</td><td>Guava</td></tr>
    </table>
25. 25.🎨 Which attribute adds CSS inside one tag? (a) alt (b) href (c) style (d) src
26. 26.📊 Which tag makes one data cell? (a) <td> (b) <tr> (c) <th> (d) <table>
27. 27.♿ Does this help everyone, or make the page harder to use: label every form box? (a) helps everyone (b) makes it harder
28. 28.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Space Facts</title>
    </head>
    <body>
      <h1>My drawings</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) Mars is red. (b) My drawings (c) index.html (d) Space Facts
29. 29.True or false: “link text “click here”” helps everyone use the page. (a) False (b) True
30. 30.🌗 Is dark grey on white easy or hard to read? (a) hard to read (b) easy to read
31. 31.🖼️ Which attribute of <img> names the picture file? (a) width (b) src (c) height (d) alt
32. 32.🚀 Which file should this code go in: <a href="a.html">Go</a> (a) index.html (b) script.js (c) style.css
33. 33.Which colour pair is easy to read? (a) yellow on white (b) yellow on black (c) blue on purple (d) light grey on white
34. 34.🔠 Which heading shows the BIGGEST text: <h4>, <h1>, <h6> or <h3>? (a) <h6> (b) <h3> (c) <h4> (d) <h1>
35. 35.🔠 Which heading shows the BIGGEST text: <h1>, <h3>, <h6> or <h2>? (a) <h3> (b) <h1> (c) <h6> (d) <h2>
36. 36.🎯 Which CSS selector matches this element?
    <h2 class="note" id="hero">Hello</h2> (a) .big (b) #note (c) h2 (d) li
37. 37.True or false: HTML rounds box corners. (a) False (b) True
38. 38.⚖️ What colour is the text of this element?
    <p class="menu" id="logo">Hi</p>
    CSS:
    #logo { color: yellow; }
    p { color: orange; } (a) yellow (b) green (c) red (d) orange
39. 39.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 25px;
      border: 4px solid black;
      margin: 5px;
    }
40. 40.🔢 To build and share your first web page, which comes first: “plan what to show” or “add CSS styles”? (a) add CSS styles (b) plan what to show

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