Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 221 · 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 tag makes a clickable link? (a) <img> (b) <p> (c) <a> (d) <link>
2. 2.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 5; i++) {
     total = total + i;
   }
   console.log(total);
3. 3.🔁 How many numbers does this code print?
   for (let i = 0; i < 19; i = i + 4) {
     console.log(i);
   }
4. 4.✍️ What value is given to text-align in this rule?
   p {
     text-align: center;
     background-color: yellow;
   } (a) 10px (b) text-align (c) center (d) yellow
5. 5.What does color do? (a) sets the letter colour (b) makes letters bigger (c) centres a heading (d) colours behind the text
6. 6.🔗 Which words do you click on?
   <a href="maths.html">Play games</a> (a) About us (b) maths.html (c) Play games (d) href
7. 7.🧭 Is <div> semantic or not semantic? (a) not semantic (b) semantic
8. 8.🖌️ What colour are the letters?
   p {
     font-size: 28px;
     color: orange;
     text-align: left;
     background-color: white;
   } (a) yellow (b) orange (c) white
9. 9.⚡ What number does this code print?
   let a = 9;
   let b = 9;
   console.log(a * b);
10. 10.📄 What is the first line of an HTML5 page? (a) <body> (b) <html> (c) <head> (d) <!DOCTYPE html>
11. 11.True or false: the browser sends the page back. (a) False (b) True
12. 12.📊 How many cells does this table have in all?
    <table>
      <tr><td>Banana</td><td>Jamun</td><td>Guava</td><td>Mango</td></tr>
      <tr><td>Banana</td><td>Banana</td><td>Litchi</td><td>Orange</td></tr>
      <tr><td>Mango</td><td>Grapes</td><td>Jamun</td><td>Guava</td></tr>
      <tr><td>Orange</td><td>Jamun</td><td>Banana</td><td>Papaya</td></tr>
    </table>
13. 13.🔗 What does target="_blank" do to a link? (a) makes it bold (b) opens it in a new tab (c) hides the link (d) makes it blank
14. 14.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as one space (b) as a new line (c) as 5 spaces (d) as a dot
15. 15.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <p>Fun facts</p>
    <!-- <p>Rain today</p> -->
16. 16.🖼️ Which tag puts a picture on a page? (a) <a> (b) <img> (c) <pic> (d) <p>
17. 17.🔢 In a basic web page file, which comes first: “<head>” or “<!DOCTYPE html>”? (a) <!DOCTYPE html> (b) <head>
18. 18.🔠 Which heading shows the BIGGEST text: <h1>, <h4>, <h5> or <h2>? (a) <h1> (b) <h4> (c) <h5> (d) <h2>
19. 19.📝 Which tag makes a big box for many lines of text? (a) <br> (b) <p> (c) <input> (d) <textarea>
20. 20.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
21. 21.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) flex-start (d) center
22. 22.✍️ What is the selector in this CSS rule?
    p {
      font-size: 20px;
      padding: 8px;
    } (a) font-size (b) .note (c) p (d) 8px
23. 23.Which of these is safe to do online? (a) log out on shared PCs (b) click prize links (c) share your OTP (d) share your password
24. 24.🧭 Which semantic tag holds the menu of links? (a) <main> (b) <header> (c) <nav> (d) <footer>
25. 25.✍️ How does a CSS comment start? (a) /* (b) # (c) <!-- (d) //
26. 26.⚡ What does this code print? (Look at the quotes!)
    let x = "5";
    let y = 2;
    console.log(x + y); (a) 52 (b) Error (c) 7
27. 27.⚡ What does this code print? (Look at the quotes!)
    let x = "3";
    let y = 1;
    console.log(x + y); (a) Error (b) 4 (c) 31
28. 28.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 4 (c) 6 (d) 3
29. 29.🖌️ How big is the text, in px?
    h1 {
      background-color: purple;
      font-size: 32px;
      color: blue;
      text-align: center;
    }
30. 30.✍️ What value is given to text-align in this rule?
    .note {
      border: 2px solid;
      font-style: italic;
      color: red;
      text-align: center;
    } (a) text-align (b) 10px (c) center (d) yellow
31. 31.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 160px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }
32. 32.🖌️ How big is the text, in px?
    h1 {
      background-color: blue;
      text-align: left;
      font-size: 20px;
      color: white;
    }
33. 33.🚀 Which program lets you see your web page while you build it? (a) a web browser (b) a photo viewer (c) a calculator (d) a music player
34. 34.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 99 (c) 255 (d) 100
35. 35.📋 Does this list show bullets or numbers?
    <ul>
      <li>Guava</li>
      <li>Jamun</li>
      <li>Papaya</li>
    </ul> (a) numbers (b) bullets
36. 36.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Orange</td><td>Papaya</td><td>Jamun</td><td>Papaya</td></tr>
    </table>
37. 37.🎨 A CSS file usually ends with which extension? (a) .png (b) .html (c) .css (d) .js
38. 38.🔗 Where does this link open?
    <a href="contact.html">Play games</a> (a) in a new tab (b) in the same tab
39. 39.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 22px;
      }
    }
40. 40.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="tiger.jpg" alt="A tiger asleep" width="300"> (a) A red kite (b) A tiger asleep (c) width (d) tiger.jpg

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