Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 758 · 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 CSS selector matches this element?
   <h1 class="big" id="logo">Hello</h1> (a) #end (b) .big (c) .red (d) #big
2. 2.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 190px;
     padding: 10px;
     border: 2px solid black;
     margin: 15px;
   }
3. 3.✍️ What value is given to font-weight in this rule?
   body {
     text-align: center;
     padding: 8px;
     color: red;
     font-weight: bold;
   } (a) font-weight (b) 2px solid (c) bold (d) 300px
4. 4.💬 Why do coders write comments? (a) to add colour (b) to make links (c) to leave notes (d) to show pictures
5. 5.🔢 To build and share your first web page, which comes LAST? (a) plan what to show (b) write the HTML (c) publish it online (d) add CSS styles
6. 6.🧭 Which semantic tag holds the menu of links? (a) <nav> (b) <header> (c) <main> (d) <article>
7. 7.🖼️ The picture cannot load. Which text does the browser show instead?
   <img src="map.png" alt="Map of India" width="350"> (a) map.png (b) Map of India (c) width (d) Birthday cake
8. 8.True or false: <input type="radio"> hides what you type. (a) True (b) False
9. 9.🌍 What is the path in this URL?
   https://www.example.net/art/gallery.html (a) /art/gallery.html (b) www.example.net (c) https (d) /news/today.html
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-style: italic;
      font-weight: bold;
      margin: 10px;
      width: 300px;
    }
11. 11.🔗 Which attribute holds the address of a link? (a) href (b) src (c) id (d) alt
12. 12.True or false: <img> goes in the head. (a) True (b) False
13. 13.What does font-size do? (a) picks the font style (b) makes the text bold (c) sets the letter colour (d) makes letters bigger
14. 14.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
15. 15.💬 How many paragraphs show on the page?
    <p>Good morning!</p>
    <!-- <p>Fun facts</p> -->
    <!-- <p>My best friend</p> -->
    <!-- <p>Cricket is fun.</p> -->
16. 16.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 7; i++) {
      total = total + 3;
    }
    console.log(total);
17. 17.🔠 Which heading shows the BIGGEST text: <h1>, <h2>, <h3> or <h4>? (a) <h1> (b) <h4> (c) <h3> (d) <h2>
18. 18.🖌️ Which CSS property makes letters bigger? (a) color (b) font-size (c) text-align (d) font-weight
19. 19.🔠 Which heading shows the SMALLEST text: <h1>, <h2>, <h6> or <h4>? (a) <h2> (b) <h6> (c) <h1> (d) <h4>
20. 20.🌍 Which one is the page’s address? (a) the server (b) the browser (c) HTTPS (d) the URL
21. 21.Which of these is an opening tag? (a) </li> (b) </b> (c) <b> (d) </h1>
22. 22.🔢 When you open a web page, which comes first: “the server sends files” or “the browser shows it”? (a) the server sends files (b) the browser shows it
23. 23.🔗 Which words do you click on?
    <a href="maths.html">About us</a> (a) maths.html (b) About us (c) href (d) Contact us
24. 24.True or false: #logo is a class selector. (a) True (b) False
25. 25.🔢 When you open a web page, which comes first: “the browser asks it” or “you type the URL”? (a) the browser asks it (b) you type the URL
26. 26.📄 Can HTML on its own make bullet lists? (a) Yes (b) No
27. 27.📊 How many rows does this table have?
    <table>
      <tr><td>Orange</td><td>Guava</td><td>Banana</td></tr>
      <tr><td>Orange</td><td>Orange</td><td>Papaya</td></tr>
      <tr><td>Banana</td><td>Mango</td><td>Banana</td></tr>
    </table>
28. 28.🛡️ Online: is it safe to share your password? (a) not safe (b) safe
29. 29.🔍 Which line is missing its closing tag?
    line 1: <strong>Good morning!</strong>
    line 2: <em>Rain today
    line 3: <i>My pets</i> (a) line 1 (b) line 3 (c) line 2
30. 30.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 230px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 50px wide (no margins).
31. 31.What is <input type="radio"> for? (a) lets you pick only one (b) sends the form (c) is for one line of words (d) is for an email address
32. 32.📄 Can HTML on its own make headings? (a) No (b) Yes
33. 33.📋 Which list tag lists things in any order? (a) <ol> (b) <li> (c) <ul>
34. 34.🔗 Where does this link open?
    <a href="art.html" target="_blank">Art corner</a> (a) in a new tab (b) in the same tab
35. 35.🖼️ Which picture file does the browser load?
    <img src="map.png" alt="Map of India" width="200"> (a) dog.jpg (b) cake.jpg (c) map.png (d) Map of India
36. 36.🔍 Which line is missing its closing tag?
    line 1: <i>My best friend</i>
    line 2: <p>I love mangoes.</p>
    line 3: <h2>Fun facts (a) line 1 (b) line 3 (c) line 2
37. 37.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 30px;
      border: 3px solid black;
      margin: 5px;
    }
38. 38.📋 Which tag goes around each item of a list? (a) <p> (b) <ol> (c) <li> (d) <ul>
39. 39.📋 Does this list show bullets or numbers?
    <ul>
      <li>Banana</li>
      <li>Papaya</li>
      <li>Jamun</li>
    </ul> (a) numbers (b) bullets
40. 40.📊 How many cells are in each row?
    <table>
      <tr><td>Guava</td><td>Litchi</td><td>Mango</td><td>Jamun</td></tr>
      <tr><td>Guava</td><td>Jamun</td><td>Grapes</td><td>Banana</td></tr>
      <tr><td>Banana</td><td>Papaya</td><td>Papaya</td><td>Papaya</td></tr>
      <tr><td>Grapes</td><td>Mango</td><td>Mango</td><td>Grapes</td></tr>
    </table>

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