Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 266 · 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.⚖️ What colour is the text of this element?
   <h1 class="red" id="main">Hi</h1>
   CSS:
   #main { color: blue; }
   #main { color: yellow; } (a) blue (b) green (c) yellow (d) orange
2. 2.📦 In the box model, which part is the text or picture? (a) padding (b) margin (c) content (d) border
3. 3.🖌️ Which CSS property makes the text bold? (a) font-weight (b) font-size (c) color (d) font-family
4. 4.🎯 Which sign starts an id selector? (a) # (b) @ (c) . (d) &
5. 5.🏷️ Which is the closing tag for <b>? (a) <b> (b) <\b> (c) </b> (d) <b/>
6. 6.💬 Which text will NOT show on the page?
   <p>I love mangoes.</p>
   <!-- <p>Fun facts</p> -->
   <p>My best friend</p> (a) Fun facts (b) My best friend (c) I love mangoes.
7. 7.📱 Responsive design means a page ___. (a) fits every screen (b) is only for laptops (c) has no pictures (d) never changes
8. 8.True or false: <article> holds a news story. (a) True (b) False
9. 9.📊 Which tag makes a heading cell? (a) <caption> (b) <tr> (c) <table> (d) <th>
10. 10.What does justify-content: center do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
11. 11.🧭 Who is helped most by semantic tags? (a) only the server (b) nobody (c) only the printer (d) screen-reader users
12. 12.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 410px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
13. 13.Which of these is true of <header>? (a) holds the logo and title (b) helps you move around (c) holds copyright notes (d) holds the main content
14. 14.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
15. 15.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
16. 16.True or false: <input type="checkbox"> lets you tick many. (a) False (b) True
17. 17.🔒 Is the connection to this address scrambled (encrypted)?
    https://www.example.net/about.html (a) Yes (b) No
18. 18.🖌️ Where does the text sit on its line?
    li {
      text-align: right;
      background-color: red;
      font-size: 32px;
      color: black;
    } (a) in the middle (b) on the left (c) on the right
19. 19.📝 Does <img> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
20. 20.🚀 Which file should this code go in: score = score + 1; (a) index.html (b) style.css (c) script.js
21. 21.📊 Which tag gives the table a title? (a) <tr> (b) <caption> (c) <th> (d) <table>
22. 22.🔠 Which heading shows the BIGGEST text: <h2>, <h4>, <h3> or <h6>? (a) <h2> (b) <h6> (c) <h4> (d) <h3>
23. 23.🌗 Is dark grey on white easy or hard to read? (a) hard to read (b) easy to read
24. 24.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
25. 25.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
26. 26.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) type the password (b) share it with friends (c) close it, tell an adult (d) click it twice
27. 27.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) align-items (c) flex-direction (d) gap
28. 28.📊 How many cells are in each row?
    <table>
      <tr><td>Papaya</td><td>Grapes</td><td>Guava</td></tr>
      <tr><td>Jamun</td><td>Jamun</td><td>Litchi</td></tr>
      <tr><td>Mango</td><td>Papaya</td><td>Litchi</td></tr>
    </table>
29. 29.⚖️ What colour is the text of this element?
    <h2 class="red" id="end">Hi</h2>
    CSS:
    #end { color: orange; }
    #end { color: red; } (a) yellow (b) green (c) red (d) orange
30. 30.What does color do? (a) colours behind the text (b) centres a heading (c) picks the font style (d) sets the letter colour
31. 31.📄 Can HTML on its own make headings? (a) No (b) Yes
32. 32.🎨 A CSS file usually ends with which extension? (a) .js (b) .png (c) .html (d) .css
33. 33.💬 How many paragraphs show on the page?
    <p>Hello, world!</p>
    <!-- <p>Fun facts</p> -->
    <!-- <p>My pets</p> -->
34. 34.🔗 Which address opens when you click this link?
    <a href="maths.html">Visit the site</a> (a) Visit the site (b) news.html (c) art.html (d) maths.html
35. 35.🔢 To build and share your first web page, what comes right after “write the HTML”? (a) test in a browser (b) plan what to show (c) publish it online (d) add CSS styles
36. 36.♿ A part of the page is under a <h4> heading. Which tag should its sub-heading use? (a) <h4> (b) <h6> (c) <h3> (d) <h5>
37. 37.💬 Does the browser show comments on the page? (a) No (b) Yes
38. 38.Which of these is an opening tag? (a) </b> (b) </h1> (c) </title> (d) <h1>
39. 39.🌍 Which one sends the page back? (a) the browser (b) HTTPS (c) the URL (d) the server
40. 40.📄 Where does the text of <title> appear? (a) in a big heading (b) on the browser tab (c) nowhere (d) at the bottom

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