Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 354 · 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 colour pair is easy to read? (a) yellow on white (b) light grey on white (c) red on green (d) white on black
2. 2.📋 Which list tag is an ordered list? (a) <ol> (b) <ul> (c) <li>
3. 3.💬 Which text will NOT show on the page?
   <!-- <p>Our school trip</p> -->
   <p>I love mangoes.</p>
   <p>Good morning!</p> (a) I love mangoes. (b) Our school trip (c) Good morning!
4. 4.Which colour pair is hard to read? (a) yellow on black (b) yellow on white (c) black on white (d) dark grey on white
5. 5.📝 Which tag holds a whole form? (a) <ol> (b) <input> (c) <table> (d) <form>
6. 6.🎯 What kind of selector is #logo? (a) a class selector (b) an element selector (c) an id selector
7. 7.🏷️ Is </h1> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
8. 8.🖌️ Which CSS property centres a heading? (a) font-family (b) text-align (c) color (d) background-color
9. 9.♿ Is this heading order correct (no level skipped)?
   <h1> → <h2> → <h2> → <h2> (a) No (b) Yes
10. 10.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    }
11. 11.📄 Where does <link rel="stylesheet"> go: in the head or in the body? (a) in the body (b) in the head
12. 12.⚖️ What colour is the text of this element?
    <p class="note" id="hero">Hi</p>
    CSS:
    #hero { color: yellow; }
    #hero { color: red; } (a) red (b) black (c) yellow (d) white
13. 13.📝 Does <br> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
14. 14.True or false: <th> makes one table row. (a) False (b) True
15. 15.True or false: JavaScript gives the page structure. (a) True (b) False
16. 16.True or false: the browser shows the page to you. (a) False (b) True
17. 17.True or false: a web browser stores a website’s files. (a) False (b) True
18. 18.⚡ Which JavaScript word shows a pop-up box? (a) alert() (b) for (c) let (d) if
19. 19.🌐 Which one shows line numbers? (a) a code editor (b) a web server (c) a web browser
20. 20.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="dog.jpg" alt="A happy dog" width="300"> (a) dog.jpg (b) width (c) The full moon (d) A happy dog
21. 21.🔢 In a basic web page file, which comes first: “</html>” or “</head>”? (a) </head> (b) </html>
22. 22.🚀 Which file is best for the colours and fonts? (a) photo.jpg (b) script.js (c) style.css (d) index.html
23. 23.True or false: padding is space inside the border. (a) False (b) True
24. 24.🔁 When does the else part run? (a) when if is false (b) always (c) when if is true (d) never
25. 25.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 3 boxes, each 80px wide (no margins).
26. 26.🚀 Which file should this code go in: <h1>My Site</h1> (a) style.css (b) script.js (c) index.html
27. 27.🎯 Which CSS selector matches this element?
    <h2 class="star" id="intro">Hello</h2> (a) #main (b) .intro (c) .menu (d) #intro
28. 28.📝 What does <hr> draw? (a) a table (b) a picture (c) a link (d) a line across the page
29. 29.⚡ What does alert() show? (a) a new tab (b) a table (c) a picture (d) a pop-up box
30. 30.📊 How many cells does this table have in all?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Jamun</td><td>Papaya</td><td>Mango</td><td>Jamun</td></tr>
    </table>
31. 31.🌍 Which one is the page’s address? (a) HTTPS (b) the URL (c) the server (d) the browser
32. 32.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 270px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 100px wide (no margins).
33. 33.🔍 Which is the odd one out? (a) answers page requests (b) colours code to help us (c) is where we type code (d) shows line numbers
34. 34.🔠 Which heading shows the SMALLEST text: <h4>, <h1>, <h6> or <h3>? (a) <h6> (b) <h3> (c) <h4> (d) <h1>
35. 35.📝 On how many lines does the browser show this paragraph?
    <p>Sky is blue<br>Stars shine<br>Roses are red</p>
36. 36.True or false: “use big enough text” makes the page harder to use. (a) True (b) False
37. 37.🔍 Which line is missing its closing tag?
    line 1: <h1>Rain today</h1>
    line 2: <b>Hello, world!</b>
    line 3: <p>My pets (a) line 2 (b) line 1 (c) line 3
38. 38.💬 Which text will NOT show on the page?
    <p>I love mangoes.</p>
    <p>My pets</p>
    <!-- <p>Hello, world!</p> -->
    <p>Our school trip</p> (a) Hello, world! (b) Our school trip (c) I love mangoes. (d) My pets
39. 39.True or false: in <img>, src sets how wide it is. (a) False (b) True
40. 40.📋 Does this list show bullets or numbers?
    <ol>
      <li>Orange</li>
      <li>Mango</li>
    </ol> (a) bullets (b) numbers

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