Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 143 · 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 sign starts a class selector? (a) . (b) & (c) @ (d) #
2. 2.🚀 Where in index.html does the link to style.css go? (a) inside a <p> (b) in the footer (c) after </html> (d) in the head
3. 3.🧩 Which language shows a pop-up message? (a) HTML (b) CSS (c) JavaScript
4. 4.🔗 Which address opens when you click this link?
   <a href="maths.html">About us</a> (a) art.html (b) news.html (c) About us (d) maths.html
5. 5.True or false: HTML on its own can add pictures to a page. (a) True (b) False
6. 6.🌍 What is the path in this URL?
   https://www.example.net/news/today.html (a) www.example.net (b) /news/today.html (c) https (d) /games/chess.html
7. 7.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 340px;
     justify-content: space-between;
   }
   Inside are 3 boxes, each 100px wide (no margins).
8. 8.🔡 Are HTML tag names usually written in small letters? (a) No (b) Yes
9. 9.Which of these goes in the head? (a) <style> (b) <table> (c) <ul> (d) <h1>
10. 10.✍️ Which property is set to 2px solid in this rule?
    body {
      border: 2px solid;
      font-weight: bold;
    } (a) width (b) 2px solid (c) border (d) font-style
11. 11.True or false: <article> sits at the bottom. (a) False (b) True
12. 12.🔠 Are headings shown in bold by default? (a) No (b) Yes
13. 13.🚀 Which file should this code go in: body { margin: 0; } (a) index.html (b) style.css (c) script.js
14. 14.🎯 Which CSS selector matches this element?
    <span class="star" id="intro">Hello</span> (a) #star (b) span (c) .menu (d) .intro
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 100px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
16. 16.♿ Which link text is clearest? (a) Read the fruit facts (b) link (c) click here (d) here
17. 17.🔁 Which word runs code only when something is true? (a) if (b) let (c) for (d) log
18. 18.Which colour pair is easy to read? (a) pink on red (b) light grey on white (c) yellow on white (d) black on white
19. 19.🔍 Which is the odd one out? (a) makes a link (b) sets colours and fonts (c) adds space around boxes (d) changes the text size
20. 20.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 5px;
      border: 5px solid black;
      margin: 5px;
    }
21. 21.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 25px;
      border: 3px solid black;
      margin: 20px;
    }
22. 22.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Banana</td><td>Litchi</td><td>Banana</td></tr>
      <tr><td>Papaya</td><td>Litchi</td><td>Litchi</td></tr>
    </table>
23. 23.🔍 Which line is missing its closing tag?
    line 1: <small>Hello, world!</small>
    line 2: <h2>Cricket is fun.</h2>
    line 3: <strong>Our school trip (a) line 3 (b) line 2 (c) line 1
24. 24.Which of these is true of a web server? (a) hosts websites online (b) has an address bar (c) opens web pages for us (d) turns HTML into a page
25. 25.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Litchi
      <input type="checkbox" name="fruit"> Mango
      <input type="checkbox" name="fruit"> Guava
      <input type="checkbox" name="fruit"> Banana
      <input type="checkbox" name="fruit"> Papaya
    </form>
26. 26.🔠 Which heading shows the BIGGEST text: <h1>, <h2>, <h3> or <h6>? (a) <h2> (b) <h1> (c) <h3> (d) <h6>
27. 27.✍️ What is the selector in this CSS rule?
    h2 {
      font-style: italic;
      width: 300px;
    } (a) h1 (b) 300px (c) font-style (d) h2
28. 28.True or false: a web browser answers page requests. (a) False (b) True
29. 29.🧩 An opening tag + content + a closing tag together make an ___. (a) editor (b) attribute (c) element (d) address
30. 30.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    }
31. 31.🚀 Which file should this code go in: <ul><li>Art</li></ul> (a) script.js (b) style.css (c) index.html
32. 32.📄 Can HTML on its own add pictures to a page? (a) No (b) Yes
33. 33.True or false: the content is space inside the border. (a) False (b) True
34. 34.📝 How many <input> tags are in this form?
    <form>
      <input type="password">
      <input type="number">
      <input type="date">
      <input type="email">
      <input type="submit" value="Send">
    </form>
35. 35.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 14px;
      }
    }
36. 36.⚖️ What colour is the text of this element?
    <h1 class="box" id="end">Hi</h1>
    CSS:
    h1 { color: yellow; }
    h1 { color: white; } (a) white (b) yellow (c) green (d) purple
37. 37.🎯 Which CSS selector matches this element?
    <span class="note" id="end">Hello</span> (a) .end (b) #note (c) #end (d) .big
38. 38.Which of these does JavaScript do? (a) makes a form box (b) makes a link (c) adds space around boxes (d) reacts to a button click
39. 39.📝 On how many lines does the browser show this paragraph?
    <p>Sky is blue<br>Stars shine<br>Kites fly high</p>
40. 40.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 30px;
      border: 1px solid black;
      margin: 5px;
    }

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