Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 447 · 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 much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 190px;
     padding: 5px;
     border: 1px solid black;
     margin: 15px;
   }
2. 2.⚖️ What colour is the text of this element?
   <h2 class="big" id="logo">Hi</h2>
   CSS:
   h2 { color: red; }
   #logo { color: blue; }
   .big { color: orange; } (a) blue (b) black (c) red (d) orange
3. 3.🎯 Which element does the selector .menu style? (a) <h2 id="menu"> (b) <h2 class="menu"> (c) <h2 class="note"> (d) <li class="big">
4. 4.🔢 To build and share your first web page, what comes right after “add CSS styles”? (a) test in a browser (b) plan what to show (c) write the HTML (d) publish it online
5. 5.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 110px;
     padding: 10px;
     border: 1px solid black;
     margin: 10px;
   }
6. 6.♿ A part of the page is under a <h4> heading. Which tag should its sub-heading use? (a) <h3> (b) <h4> (c) <h6> (d) <h5>
7. 7.🔗 What does target="_blank" do to a link? (a) makes it blank (b) makes it bold (c) opens it in a new tab (d) hides the link
8. 8.True or false: “write clear link text” helps everyone use the page. (a) False (b) True
9. 9.🔗 Where does this link open?
   <a href="games.html" target="_blank">School news</a> (a) in the same tab (b) in a new tab
10. 10.🔠 Which heading shows the SMALLEST text: <h4>, <h2>, <h6> or <h1>? (a) <h4> (b) <h6> (c) <h2> (d) <h1>
11. 11.🏷️ Which is the closing tag for <strong>? (a) <strong/> (b) <\strong> (c) </strong> (d) <strong>
12. 12.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="tiger.jpg" alt="A tiger asleep" width="400"> (a) width (b) A red kite (c) tiger.jpg (d) A tiger asleep
13. 13.🔠 Which tag is used for the main title on a page? (a) <p> (b) <h6> (c) <br> (d) <h1>
14. 14.💬 Does the browser show comments on the page? (a) Yes (b) No
15. 15.🌈 Which colour is rgb(0, 255, 255)? (a) red (b) magenta (c) bright green (d) cyan
16. 16.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
17. 17.🧩 An opening tag + content + a closing tag together make an ___. (a) element (b) attribute (c) address (d) editor
18. 18.🖌️ Which CSS property centres a heading? (a) font-weight (b) color (c) text-align (d) font-family
19. 19.📄 Which part holds everything you see on the page? (a) the body (b) the head (c) the doctype (d) the title
20. 20.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the viewport meta tag (c) the title tag (d) the br tag
21. 21.⚡ What does this code print? (Look at the quotes!)
    let x = "3";
    let y = 7;
    console.log(x + y); (a) 10 (b) Error (c) 37
22. 22.💬 How many paragraphs show on the page?
    <!-- <p>My best friend</p> -->
    <p>Hello, world!</p>
    <p>Cricket is fun.</p>
    <p>I love mangoes.</p>
23. 23.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    }
24. 24.🔠 How many headings are in this code?
    <h1>My best friend</h1>
    <p>My best friend</p>
    <p>Cricket is fun.</p>
25. 25.🌈 Which colour is #0000ff? (a) yellow (b) blue (c) cyan (d) magenta
26. 26.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 16px;
      }
    }
27. 27.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    .note { color: white; }
    p { color: blue; } (a) blue (b) green (c) orange (d) white
28. 28.🔗 Which code links to about.html? (a) <link about.html> (b) <a alt="about.html"> (c) <a href="about.html"> (d) <a src="about.html">
29. 29.🔠 Which heading shows the BIGGEST text: <h5>, <h2>, <h6> or <h3>? (a) <h6> (b) <h3> (c) <h5> (d) <h2>
30. 30.🌍 What does a web address (URL) tell the browser? (a) how old you are (b) where the page is (c) your password (d) the page colour
31. 31.⚖️ What colour is the text of this element?
    <p class="note" id="hero">Hi</p>
    CSS:
    p { color: black; }
    .note { color: purple; } (a) red (b) purple (c) black (d) orange
32. 32.What does font-family do? (a) centres a heading (b) picks the font style (c) colours behind the text (d) makes letters bigger
33. 33.📋 Does this list show bullets or numbers?
    <ul>
      <li>Orange</li>
      <li>Banana</li>
      <li>Papaya</li>
    </ul> (a) bullets (b) numbers
34. 34.🖼️ How many pixels wide is the picture drawn?
    <img src="cake.jpg" alt="Birthday cake" width="100">
35. 35.🔗 Which address opens when you click this link?
    <a href="quiz.html">Contact us</a> (a) games.html (b) Contact us (c) about.html (d) quiz.html
36. 36.Which of these does HTML do? (a) changes the text size (b) reacts to a button click (c) puts a picture on a page (d) counts down a timer
37. 37.🌈 Which hex code is black? (a) #ff0000 (b) #0000ff (c) #ff00ff (d) #000000
38. 38.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) red (c) green (d) blue
39. 39.Which of these is an empty tag? (a) <p> (b) <ul> (c) <title> (d) <img>
40. 40.🌈 In #000063 the blue part is the hex number 63. What is it as a normal number?

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