Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 431 · 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 does JavaScript do? (a) changes the text size (b) makes a form box (c) makes a link (d) checks a quiz answer
2. 2.True or false: to tell a trusted adult is safe. (a) True (b) False
3. 3.Which of these has a closing tag? (a) <img> (b) <br> (c) <title> (d) <input>
4. 4.📄 Can HTML on its own make links to pages? (a) Yes (b) No
5. 5.📋 How many items does this list show?
   <ul>
     <li>Banana</li>
     <li>Guava</li>
     <li>Litchi</li>
     <li>Grapes</li>
     <li>Papaya</li>
     <li>Orange</li>
   </ul>
6. 6.⚡ What number does this code print?
   let books = 10;
   books = books + 20;
   books = books - 9;
   console.log(books);
7. 7.📝 Which input type lets you pick only one? (a) email (b) radio (c) number (d) password
8. 8.Which of these is padding? (a) a solid or dotted edge (b) the text or picture (c) the gap to other boxes (d) the gap round content
9. 9.🔢 To build and share your first web page, which comes LAST? (a) plan what to show (b) publish it online (c) add CSS styles (d) test in a browser
10. 10.⚡ What does this code print? (Look at the quotes!)
    let x = "7";
    let y = 7;
    console.log(x + y); (a) 14 (b) Error (c) 77
11. 11.🔠 How many <h1> headings should a page usually have? (a) 10 (b) 3 (c) 1 (d) 6
12. 12.🎯 Which element does the selector li style? (a) <div> (b) <p id="hero"> (c) <li class="note"> (d) <span class="note">
13. 13.🎯 Which element does the selector #intro style? (a) <p id="main"> (b) <p id="intro"> (c) <p class="intro"> (d) <h1 class="note">
14. 14.✍️ Which sign ends each CSS declaration? (a) ; (b) , (c) : (d) .
15. 15.🖼️ Which picture file does the browser load?
    <img src="kite.png" alt="A red kite" width="350"> (a) map.png (b) kite.png (c) A red kite (d) cake.jpg
16. 16.🧭 Which semantic tag holds the main content? (a) <footer> (b) <article> (c) <main> (d) <aside>
17. 17.🔍 One closing tag is missing. Which one?
    <h2>Hello, world!</h2>
    <h3>Fun facts
    <u>Our school trip</u> (a) </u> (b) </h2> (c) </em> (d) </h3>
18. 18.🔠 How many heading levels does HTML have? (a) 6 (b) 10 (c) 3 (d) 4
19. 19.Which of these is margin? (a) space outside the border (b) the gap round content (c) space inside the border (d) the text or picture
20. 20.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) align-items (c) display: flex (d) justify-content
21. 21.🌈 Which colour is #ffff00? (a) yellow (b) bright green (c) blue (d) red
22. 22.True or false: to click prize links is safe. (a) True (b) False
23. 23.📝 Which input type lets you tick many? (a) number (b) submit (c) radio (d) checkbox
24. 24.📋 Which list shows the steps of a recipe best? (a) <ul> (b) <ol> (c) <br> (d) <hr>
25. 25.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
26. 26.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>Planets</h1>
      <p>Here is my best one.</p>
    </body>
    </html> (a) Here is my best one. (b) index.html (c) Planets (d) My Hobbies
27. 27.⚖️ What colour is the text of this element?
    <h1 class="big" id="top">Hi</h1>
    CSS:
    h1 { color: red; }
    .big { color: green; }
    #top { color: white; } (a) black (b) white (c) green (d) red
28. 28.🔢 On a typical page, from top to bottom, which comes LAST? (a) <footer> (b) <nav> (c) <header> (d) <main>
29. 29.True or false: <ul> is an unordered list. (a) True (b) False
30. 30.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      width: 300px;
      font-weight: bold;
      font-size: 20px;
    }
32. 32.🏷️ What does a closing tag have that an opening tag does not? (a) a dollar $ (b) a slash / (c) a dot . (d) a hash #
33. 33.🔁 Which word runs code only when something is true? (a) if (b) let (c) log (d) for
34. 34.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) [ ] (d) { }
35. 35.📦 In the box model, which part is space outside the border? (a) content (b) padding (c) margin (d) border
36. 36.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 370px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 80px wide (no margins).
37. 37.✍️ What is the selector in this CSS rule?
    h2 {
      font-style: italic;
      background-color: yellow;
    } (a) font-style (b) h2 (c) yellow (d) h1
38. 38.🔗 Which address opens when you click this link?
    <a href="contact.html">Contact us</a> (a) https://example.com (b) maths.html (c) contact.html (d) Contact us
39. 39.🖼️ Does <img> need a closing tag? (a) Yes (b) No
40. 40.💬 Which text will NOT show on the page?
    <p>The red kite</p>
    <p>Rain today</p>
    <p>Fun facts</p>
    <!-- <p>My pets</p> --> (a) My pets (b) The red kite (c) Fun facts (d) Rain today

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