Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 899 · 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.📦 In the box model, which part is the gap to other boxes? (a) border (b) padding (c) margin (d) content
2. 2.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 280px;
     padding: 15px;
     border: 1px solid black;
     margin: 5px;
   }
3. 3.🔁 Which loop repeats code a set number of times? (a) else (b) if (c) for (d) let
4. 4.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 80px;
     padding: 10px;
     border: 3px solid black;
     margin: 0px;
   }
5. 5.🏷️ Is <p> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
6. 6.🎯 Which element does the selector .star style? (a) <h2 class="note"> (b) <h1 class="star"> (c) <h1 id="star"> (d) <h1 class="menu">
7. 7.🔢 When you open a web page, which comes first: “you type the URL” or “the browser asks it”? (a) you type the URL (b) the browser asks it
8. 8.⚡ Which JavaScript word makes a new variable? (a) alert() (b) if (c) let (d) for
9. 9.🔍 One closing tag is missing. Which one?
   <p>My best friend</p>
   <strong>Good morning!</strong>
   <h1>Fun facts (a) </p> (b) </u> (c) </h1> (d) </strong>
10. 10.True or false: <header> holds one blog post. (a) True (b) False
11. 11.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-end (c) center (d) flex-start
12. 12.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the body (b) in the head
13. 13.⚖️ What colour is the text of this element?
    <h2 class="star" id="main">Hi</h2>
    CSS:
    .star { color: blue; }
    h2 { color: yellow; }
    #main { color: green; } (a) red (b) yellow (c) blue (d) green
14. 14.True or false: .note is a class selector. (a) False (b) True
15. 15.⚡ Which JavaScript word repeats code? (a) if (b) let (c) alert() (d) for
16. 16.🔠 How many <h1> headings should a page usually have? (a) 6 (b) 3 (c) 10 (d) 1
17. 17.💪 Which flexbox property lines boxes up across? (a) flex-direction (b) gap (c) justify-content (d) align-items
18. 18.💬 How many paragraphs show on the page?
    <p>My pets</p>
    <!-- <p>Good morning!</p> -->
    <!-- <p>Cricket is fun.</p> -->
    <!-- <p>My best friend</p> -->
19. 19.📄 Can HTML on its own make a form? (a) Yes (b) No
20. 20.🌈 Which colour is rgb(0, 255, 255)? (a) magenta (b) red (c) bright green (d) cyan
21. 21.♿ Does this help everyone, or make the page harder to use: colour as the only clue? (a) helps everyone (b) makes it harder
22. 22.📝 Does <title> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
23. 23.Which of these is true of <nav>? (a) holds one blog post (b) holds the menu of links (c) holds a side box of tips (d) holds the logo and title
24. 24.What does justify-content: center do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end
25. 25.🔠 Which heading shows the BIGGEST text: <h2>, <h3>, <h1> or <h5>? (a) <h1> (b) <h3> (c) <h2> (d) <h5>
26. 26.🏷️ What does a closing tag have that an opening tag does not? (a) a dot . (b) a hash # (c) a slash / (d) a dollar $
27. 27.🛡️ Online: is it safe to meet an online stranger? (a) safe (b) not safe
28. 28.🔠 How many headings are in this code?
    <h1>Fun facts</h1>
    <p>Cricket is fun.</p>
    <p>Our school trip</p>
    <h2>Fun facts</h2>
29. 29.What is <input type="email"> for? (a) is for one line of words (b) lets you tick many (c) is for an email address (d) sends the form
30. 30.🌍 What is the protocol in this URL?
    https://school.example.in/about.html (a) http (b) school.example.in (c) /about.html (d) https
31. 31.🚀 Which file should this code go in: <h1>My Site</h1> (a) index.html (b) style.css (c) script.js
32. 32.💬 Which text will NOT show on the page?
    <p>My best friend</p>
    <!-- <p>I love mangoes.</p> -->
    <p>My pets</p> (a) I love mangoes. (b) My pets (c) My best friend
33. 33.📝 How many paragraphs does this code make?
    <p>Hello, world!</p>
    <p>Hello, world!</p>
    <p>My best friend</p>
    <p>Fun facts</p>
    <h2>Hello, world!</h2>
34. 34.📊 How many rows does this table have?
    <table>
      <tr><td>Jamun</td><td>Mango</td></tr>
      <tr><td>Orange</td><td>Banana</td></tr>
    </table>
35. 35.What does font-size do? (a) colours behind the text (b) sets the letter colour (c) makes letters bigger (d) centres a heading
36. 36.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Papaya</td><td>Banana</td></tr>
      <tr><td>Jamun</td><td>Orange</td></tr>
      <tr><td>Jamun</td><td>Jamun</td></tr>
    </table>
37. 37.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h3> → <h3> (a) Yes (b) No
38. 38.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
39. 39.🔠 Which tag is the least important heading? (a) <h1> (b) <p> (c) <h6> (d) <h3>
40. 40.🔐 Is Chai$Cup_19x a strong or a weak password? (a) strong (b) weak

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