Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 94 · 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 colour pair is hard to read? (a) white on black (b) yellow on black (c) yellow on white (d) white on dark blue
2. 2.✍️ What value is given to background-color in this rule?
   .box {
     border: 2px solid;
     background-color: yellow;
     padding: 8px;
     text-align: center;
   } (a) background-color (b) 10px (c) yellow (d) 8px
3. 3.📦 In the box model, which part is a solid or dotted edge? (a) content (b) margin (c) border (d) padding
4. 4.📋 How many items does this list show?
   <ol>
     <li>Mango</li>
     <li>Grapes</li>
   </ol>
5. 5.True or false: <ol> is an unordered list. (a) True (b) False
6. 6.🎯 Which CSS selector matches this element?
   <div class="star" id="intro">Hello</div> (a) .intro (b) .menu (c) #main (d) .star
7. 7.🔠 Which heading shows the BIGGEST text: <h5>, <h2>, <h4> or <h6>? (a) <h6> (b) <h2> (c) <h5> (d) <h4>
8. 8.📝 Which input type is for one line of words? (a) radio (b) password (c) text (d) email
9. 9.🎯 Which sign starts a class selector? (a) . (b) # (c) & (d) @
10. 10.📊 How many cells does this table have in all?
    <table>
      <tr><td>Grapes</td><td>Banana</td></tr>
      <tr><td>Jamun</td><td>Orange</td></tr>
    </table>
11. 11.🔢 To build and share your first web page, what comes right after “test in a browser”? (a) add CSS styles (b) plan what to show (c) write the HTML (d) publish it online
12. 12.🧭 Which semantic tag holds extra side notes? (a) <header> (b) <main> (c) <article> (d) <aside>
13. 13.🚀 Which file should this code go in: score = score + 1; (a) script.js (b) index.html (c) style.css
14. 14.🌐 Which one sends pages over the net? (a) a web server (b) a web browser (c) a code editor
15. 15.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    p { color: orange; }
    #hero { color: green; }
    .big { color: blue; } (a) blue (b) orange (c) green (d) red
16. 16.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
17. 17.🛡️ Before typing a password on a site, check the address starts with ___. (a) ftp (b) www (c) http (d) https
18. 18.🔠 Which heading shows the BIGGEST text: <h3>, <h5>, <h6> or <h1>? (a) <h6> (b) <h3> (c) <h1> (d) <h5>
19. 19.⚖️ What colour is the text of this element?
    <h2 class="star" id="logo">Hi</h2>
    CSS:
    #logo { color: orange; }
    #logo { color: blue; } (a) yellow (b) red (c) orange (d) blue
20. 20.🔗 Which code links to about.html? (a) <a alt="about.html"> (b) <a src="about.html"> (c) <link about.html> (d) <a href="about.html">
21. 21.🔍 One closing tag is missing. Which one?
    <h3>My pets</h3>
    <strong>Rain today
    <b>Hello, world!</b> (a) </strong> (b) </b> (c) </i> (d) </h3>
22. 22.⚖️ What colour is the text of this element?
    <h2 class="menu" id="main">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: orange; } (a) blue (b) red (c) purple (d) orange
23. 23.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 50px;
      padding: 5px;
      border: 2px solid black;
      margin: 20px;
    }
24. 24.⚡ What does this code print? (Look at the quotes!)
    let x = "2";
    let y = 9;
    console.log(x + y); (a) 11 (b) 29 (c) Error
25. 25.🔠 Which heading shows the BIGGEST text: <h2>, <h6>, <h3> or <h4>? (a) <h2> (b) <h6> (c) <h3> (d) <h4>
26. 26.True or false: JavaScript changes the page live. (a) True (b) False
27. 27.🧩 Which language makes a link? (a) CSS (b) HTML (c) JavaScript
28. 28.Which of these does HTML do? (a) shows a pop-up message (b) sets colours and fonts (c) makes a form box (d) checks a quiz answer
29. 29.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <h4>Hello, world!</h4>
    <h4>My pets</h4>
30. 30.🌈 Which colour is rgb(0, 255, 255)? (a) blue (b) yellow (c) black (d) cyan
31. 31.⚖️ What colour is the text of this element?
    <h1 class="star" id="logo">Hi</h1>
    CSS:
    #logo { color: white; }
    .star { color: blue; } (a) blue (b) red (c) white (d) purple
32. 32.🏷️ Which is the closing tag for <h3>? (a) <h3/> (b) </h3> (c) <\h3> (d) <h3>
33. 33.🖼️ How many pixels wide is the picture drawn?
    <img src="kite.png" alt="A red kite" width="350">
34. 34.🌈 Which colour is #ffff00? (a) yellow (b) black (c) blue (d) bright green
35. 35.📋 What number does the browser show next to “Guava”?
    <ol start="5">
      <li>Papaya</li>
      <li>Litchi</li>
      <li>Orange</li>
      <li>Jamun</li>
      <li>Mango</li>
      <li>Guava</li>
    </ol>
36. 36.Which of these goes in the body? (a) <title> (b) <link rel="stylesheet"> (c) <style> (d) <p>
37. 37.Which of these is a closing tag? (a) </li> (b) <p> (c) <li> (d) <h1>
38. 38.⚡ Which word makes a new variable? (a) put (b) let (c) make (d) give
39. 39.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="dog.jpg" alt="A happy dog" width="300"> (a) width (b) The full moon (c) A happy dog (d) dog.jpg
40. 40.🌈 Which colour is rgb(0, 0, 255)? (a) blue (b) black (c) red (d) yellow

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