Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 20 · 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 number does the browser show next to “Orange”?
   <ol>
     <li>Guava</li>
     <li>Litchi</li>
     <li>Orange</li>
     <li>Grapes</li>
   </ol>
2. 2.⚡ What does this code show?
   let name = "Kabir";
   alert("Hi, " + name + "!"); (a) Hi, Kabir! (b) Hi, name! (c) name (d) Kabir
3. 3.📊 How many cells does this table have in all?
   <table>
     <tr><th>Name</th><th>Fruit</th></tr>
     <tr><td>Orange</td><td>Litchi</td></tr>
     <tr><td>Jamun</td><td>Jamun</td></tr>
     <tr><td>Litchi</td><td>Jamun</td></tr>
   </table>
4. 4.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 5; i++) {
     total = total + 4;
   }
   console.log(total);
5. 5.🔍 One closing tag is missing. Which one?
   <strong>The red kite</strong>
   <small>Our school trip</small>
   <h1>Cricket is fun. (a) </h1> (b) </strong> (c) </i> (d) </small>
6. 6.📋 How many items does this list show?
   <ul>
     <li>Guava</li>
     <li>Jamun</li>
   </ul>
7. 7.Which colour pair is hard to read? (a) white on dark blue (b) yellow on black (c) white on black (d) light grey on white
8. 8.Which of these is a strong password? (a) iloveyou (b) Mango#Kite29! (c) qwerty (d) 111111
9. 9.⚡ What does this code print? (Look at the quotes!)
   let x = "1";
   let y = 3;
   console.log(x + y); (a) 4 (b) Error (c) 13
10. 10.Which colour pair is easy to read? (a) blue on purple (b) yellow on white (c) red on green (d) yellow on black
11. 11.🌍 What is the domain name in this URL?
    http://learn.example.com/about.html (a) /about.html (b) www.example.com (c) http (d) learn.example.com
12. 12.🔢 To build and share your first web page, what comes right after “plan what to show”? (a) publish it online (b) write the HTML (c) test in a browser (d) add CSS styles
13. 13.🖌️ What colour are the letters?
    h2 {
      background-color: green;
      text-align: left;
      font-size: 16px;
      color: red;
    } (a) orange (b) green (c) red
14. 14.🔍 Which is the odd one out? (a) changes the text size (b) puts a picture on a page (c) rounds box corners (d) sets colours and fonts
15. 15.True or false: .star is an element selector. (a) True (b) False
16. 16.⚖️ What colour is the text of this element?
    <h1 class="red" id="logo">Hi</h1>
    CSS:
    .red { color: black; }
    .red { color: red; } (a) blue (b) purple (c) red (d) black
17. 17.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) < > (d) { }
18. 18.🏷️ Which is the closing tag for <h2>? (a) <h2/> (b) </h2> (c) <\h2> (d) <h2>
19. 19.🏷️ Every HTML tag starts with which sign? (a) [ (b) ( (c) < (d) {
20. 20.⚖️ What colour is the text of this element?
    <p class="menu" id="end">Hi</p>
    CSS:
    .menu { color: white; }
    #end { color: blue; } (a) blue (b) red (c) green (d) white
21. 21.♿ Does this help everyone, or make the page harder to use: use headings in order? (a) makes it harder (b) helps everyone
22. 22.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    h2 { color: white; }
    h2 { color: blue; } (a) black (b) blue (c) white (d) green
23. 23.True or false: <table> goes in the body. (a) True (b) False
24. 24.🖼️ How many pixels wide is the picture drawn?
    <img src="bus.jpg" alt="Our school bus" width="200">
25. 25.🔁 Which loop repeats code a set number of times? (a) let (b) for (c) else (d) if
26. 26.⚡ What number does this code print?
    let a = 6;
    let b = 5;
    console.log(a * b);
27. 27.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
28. 28.What does font-weight do? (a) makes letters bigger (b) makes the text bold (c) sets the letter colour (d) picks the font style
29. 29.True or false: JavaScript puts a picture on a page. (a) False (b) True
30. 30.🔗 Which address opens when you click this link?
    <a href="news.html">Maths fun</a> (a) quiz.html (b) games.html (c) news.html (d) Maths fun
31. 31.Which of these does HTML do? (a) makes headings and lists (b) shows a pop-up message (c) changes the text size (d) rounds box corners
32. 32.🔗 Where does this link open?
    <a href="maths.html" target="_blank">Maths fun</a> (a) in a new tab (b) in the same tab
33. 33.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) type the password (b) click it twice (c) close it, tell an adult (d) share it with friends
34. 34.🧭 Is <header> semantic or not semantic? (a) semantic (b) not semantic
35. 35.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Papaya</td><td>Mango</td><td>Guava</td><td>Mango</td></tr>
      <tr><td>Mango</td><td>Grapes</td><td>Orange</td><td>Jamun</td></tr>
    </table>
36. 36.📋 How many items does this list show?
    <ul>
      <li>Jamun</li>
      <li>Orange</li>
    </ul>
37. 37.📝 How many paragraphs does this code make?
    <p>Cricket is fun.</p>
    <h2>Rain today</h2>
    <h2>Good morning!</h2>
    <p>My pets</p>
    <h2>Good morning!</h2>
38. 38.What is <input type="submit"> for? (a) sends the form (b) lets you pick only one (c) hides what you type (d) is for one line of words
39. 39.💬 How many paragraphs show on the page?
    <p>My best friend</p>
    <p>My pets</p>
    <!-- <p>Fun facts</p> -->
    <p>Hello, world!</p>
40. 40.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end

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