Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 325 · 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.🎯 Can many elements share the same class? (a) No (b) Yes
2. 2.True or false: the URL asks for a web page. (a) False (b) True
3. 3.🌍 What is the protocol in this URL?
   https://www.example.com/about.html (a) /about.html (b) http (c) https (d) www.example.com
4. 4.True or false: <input type="checkbox"> takes only numbers. (a) False (b) True
5. 5.🌈 Which colour is rgb(255, 0, 0)? (a) red (b) bright green (c) black (d) blue
6. 6.⚖️ What colour is the text of this element?
   <h2 class="big" id="main">Hi</h2>
   CSS:
   h2 { color: green; }
   h2 { color: red; } (a) purple (b) red (c) yellow (d) green
7. 7.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 10px;
     }
   }
8. 8.True or false: <table> goes in the body. (a) False (b) True
9. 9.True or false: #top { color: blue; } goes in index.html. (a) True (b) False
10. 10.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 6 (c) 3 (d) 2
11. 11.🔗 Which words do you click on?
    <a href="maths.html">Maths fun</a> (a) Art corner (b) maths.html (c) Maths fun (d) href
12. 12.🌗 Is yellow on black easy or hard to read? (a) easy to read (b) hard to read
13. 13.True or false: HTML on its own can make a form. (a) False (b) True
14. 14.⚡ Which JavaScript word makes a new variable? (a) console.log() (b) if (c) let (d) alert()
15. 15.True or false: .note is a class selector. (a) False (b) True
16. 16.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="dog.jpg" alt="A happy dog" width="150"> (a) A happy dog (b) dog.jpg (c) width (d) The full moon
17. 17.⚡ What number does this code print?
    let a = 57;
    let b = 1;
    console.log(a - b);
18. 18.📝 How many paragraphs does this code make?
    <p>My best friend</p>
    <p>Our school trip</p>
    <h2>Hello, world!</h2>
19. 19.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h3> → <h5> (a) No (b) Yes
20. 20.True or false: a code editor hosts websites online. (a) True (b) False
21. 21.🖼️ Which picture file does the browser load?
    <img src="bus.jpg" alt="Our school bus" width="150"> (a) Our school bus (b) bus.jpg (c) fort.jpg (d) tiger.jpg
22. 22.True or false: to keep passwords secret is not safe. (a) False (b) True
23. 23.What does font-family do? (a) centres a heading (b) sets the letter colour (c) picks the font style (d) makes letters bigger
24. 24.🔗 Which words do you click on?
    <a href="contact.html">Visit the site</a> (a) Visit the site (b) href (c) contact.html (d) Maths fun
25. 25.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 180px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }
26. 26.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Guava
      <input type="checkbox" name="fruit"> Litchi
      <input type="checkbox" name="fruit"> Banana
    </form>
27. 27.🌈 Which colour is rgb(0, 0, 255)? (a) blue (b) magenta (c) cyan (d) yellow
28. 28.🛡️ Online: is it safe to download from pop-ups? (a) safe (b) not safe
29. 29.True or false: <a> goes in the head. (a) True (b) False
30. 30.🔁 Which loop repeats code a set number of times? (a) else (b) for (c) if (d) let
31. 31.True or false: <ul> goes inside ul or ol. (a) False (b) True
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      width: 300px;
      font-style: italic;
      border: 2px solid;
    }
33. 33.♿ A part of the page is under a <h2> heading. Which tag should its sub-heading use? (a) <h6> (b) <h2> (c) <h1> (d) <h3>
34. 34.🔠 Which heading shows the SMALLEST text: <h6>, <h4>, <h5> or <h1>? (a) <h1> (b) <h5> (c) <h4> (d) <h6>
35. 35.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    }
36. 36.Which of these is the border? (a) the text or picture (b) space inside the border (c) the line round the box (d) the gap to other boxes
37. 37.⚡ A JavaScript file usually ends with which extension? (a) .css (b) .jpg (c) .js (d) .html
38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
39. 39.🌈 In #006700 the green part is the hex number 67. What is it as a normal number?
40. 40.🖌️ What colour are the letters?
    h1 {
      background-color: red;
      font-size: 40px;
      color: yellow;
      text-align: center;
    } (a) red (b) yellow (c) black

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