Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 223 · 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.📋 How many items does this list show?
   <ol>
     <li>Mango</li>
     <li>Banana</li>
   </ol>
2. 2.⚖️ What colour is the text of this element?
   <h2 class="box" id="logo">Hi</h2>
   CSS:
   .box { color: red; }
   .box { color: purple; } (a) red (b) white (c) blue (d) purple
3. 3.🔁 What does i++ do? (a) prints i (b) adds 1 to i (c) takes 1 from i (d) doubles i
4. 4.🔗 Which code links to about.html? (a) <link about.html> (b) <a alt="about.html"> (c) <a src="about.html"> (d) <a href="about.html">
5. 5.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
6. 6.🔠 How many headings are in this code?
   <h1>Our school trip</h1>
   <h3>Fun facts</h3>
   <h2>My best friend</h2>
   <h4>My best friend</h4>
   <p>I love mangoes.</p>
7. 7.♿ Is this heading order correct (no level skipped)?
   <h1> → <h1> → <h1> → <h3> (a) No (b) Yes
8. 8.True or false: in <img>, src sets how tall it is. (a) False (b) True
9. 9.📛 In <a href="x.html">, what is href? (a) an attribute (b) a closing tag (c) an element name (d) a comment
10. 10.🖌️ What colour is behind the letters?
    h1 {
      color: yellow;
      text-align: left;
      font-size: 32px;
      background-color: red;
    } (a) yellow (b) red (c) green
11. 11.📄 Where does <link rel="stylesheet"> go: in the head or in the body? (a) in the head (b) in the body
12. 12.🖼️ Which picture file does the browser load?
    <img src="bus.jpg" alt="Our school bus" width="350"> (a) fort.jpg (b) tiger.jpg (c) Our school bus (d) bus.jpg
13. 13.⚡ What number does this code print?
    let a = 24;
    let b = 9;
    console.log(a - b);
14. 14.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }
15. 15.Which of these is true of <nav>? (a) holds the menu of links (b) is the page’s key part (c) holds a news story (d) sits at the very top
16. 16.📝 On how many lines does the browser show this paragraph?
    <p>Sky is blue<br>Roses are red<br>Birds sing</p>
17. 17.🔍 Which line is missing its closing tag?
    line 1: <h1>Our school trip</h1>
    line 2: <small>Hello, world!</small>
    line 3: <i>Cricket is fun. (a) line 3 (b) line 2 (c) line 1
18. 18.📋 What number does the browser show next to “Orange”?
    <ol start="8">
      <li>Papaya</li>
      <li>Mango</li>
      <li>Grapes</li>
      <li>Banana</li>
      <li>Orange</li>
    </ol>
19. 19.🛡️ Online: is it safe to type a password on http? (a) not safe (b) safe
20. 20.🌗 Is light grey on white easy or hard to read? (a) hard to read (b) easy to read
21. 21.True or false: <h1> goes in the head. (a) False (b) True
22. 22.🎯 Which CSS selector matches this element?
    <div class="big" id="intro">Hello</div> (a) .intro (b) .red (c) #main (d) #intro
23. 23.🔠 How many heading levels does HTML have? (a) 10 (b) 3 (c) 6 (d) 4
24. 24.🔗 Which address opens when you click this link?
    <a href="art.html">About us</a> (a) news.html (b) art.html (c) quiz.html (d) About us
25. 25.Which of these is true of <footer>? (a) is the page’s key part (b) holds the logo and title (c) holds extra side notes (d) sits at the bottom
26. 26.🖌️ What colour are the letters?
    h2 {
      color: black;
      text-align: right;
      background-color: blue;
      font-size: 28px;
    } (a) green (b) blue (c) black
27. 27.Which of these is true of a web browser? (a) opens web pages for us (b) shows line numbers (c) is where we type code (d) answers page requests
28. 28.♿ Does this help everyone, or make the page harder to use: images with no alt? (a) makes it harder (b) helps everyone
29. 29.True or false: to ask before downloading is not safe. (a) True (b) False
30. 30.📝 Which tag holds a whole form? (a) <ol> (b) <form> (c) <table> (d) <input>
31. 31.Which of these is the content? (a) the gap round content (b) space outside the border (c) the line round the box (d) the text or picture
32. 32.🌈 Which colour is rgb(0, 255, 255)? (a) blue (b) magenta (c) black (d) cyan
33. 33.🏷️ Which is the closing tag for <b>? (a) <b/> (b) <b> (c) <\b> (d) </b>
34. 34.True or false: HTML on its own can make bullet lists. (a) True (b) False
35. 35.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) turned off (c) exactly 100px (d) 800px or narrower
36. 36.📄 Where does <a> go: in the head or in the body? (a) in the body (b) in the head
37. 37.True or false: <nav> helps you move around. (a) False (b) True
38. 38.📝 How many paragraphs does this code make?
    <p>My pets</p>
    <p>My best friend</p>
    <p>Rain today</p>
39. 39.🌗 Is yellow on white easy or hard to read? (a) easy to read (b) hard to read
40. 40.🔁 What does this code print?
    let marks = 46;
    if (marks < 31) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Pass (b) Try again

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