Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 361 · 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 a web address (URL) tell the browser? (a) your password (b) where the page is (c) how old you are (d) the page colour
2. 2.Which colour pair is hard to read? (a) white on dark blue (b) black on white (c) dark grey on white (d) red on green
3. 3.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Riya’s Recipes</title>
   </head>
   <body>
     <h1>Easy snacks</h1>
     <p>Here is my best one.</p>
   </body>
   </html> (a) index.html (b) Here is my best one. (c) Easy snacks (d) Riya’s Recipes
4. 4.🖼️ How many pixels wide is the picture drawn?
   <img src="fort.jpg" alt="An old fort" width="350">
5. 5.📊 How many heading cells (<th>) does this table have?
   <table>
     <tr><th>Name</th><th>Fruit</th></tr>
     <tr><td>Banana</td><td>Litchi</td></tr>
     <tr><td>Jamun</td><td>Guava</td></tr>
   </table>
6. 6.What is <input type="submit"> for? (a) sends the form (b) hides what you type (c) lets you tick many (d) lets you pick only one
7. 7.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 20px;
     }
   }
8. 8.⚡ What does this code show?
   let name = "Meera";
   console.log("Welcome, " + name + "!"); (a) name (b) Welcome, name! (c) Meera (d) Welcome, Meera!
9. 9.📛 In <a href="x.html">, what is href? (a) a comment (b) an attribute (c) a closing tag (d) an element name
10. 10.🏷️ Is <b> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
11. 11.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the start (c) packs boxes at the end (d) puts boxes in the middle
12. 12.📝 How many paragraphs does this code make?
    <p>Our school trip</p>
    <h2>I love mangoes.</h2>
    <h2>Our school trip</h2>
    <h2>My best friend</h2>
13. 13.✍️ What is the selector in this CSS rule?
    p {
      width: 300px;
      font-size: 20px;
      text-align: center;
    } (a) .note (b) 20px (c) width (d) p
14. 14.🔗 Which words do you click on?
    <a href="quiz.html">About us</a> (a) Contact us (b) About us (c) quiz.html (d) href
15. 15.🖌️ Which CSS property centres a heading? (a) background-color (b) font-family (c) text-align (d) color
16. 16.💬 Which text will NOT show on the page?
    <!-- <p>Cricket is fun.</p> -->
    <p>My best friend</p>
    <p>Our school trip</p>
    <p>The red kite</p> (a) My best friend (b) Cricket is fun. (c) The red kite (d) Our school trip
17. 17.🧩 Which language rounds box corners? (a) HTML (b) CSS (c) JavaScript
18. 18.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
19. 19.🔠 Which tag is used for the main title on a page? (a) <br> (b) <p> (c) <h6> (d) <h1>
20. 20.⚖️ What colour is the text of this element?
    <h1 class="star" id="hero">Hi</h1>
    CSS:
    #hero { color: green; }
    #hero { color: white; } (a) blue (b) white (c) green (d) purple
21. 21.True or false: <ul><li>Art</li></ul> goes in script.js. (a) False (b) True
22. 22.True or false: <table> gives the table a title. (a) False (b) True
23. 23.🚀 Which file should this code go in: h1 { font-size: 32px; } (a) script.js (b) style.css (c) index.html
24. 24.📋 How many items does this list show?
    <ul>
      <li>Orange</li>
      <li>Jamun</li>
      <li>Papaya</li>
      <li>Guava</li>
      <li>Grapes</li>
      <li>Litchi</li>
    </ul>
25. 25.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 4; i++) {
      total = total + 4;
    }
    console.log(total);
26. 26.What is <input type="email"> for? (a) takes only numbers (b) hides what you type (c) is for an email address (d) is for one line of words
27. 27.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 410px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
28. 28.💬 How many paragraphs show on the page?
    <p>Hello, world!</p>
    <p>Good morning!</p>
    <!-- <p>My pets</p> -->
29. 29.🎯 How many elements on a page should have the same id? (a) 2 (b) any number (c) 1 (d) 5
30. 30.🔢 To build and share your first web page, what comes right after “write the HTML”? (a) publish it online (b) add CSS styles (c) plan what to show (d) test in a browser
31. 31.True or false: <table> holds the whole table. (a) False (b) True
32. 32.♿ Is this heading order correct (no level skipped)?
    <h1> → <h3> → <h2> → <h2> (a) No (b) Yes
33. 33.♿ Is this heading order correct (no level skipped)?
    <h1> → <h3> → <h2> → <h3> (a) No (b) Yes
34. 34.📋 Which list tag is an ordered list? (a) <ol> (b) <li> (c) <ul>
35. 35.📝 How many paragraphs does this code make?
    <p>Good morning!</p>
    <p>My pets</p>
    <p>Our school trip</p>
    <h2>Hello, world!</h2>
36. 36.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 12; i = i + 3) {
      console.log(i);
    }
37. 37.🔠 Which heading shows the SMALLEST text: <h4>, <h2>, <h5> or <h3>? (a) <h5> (b) <h4> (c) <h2> (d) <h3>
38. 38.What does font-weight do? (a) centres a heading (b) makes the text bold (c) makes letters bigger (d) sets the letter colour
39. 39.True or false: <main> is the page’s key part. (a) False (b) True
40. 40.📊 Where do <td> cells go? (a) inside a <li> (b) inside a <p> (c) inside the <head> (d) inside a <tr>

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