Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 168 · 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.🖌️ How big is the text, in px?
   p {
     font-size: 24px;
     background-color: orange;
     text-align: right;
     color: purple;
   }
2. 2.⚡ Which JavaScript word shows a pop-up box? (a) let (b) if (c) console.log() (d) alert()
3. 3.True or false: <nav> helps you move around. (a) False (b) True
4. 4.True or false: <header> holds extra side notes. (a) False (b) True
5. 5.♿ What does good colour contrast mean? (a) text stands out clearly (b) no colours at all (c) many bright colours (d) only red text
6. 6.🎯 Which element does the selector div style? (a) <h1 id="end"> (b) <p class="box"> (c) <span> (d) <div class="box">
7. 7.📄 What is the big heading shown on this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Art Gallery</title>
   </head>
   <body>
     <h1>Match report</h1>
     <p>Thanks for visiting.</p>
   </body>
   </html> (a) Thanks for visiting. (b) Art Gallery (c) body (d) Match report
8. 8.True or false: HTML on its own can keep a high score. (a) False (b) True
9. 9.📝 On how many lines does the browser show this paragraph?
   <p>Stars shine<br>Kites fly high<br>Sky is blue<br>Rivers flow</p>
10. 10.🛡️ Should you share your password with your best friend? (a) No (b) Yes
11. 11.Which of these does HTML do? (a) makes headings and lists (b) adds space around boxes (c) sets colours and fonts (d) rounds box corners
12. 12.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="sport"> Chess
      <input type="radio" name="sport"> Cricket
      <input type="radio" name="sport"> Kabaddi
      <input type="radio" name="sport"> Football
    </form>
13. 13.True or false: <aside> holds extra side notes. (a) False (b) True
14. 14.🔗 Which address opens when you click this link?
    <a href="games.html">Contact us</a> (a) games.html (b) contact.html (c) about.html (d) Contact us
15. 15.♿ Which link text is clearest? (a) here (b) link (c) Read the fruit facts (d) click here
16. 16.🖌️ Where does the text sit on its line?
    h1 {
      background-color: black;
      font-size: 12px;
      text-align: left;
      color: purple;
    } (a) in the middle (b) on the left (c) on the right
17. 17.💬 How many paragraphs show on the page?
    <!-- <p>Good morning!</p> -->
    <p>Hello, world!</p>
    <p>The red kite</p>
    <!-- <p>Fun facts</p> -->
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: center;
    }
    Inside are 2 boxes, each 80px wide (no margins).
19. 19.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Litchi</td><td>Litchi</td><td>Jamun</td></tr>
      <tr><td>Jamun</td><td>Jamun</td><td>Guava</td></tr>
      <tr><td>Grapes</td><td>Papaya</td><td>Mango</td></tr>
    </table>
20. 20.🔗 Which words do you click on?
    <a href="news.html">Contact us</a> (a) Visit the site (b) Contact us (c) news.html (d) href
21. 21.True or false: <ol> shows 1, 2, 3 numbers. (a) False (b) True
22. 22.💬 How many paragraphs show on the page?
    <!-- <p>Good morning!</p> -->
    <!-- <p>My best friend</p> -->
    <!-- <p>Rain today</p> -->
    <!-- <p>Cricket is fun.</p> -->
    <p>My pets</p>
23. 23.🏷️ Which is the closing tag for <small>? (a) <small/> (b) </small> (c) <small> (d) <\small>
24. 24.💬 How does an HTML comment start? (a) <!-- (b) // (c) /* (d) #
25. 25.📝 Which tag makes a big box for many lines of text? (a) <textarea> (b) <input> (c) <p> (d) <br>
26. 26.🖼️ Does <img> need a closing tag? (a) No (b) Yes
27. 27.📝 How many paragraphs does this code make?
    <p>Our school trip</p>
    <h2>Our school trip</h2>
    <p>Our school trip</p>
    <h2>Fun facts</h2>
    <p>My best friend</p>
28. 28.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
29. 29.🔁 How many numbers does this code print?
    for (let i = 0; i < 7; i = i + 2) {
      console.log(i);
    }
30. 30.🔗 Which code links to about.html? (a) <a src="about.html"> (b) <a href="about.html"> (c) <a alt="about.html"> (d) <link about.html>
31. 31.🔠 How many headings are in this code?
    <h1>Cricket is fun.</h1>
    <p>Cricket is fun.</p>
    <p>My best friend</p>
32. 32.🔢 To build and share your first web page, which comes FIRST? (a) publish it online (b) write the HTML (c) plan what to show (d) test in a browser
33. 33.📝 Which input type lets you pick only one? (a) text (b) password (c) number (d) radio
34. 34.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      width: 300px;
      padding: 8px;
      margin: 10px;
      font-weight: bold;
    }
35. 35.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 4 boxes, each 40px wide (no margins).
36. 36.Which of these goes in the body? (a) <style> (b) <link rel="stylesheet"> (c) <a> (d) <meta charset="utf-8">
37. 37.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) neither (d) the later one
38. 38.📦 In the box model, which part is space outside the border? (a) border (b) margin (c) padding (d) content
39. 39.✍️ What is the selector in this CSS rule?
    h2 {
      margin: 10px;
      font-size: 20px;
    } (a) h1 (b) 20px (c) margin (d) h2
40. 40.📋 Which list tag lists things in any order? (a) <ol> (b) <ul> (c) <li>

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