Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 133 · 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 colour is the text of this element?
   <p class="red" id="intro">Hi</p>
   CSS:
   #intro { color: green; }
   p { color: blue; } (a) green (b) yellow (c) white (d) blue
2. 2.📋 Does this list show bullets or numbers?
   <ul>
     <li>Banana</li>
     <li>Mango</li>
     <li>Guava</li>
   </ul> (a) bullets (b) numbers
3. 3.📝 What does <p> make? (a) a paragraph (b) a link (c) a table (d) a picture
4. 4.🔠 How many headings are in this code?
   <h1>Rain today</h1>
   <h4>Fun facts</h4>
   <h3>Good morning!</h3>
5. 5.True or false: HTTPS shows the page to you. (a) False (b) True
6. 6.🌍 What is the protocol in this URL?
   https://school.example.in/about.html (a) school.example.in (b) http (c) /about.html (d) https
7. 7.🔠 Which heading shows the BIGGEST text: <h1>, <h6>, <h2> or <h5>? (a) <h6> (b) <h5> (c) <h2> (d) <h1>
8. 8.Which of these is true of a web browser? (a) stores a website’s files (b) has an address bar (c) sends pages over the net (d) saves our .html files
9. 9.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or narrower (c) 800px or wider (d) exactly 100px
10. 10.🖼️ Does <img> need a closing tag? (a) No (b) Yes
11. 11.📋 How many items does this list show?
    <ul>
      <li>Mango</li>
      <li>Papaya</li>
      <li>Grapes</li>
      <li>Litchi</li>
      <li>Guava</li>
    </ul>
12. 12.True or false: #top is an id selector. (a) False (b) True
13. 13.✍️ Which property is set to italic in this rule?
    p {
      padding: 8px;
      font-style: italic;
      border: 2px solid;
      text-align: center;
    } (a) font-style (b) italic (c) font-size (d) color
14. 14.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
15. 15.🚀 Which file should this code go in: #top { color: blue; } (a) index.html (b) script.js (c) style.css
16. 16.⚡ What does this code show?
    let name = "Riya";
    console.log("Welcome, " + name + "!"); (a) Welcome, name! (b) name (c) Riya (d) Welcome, Riya!
17. 17.🌍 What is the domain name in this URL?
    https://school.example.in/news/today.html (a) https (b) /news/today.html (c) www.example.net (d) school.example.in
18. 18.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="50"> (a) tiger.jpg (b) An old fort (c) kite.png (d) fort.jpg
19. 19.⚡ Where does console.log() show its output? (a) on the title bar (b) on the printer (c) in the console (d) in the address bar
20. 20.🔁 What does this code print?
    let marks = 48;
    if (marks > 9) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Try again (b) Pass
21. 21.🏷️ Which is the closing tag for <h3>? (a) <\h3> (b) </h3> (c) <h3> (d) <h3/>
22. 22.Which of these is not safe to do online? (a) check for https first (b) share your OTP (c) use a strong password (d) keep passwords secret
23. 23.🔗 Which words do you click on?
    <a href="games.html">Maths fun</a> (a) Art corner (b) href (c) games.html (d) Maths fun
24. 24.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      background-color: yellow;
      padding: 8px;
      border: 2px solid;
    }
25. 25.📋 How many items does this list show?
    <ol>
      <li>Papaya</li>
      <li>Orange</li>
    </ol>
26. 26.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 220px;
      padding: 20px;
      border: 4px solid black;
      margin: 5px;
    }
27. 27.🔡 Are HTML tag names usually written in small letters? (a) Yes (b) No
28. 28.💬 Which text will NOT show on the page?
    <p>Our school trip</p>
    <p>Fun facts</p>
    <p>Cricket is fun.</p>
    <!-- <p>Hello, world!</p> --> (a) Our school trip (b) Cricket is fun. (c) Fun facts (d) Hello, world!
29. 29.🔁 How many times does this code print “Hello”?
    for (let i = 2; i <= 11; i++) {
      console.log("Hello");
    }
30. 30.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 90px;
      padding: 15px;
      border: 5px solid black;
      margin: 0px;
    }
31. 31.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h4> → <h3> (a) No (b) Yes
32. 32.True or false: <li> lists things in any order. (a) False (b) True
33. 33.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 3 (b) 2 (c) 4 (d) 6
34. 34.True or false: <ol> shows 1, 2, 3 numbers. (a) True (b) False
35. 35.✍️ In color: blue; which part is the value? (a) : (b) blue (c) color (d) ;
36. 36.True or false: padding is the gap round content. (a) False (b) True
37. 37.⚖️ What colour is the text of this element?
    <h1 class="big" id="main">Hi</h1>
    CSS:
    #main { color: yellow; }
    h1 { color: orange; } (a) yellow (b) blue (c) orange (d) black
38. 38.📄 Can HTML on its own pick a random number? (a) Yes (b) No
39. 39.📦 In the box model, which part is the line round the box? (a) margin (b) content (c) padding (d) border
40. 40.True or false: <aside> sits at the very top. (a) True (b) False

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