Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 165 · 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.True or false: “use headings in order” makes the page harder to use. (a) True (b) False
2. 2.True or false: <table> holds the whole table. (a) False (b) True
3. 3.🔐 Is Kite_Fl1es@Dawn a strong or a weak password? (a) strong (b) weak
4. 4.🧩 Which language reacts to a button click? (a) CSS (b) JavaScript (c) HTML
5. 5.🔍 Which is the odd one out? (a) makes headings and lists (b) makes a link (c) makes a form box (d) reacts to a button click
6. 6.🔢 In a basic web page file, which comes first: “</head>” or “</body>”? (a) </head> (b) </body>
7. 7.📄 Where does <table> go: in the head or in the body? (a) in the body (b) in the head
8. 8.🖌️ How big is the text, in px?
   li {
     color: orange;
     font-size: 24px;
     background-color: black;
     text-align: left;
   }
9. 9.🔢 In a basic web page file, which comes first: “<head>” or “</html>”? (a) <head> (b) </html>
10. 10.📝 Which input type picks a day? (a) date (b) password (c) email (d) text
11. 11.🔗 Which words do you click on?
    <a href="art.html">Art corner</a> (a) Art corner (b) href (c) art.html (d) School news
12. 12.🔐 Is qwerty a strong or a weak password? (a) weak (b) strong
13. 13.🔁 What does this code print?
    let marks = 4;
    if (marks >= 10) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Pass (b) Try again
14. 14.Which of these is an empty tag? (a) <li> (b) <title> (c) <hr> (d) <p>
15. 15.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 360px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 60px wide (no margins).
16. 16.Which of these is a closing tag? (a) </body> (b) <title> (c) <h1> (d) <b>
17. 17.🖌️ Which CSS property colours behind the text? (a) text-align (b) background-color (c) font-family (d) font-weight
18. 18.📝 How many paragraphs does this code make?
    <p>Cricket is fun.</p>
    <p>Hello, world!</p>
    <p>Good morning!</p>
    <p>Hello, world!</p>
    <h2>Our school trip</h2>
19. 19.⚡ What does this code show?
    let name = "Riya";
    alert("Welcome, " + name + "!"); (a) Welcome, Riya! (b) Riya (c) Welcome, name! (d) name
20. 20.🔠 Which heading shows the SMALLEST text: <h2>, <h1>, <h5> or <h6>? (a) <h1> (b) <h6> (c) <h2> (d) <h5>
21. 21.💪 Which flexbox property picks row or column? (a) flex-direction (b) align-items (c) display: flex (d) justify-content
22. 22.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    }
23. 23.🌈 Which hex code is red? (a) #0000ff (b) #ff00ff (c) #ffffff (d) #ff0000
24. 24.What does justify-content: center do? (a) packs boxes at the end (b) puts boxes in the middle (c) packs boxes at the start (d) equal gaps, none at ends
25. 25.💬 Which text will NOT show on the page?
    <!-- <p>Fun facts</p> -->
    <p>Rain today</p>
    <p>The red kite</p> (a) The red kite (b) Fun facts (c) Rain today
26. 26.📝 Which tag makes a big box for many lines of text? (a) <input> (b) <p> (c) <br> (d) <textarea>
27. 27.True or false: <input type="submit"> lets you tick many. (a) True (b) False
28. 28.True or false: body { margin: 0; } goes in style.css. (a) False (b) True
29. 29.📊 Which tag makes one table row? (a) <th> (b) <caption> (c) <table> (d) <tr>
30. 30.🖌️ Where does the text sit on its line?
    h1 {
      color: white;
      background-color: green;
      text-align: center;
      font-size: 32px;
    } (a) in the middle (b) on the left (c) on the right
31. 31.💬 Which text will NOT show on the page?
    <!-- <p>Hello, world!</p> -->
    <p>My pets</p>
    <p>I love mangoes.</p> (a) Hello, world! (b) I love mangoes. (c) My pets
32. 32.True or false: #hero is a class selector. (a) True (b) False
33. 33.What does background-color do? (a) centres a heading (b) makes letters bigger (c) makes the text bold (d) colours behind the text
34. 34.🚀 Which file should this code go in: p { color: red; } (a) script.js (b) index.html (c) style.css
35. 35.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) J (c) F (d) Z
36. 36.✍️ What is the selector in this CSS rule?
    h2 {
      font-weight: bold;
      color: red;
      background-color: yellow;
    } (a) h2 (b) font-weight (c) red (d) h1
37. 37.📊 Which tag makes a heading cell? (a) <table> (b) <td> (c) <th> (d) <caption>
38. 38.Which of these is an empty tag? (a) <h1> (b) <li> (c) <title> (d) <br>
39. 39.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
40. 40.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 90px;
      padding: 30px;
      border: 1px solid black;
      margin: 0px;
    }

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