Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 637 · 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.What does color do? (a) picks the font style (b) sets the letter colour (c) centres a heading (d) makes letters bigger
2. 2.📊 How many cells are in each row?
   <table>
     <tr><td>Litchi</td><td>Guava</td><td>Mango</td><td>Mango</td></tr>
     <tr><td>Jamun</td><td>Banana</td><td>Banana</td><td>Jamun</td></tr>
   </table>
3. 3.🔍 One closing tag is missing. Which one?
   <h2>My pets
   <u>The red kite</u>
   <em>Hello, world!</em> (a) </h2> (b) </u> (c) </i> (d) </em>
4. 4.🎯 Which CSS selector matches this element?
   <p class="red" id="logo">Hello</p> (a) .red (b) #end (c) .box (d) .logo
5. 5.🔗 Which words do you click on?
   <a href="news.html">School news</a> (a) Take the quiz (b) School news (c) href (d) news.html
6. 6.Which of these is a strong password? (a) S0lar!Pen#8 (b) qwerty (c) abcd1234 (d) iloveyou
7. 7.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) flex-start (c) space-between (d) center
8. 8.⚡ What number does this code print?
   let a = 52;
   let b = 39;
   console.log(a - b);
9. 9.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 320px;
     justify-content: space-between;
   }
   Inside are 3 boxes, each 100px wide (no margins).
10. 10.⚖️ What colour is the text of this element?
    <h2 class="menu" id="main">Hi</h2>
    CSS:
    h2 { color: purple; }
    #main { color: white; } (a) orange (b) white (c) black (d) purple
11. 11.📊 Which tag gives the table a title? (a) <tr> (b) <td> (c) <th> (d) <caption>
12. 12.🔁 What does this code print?
    let age = 19;
    if (age < 31) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) child (b) teen
13. 13.🚀 Where in index.html does the link to style.css go? (a) in the head (b) in the footer (c) after </html> (d) inside a <p>
14. 14.Which of these is an opening tag? (a) </body> (b) </p> (c) </h1> (d) <li>
15. 15.True or false: <ol> shows 1, 2, 3 numbers. (a) False (b) True
16. 16.True or false: <td> gives the table a title. (a) True (b) False
17. 17.🌐 Which one saves our .html files? (a) a web server (b) a web browser (c) a code editor
18. 18.🎯 Which element does the selector p style? (a) <h2 class="box"> (b) <p class="box"> (c) <h1> (d) <li id="end">
19. 19.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 4; i++) {
      total = total + 2;
    }
    console.log(total);
20. 20.Which of these is an opening tag? (a) </h1> (b) <body> (c) </p> (d) </title>
21. 21.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
22. 22.Which of these is safe to do online? (a) put secrets in comments (b) type a password on http (c) download from pop-ups (d) tell a trusted adult
23. 23.🌍 What is the domain name in this URL?
    http://kids.example.org/about.html (a) http (b) school.example.in (c) /about.html (d) kids.example.org
24. 24.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="bus.jpg" alt="Our school bus" width="400"> (a) bus.jpg (b) width (c) Our school bus (d) An old fort
25. 25.🖌️ Where does the text sit on its line?
    h1 {
      background-color: purple;
      text-align: right;
      font-size: 20px;
      color: green;
    } (a) in the middle (b) on the left (c) on the right
26. 26.📋 Which tag goes around each item of a list? (a) <ol> (b) <p> (c) <ul> (d) <li>
27. 27.🔠 Which heading shows the SMALLEST text: <h5>, <h1>, <h6> or <h2>? (a) <h2> (b) <h1> (c) <h6> (d) <h5>
28. 28.🔗 Which words do you click on?
    <a href="https://example.com">Art corner</a> (a) href (b) School news (c) https://example.com (d) Art corner
29. 29.⚖️ What colour is the text of this element?
    <h1 class="big" id="intro">Hi</h1>
    CSS:
    #intro { color: green; }
    .big { color: blue; } (a) red (b) white (c) green (d) blue
30. 30.🎯 What kind of selector is li? (a) a class selector (b) an id selector (c) an element selector
31. 31.True or false: CSS makes headings and lists. (a) False (b) True
32. 32.🖼️ How many pixels wide is the picture drawn?
    <img src="kite.png" alt="A red kite" width="400">
33. 33.🔁 Which loop repeats code a set number of times? (a) if (b) let (c) for (d) else
34. 34.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-end (c) flex-start (d) space-between
35. 35.🖼️ How many pixels wide is the picture drawn?
    <img src="moon.png" alt="The full moon" width="350">
36. 36.🚀 Which file should this code go in: #top { color: blue; } (a) style.css (b) index.html (c) script.js
37. 37.📝 Does <meta> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
38. 38.True or false: <header> holds the logo and title. (a) True (b) False
39. 39.🔠 Which heading shows the SMALLEST text: <h3>, <h6>, <h1> or <h2>? (a) <h2> (b) <h6> (c) <h3> (d) <h1>
40. 40.True or false: “write clear link text” makes the page harder to use. (a) True (b) False

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