Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 793 · 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.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 24px;
     }
   } (a) No (b) Yes
2. 2.Which colour pair is hard to read? (a) black on white (b) white on dark blue (c) white on black (d) yellow on white
3. 3.⚖️ What colour is the text of this element?
   <p class="star" id="top">Hi</p>
   CSS:
   #top { color: white; }
   .star { color: blue; }
   p { color: green; } (a) blue (b) black (c) white (d) green
4. 4.🌈 Which colour of light is strongest in rgb(107, 112, 180)? (a) blue (b) green (c) red
5. 5.🔢 In a basic web page file, which comes first: “<!DOCTYPE html>” or “<html>”? (a) <html> (b) <!DOCTYPE html>
6. 6.🎯 What kind of selector is body? (a) an id selector (b) an element selector (c) a class selector
7. 7.📝 On how many lines does the browser show this paragraph?
   <p>Sky is blue<br>Rivers flow<br>Birds sing<br>Kites fly high<br>Stars shine</p>
8. 8.⚡ What does alert() show? (a) a pop-up box (b) a new tab (c) a picture (d) a table
9. 9.Which of these is not safe to do online? (a) log out on shared PCs (b) keep passwords secret (c) check for https first (d) meet an online stranger
10. 10.📋 Which list tag is an unordered list? (a) <ol> (b) <ul> (c) <li>
11. 11.🔠 Which heading shows the BIGGEST text: <h6>, <h1>, <h4> or <h3>? (a) <h1> (b) <h3> (c) <h4> (d) <h6>
12. 12.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 3 (c) 2 (d) 4
13. 13.♿ A part of the page is under a <h2> heading. Which tag should its sub-heading use? (a) <h5> (b) <h6> (c) <h3> (d) <h1>
14. 14.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 5px;
      border: 4px solid black;
      margin: 10px;
    }
15. 15.True or false: CSS rounds box corners. (a) True (b) False
16. 16.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 99 (c) 1000 (d) 255
17. 17.📝 Which input type picks a day? (a) radio (b) date (c) number (d) checkbox
18. 18.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) white (c) blue (d) green
19. 19.🌗 Is white on black easy or hard to read? (a) easy to read (b) hard to read
20. 20.📊 Which tag holds the whole table? (a) <caption> (b) <td> (c) <table> (d) <tr>
21. 21.🔗 Where does this link open?
    <a href="contact.html" target="_blank">Maths fun</a> (a) in the same tab (b) in a new tab
22. 22.🔗 Which tag makes a clickable link? (a) <img> (b) <p> (c) <link> (d) <a>
23. 23.🔗 Where does this link open?
    <a href="art.html">Take the quiz</a> (a) in the same tab (b) in a new tab
24. 24.⚡ What does this code show?
    let name = "Aman";
    alert("Hello, " + name + "!"); (a) Aman (b) Hello, Aman! (c) Hello, name! (d) name
25. 25.📝 Which input type is for an email address? (a) number (b) email (c) radio (d) password
26. 26.🔍 One closing tag is missing. Which one?
    <strong>My pets</strong>
    <i>The red kite</i>
    <b>I love mangoes. (a) </h3> (b) </strong> (c) </i> (d) </b>
27. 27.Which of these is not safe to do online? (a) ask before downloading (b) type a password on http (c) tell a trusted adult (d) keep passwords secret
28. 28.🖼️ How many pixels wide is the picture drawn?
    <img src="moon.png" alt="The full moon" width="50">
29. 29.♿ Is this heading order correct (no level skipped)?
    <h1> → <h1> → <h2> → <h4> (a) Yes (b) No
30. 30.⚖️ What colour is the text of this element?
    <p class="note" id="main">Hi</p>
    CSS:
    p { color: red; }
    p { color: white; } (a) red (b) white (c) green (d) purple
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 90px;
      padding: 30px;
      border: 2px solid black;
      margin: 10px;
    }
32. 32.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 5; i++) {
      total = total + i;
    }
    console.log(total);
33. 33.💬 Which text will NOT show on the page?
    <p>My pets</p>
    <!-- <p>Cricket is fun.</p> -->
    <p>Our school trip</p> (a) Our school trip (b) Cricket is fun. (c) My pets
34. 34.📋 How many items does this list show?
    <ul>
      <li>Litchi</li>
      <li>Mango</li>
    </ul>
35. 35.📱 What does a media query check? (a) the page title (b) the battery level (c) the time of day (d) the screen width
36. 36.🌐 Which one answers page requests? (a) a web browser (b) a web server (c) a code editor
37. 37.🏷️ Which is the closing tag for <h3>? (a) <h3> (b) <h3/> (c) <\h3> (d) </h3>
38. 38.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
39. 39.Which of these is an opening tag? (a) </h1> (b) </body> (c) <b> (d) </p>
40. 40.What does font-size do? (a) colours behind the text (b) centres a heading (c) makes the text bold (d) makes letters bigger

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