Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 776 · 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 line round the box? (a) margin (b) border (c) padding (d) content
2. 2.💬 How many paragraphs show on the page?
   <p>Good morning!</p>
   <p>Fun facts</p>
   <p>The red kite</p>
   <!-- <p>Rain today</p> -->
   <p>I love mangoes.</p>
3. 3.🔗 Which tag makes a clickable link? (a) <p> (b) <img> (c) <link> (d) <a>
4. 4.📝 How many paragraphs does this code make?
   <p>Hello, world!</p>
   <h2>I love mangoes.</h2>
   <p>Hello, world!</p>
   <p>My pets</p>
5. 5.♿ A part of the page is under a <h1> heading. Which tag should its sub-heading use? (a) <h2> (b) <h3> (c) <h1> (d) <h6>
6. 6.🔠 Which heading shows the BIGGEST text: <h3>, <h4>, <h1> or <h5>? (a) <h4> (b) <h3> (c) <h1> (d) <h5>
7. 7.🌈 Which colour is rgb(255, 0, 255)? (a) yellow (b) magenta (c) black (d) bright green
8. 8.🖼️ The picture cannot load. Which text does the browser show instead?
   <img src="cake.jpg" alt="Birthday cake" width="150"> (a) cake.jpg (b) A happy dog (c) Birthday cake (d) width
9. 9.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 20px;
     }
   }
10. 10.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    }
11. 11.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
12. 12.Which of these is a closing tag? (a) <h1> (b) <li> (c) <title> (d) </body>
13. 13.📋 Does this list show bullets or numbers?
    <ol>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Guava</li>
    </ol> (a) numbers (b) bullets
14. 14.🔍 One closing tag is missing. Which one?
    <em>Hello, world!
    <b>Good morning!</b>
    <small>Fun facts</small> (a) </small> (b) </b> (c) </em> (d) </u>
15. 15.Which colour pair is hard to read? (a) dark grey on white (b) white on dark blue (c) black on white (d) blue on purple
16. 16.🖌️ How big is the text, in px?
    li {
      text-align: left;
      font-size: 12px;
      color: red;
      background-color: blue;
    }
17. 17.📝 Which tag holds a whole form? (a) <form> (b) <ol> (c) <input> (d) <table>
18. 18.📦 In the box model, which part is the gap round content? (a) padding (b) border (c) margin (d) content
19. 19.📝 Which input type is for one line of words? (a) number (b) text (c) radio (d) email
20. 20.🌈 Which colour is rgb(0, 0, 255)? (a) yellow (b) blue (c) red (d) white
21. 21.🌍 What is the protocol in this URL?
    https://learn.example.com/about.html (a) http (b) learn.example.com (c) https (d) /about.html
22. 22.📝 What does <p> make? (a) a picture (b) a table (c) a paragraph (d) a link
23. 23.🔠 Which heading shows the SMALLEST text: <h4>, <h6>, <h2> or <h1>? (a) <h2> (b) <h1> (c) <h4> (d) <h6>
24. 24.📊 How many rows does this table have?
    <table>
      <tr><td>Papaya</td><td>Orange</td></tr>
      <tr><td>Guava</td><td>Papaya</td></tr>
      <tr><td>Grapes</td><td>Banana</td></tr>
      <tr><td>Guava</td><td>Papaya</td></tr>
    </table>
25. 25.Which of these is a strong password? (a) password (b) riya2014 (c) Blue@Tiger_74 (d) 123456
26. 26.🔢 When you open a web page, which comes first: “DNS finds the server” or “the browser shows it”? (a) the browser shows it (b) DNS finds the server
27. 27.🚀 Which tag loads script.js into a page? (a) <js src="script.js"> (b) <script src="script.js"> (c) <a href="script.js"> (d) <link script.js>
28. 28.Which of these goes in the head? (a) <meta charset="utf-8"> (b) <img> (c) <h1> (d) <ul>
29. 29.🔁 How many times does this code print “Hello”?
    for (let i = 1; i < 7; i++) {
      console.log("Hello");
    }
30. 30.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 4 (c) 3 (d) 2
31. 31.🔠 How many <h1> headings should a page usually have? (a) 6 (b) 3 (c) 10 (d) 1
32. 32.🧩 Which language gives the page structure? (a) JavaScript (b) CSS (c) HTML
33. 33.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
34. 34.⚡ What does this code show?
    let name = "Aman";
    alert("Hello, " + name + "!"); (a) name (b) Aman (c) Hello, name! (d) Hello, Aman!
35. 35.♿ Does this help everyone, or make the page harder to use: link text “click here”? (a) helps everyone (b) makes it harder
36. 36.🔤 In “HTML”, what does the L stand for? (a) Line (b) Language (c) Link (d) Laptop
37. 37.True or false: HTML on its own can pick a random number. (a) False (b) True
38. 38.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) neither (d) the first one
39. 39.🔍 One closing tag is missing. Which one?
    <h3>My best friend</h3>
    <u>My pets
    <p>Cricket is fun.</p> (a) </p> (b) </u> (c) </h3> (d) </h2>
40. 40.True or false: margin is the gap to other boxes. (a) True (b) False

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