Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 267 · 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 of these is true of <main>? (a) holds the main content (b) sits at the bottom (c) sits at the very top (d) holds extra side notes
2. 2.📝 Which input type is for one line of words? (a) number (b) radio (c) email (d) text
3. 3.🌐 Which one turns HTML into a page? (a) a code editor (b) a web server (c) a web browser
4. 4.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 26px;
     }
   }
5. 5.True or false: “write clear link text” helps everyone use the page. (a) False (b) True
6. 6.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 18px;
     }
   } (a) No (b) Yes
7. 7.🔤 In “HTML”, what do the letters HT stand for? (a) Home Text (b) Hot Tags (c) HyperText (d) High Tech
8. 8.True or false: <input type="text"> lets you tick many. (a) True (b) False
9. 9.🔠 Are headings shown in bold by default? (a) Yes (b) No
10. 10.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 16px;
      }
    }
11. 11.📄 What is the first line of an HTML5 page? (a) <!DOCTYPE html> (b) <html> (c) <head> (d) <body>
12. 12.🔍 One closing tag is missing. Which one?
    <b>Good morning!</b>
    <h2>Rain today
    <strong>My pets</strong> (a) </h2> (b) </i> (c) </strong> (d) </b>
13. 13.🌍 Which one is the page’s address? (a) HTTPS (b) the server (c) the browser (d) the URL
14. 14.⚡ What does this code show?
    let name = "Aman";
    console.log("Hi, " + name + "!"); (a) Aman (b) Hi, name! (c) name (d) Hi, Aman!
15. 15.What does justify-content: flex-end do? (a) packs boxes at the end (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the start
16. 16.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) green (c) white (d) red
17. 17.⚡ What number does this code print?
    let a = 6;
    let b = 3;
    console.log(a * b);
18. 18.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-end (c) center (d) flex-start
19. 19.📋 Which list tag is one item of a list? (a) <ul> (b) <ol> (c) <li>
20. 20.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 11; i = i + 2) {
      console.log(i);
    }
21. 21.🔠 Which heading shows the BIGGEST text: <h6>, <h3>, <h1> or <h4>? (a) <h1> (b) <h4> (c) <h3> (d) <h6>
22. 22.🧭 How many <main> parts should a page have? (a) three (b) ten (c) one (d) none
23. 23.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Litchi</td><td>Banana</td><td>Mango</td><td>Papaya</td></tr>
      <tr><td>Litchi</td><td>Orange</td><td>Guava</td><td>Guava</td></tr>
    </table>
24. 24.📄 Where does <ul> go: in the head or in the body? (a) in the head (b) in the body
25. 25.True or false: “label every form box” makes the page harder to use. (a) True (b) False
26. 26.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 280px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
27. 27.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>Easy snacks</h1>
      <p>Here is my best one.</p>
    </body>
    </html> (a) Here is my best one. (b) index.html (c) Easy snacks (d) Class 7 Blog
28. 28.🚀 Which file should this code go in: .box { padding: 8px; } (a) script.js (b) index.html (c) style.css
29. 29.🔠 Which heading shows the SMALLEST text: <h4>, <h6>, <h1> or <h3>? (a) <h3> (b) <h6> (c) <h4> (d) <h1>
30. 30.✍️ Which sign ends each CSS declaration? (a) , (b) ; (c) . (d) :
31. 31.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="fruit"> Litchi
      <input type="radio" name="fruit"> Banana
      <input type="radio" name="fruit"> Guava
      <input type="radio" name="fruit"> Papaya
      <input type="radio" name="fruit"> Mango
    </form>
32. 32.🎯 Which CSS selector matches this element?
    <li class="note" id="end">Hello</li> (a) #hero (b) .big (c) .end (d) .note
33. 33.🔠 Which heading shows the BIGGEST text: <h6>, <h2>, <h3> or <h1>? (a) <h2> (b) <h3> (c) <h6> (d) <h1>
34. 34.🎯 Which element does the selector .box style? (a) <li class="box"> (b) <li class="star"> (c) <li id="box"> (d) <div class="menu">
35. 35.✍️ What value is given to text-align in this rule?
    .box {
      color: red;
      text-align: center;
    } (a) center (b) 10px (c) yellow (d) text-align
36. 36.🔍 One closing tag is missing. Which one?
    <b>Good morning!</b>
    <h2>Cricket is fun.
    <strong>My best friend</strong> (a) </h2> (b) </strong> (c) </b> (d) </i>
37. 37.🎯 Can many elements share the same class? (a) Yes (b) No
38. 38.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
39. 39.Which of these is an empty tag? (a) <h1> (b) <br> (c) <ul> (d) <p>
40. 40.📄 Where does the text of <title> appear? (a) in a big heading (b) on the browser tab (c) at the bottom (d) nowhere

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