Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 173 · 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 does good colour contrast mean? (a) no colours at all (b) text stands out clearly (c) many bright colours (d) only red text
2. 2.🧩 Which language makes a form box? (a) JavaScript (b) CSS (c) HTML
3. 3.💬 How many paragraphs show on the page?
   <!-- <p>Fun facts</p> -->
   <p>Our school trip</p>
   <p>Rain today</p>
   <!-- <p>My pets</p> -->
   <p>Hello, world!</p>
4. 4.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 180px;
     padding: 20px;
     border: 2px solid black;
     margin: 5px;
   }
5. 5.⚡ Where does console.log() show its output? (a) on the title bar (b) in the console (c) in the address bar (d) on the printer
6. 6.True or false: <img> is an empty tag. (a) True (b) False
7. 7.True or false: <li> lists steps in order. (a) True (b) False
8. 8.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the body (b) in the head
9. 9.⚡ Which JavaScript word shows a pop-up box? (a) let (b) if (c) alert() (d) for
10. 10.🌍 What is the path in this URL?
    https://kids.example.org/about.html (a) https (b) kids.example.org (c) /about.html (d) /maths/tables.html
11. 11.✍️ In color: blue; which part is the property? (a) ; (b) : (c) blue (d) color
12. 12.📄 Can HTML on its own make links to pages? (a) Yes (b) No
13. 13.♿ A part of the page is under a <h3> heading. Which tag should its sub-heading use? (a) <h4> (b) <h1> (c) <h6> (d) <h3>
14. 14.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 170px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 50px wide (no margins).
15. 15.🚀 Which file should this code go in: console.log(5 + 2); (a) script.js (b) style.css (c) index.html
16. 16.⚡ Which JavaScript word repeats code? (a) let (b) for (c) alert() (d) if
17. 17.✍️ What is the selector in this CSS rule?
    .note {
      margin: 10px;
      font-weight: bold;
    } (a) bold (b) #top (c) .note (d) margin
18. 18.📄 Where does the text of <title> appear? (a) on the browser tab (b) in a big heading (c) at the bottom (d) nowhere
19. 19.✍️ In color: blue; which part is the value? (a) blue (b) color (c) ; (d) :
20. 20.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 16; i = i + 2) {
      console.log(i);
    }
21. 21.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="colour"> Blue
      <input type="radio" name="colour"> Red
      <input type="radio" name="colour"> Orange
      <input type="radio" name="colour"> Green
    </form>
22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: center;
    }
    Inside are 3 boxes, each 100px wide (no margins).
23. 23.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="cake.jpg" alt="Birthday cake" width="50"> (a) width (b) Birthday cake (c) A happy dog (d) cake.jpg
24. 24.🔠 Which heading shows the BIGGEST text: <h6>, <h1>, <h4> or <h3>? (a) <h4> (b) <h1> (c) <h6> (d) <h3>
25. 25.💬 Which text will NOT show on the page?
    <!-- <p>Cricket is fun.</p> -->
    <p>Hello, world!</p>
    <p>I love mangoes.</p> (a) I love mangoes. (b) Cricket is fun. (c) Hello, world!
26. 26.True or false: “colour as the only clue” makes the page harder to use. (a) True (b) False
27. 27.🚀 Which file should this code go in: body { margin: 0; } (a) script.js (b) style.css (c) index.html
28. 28.True or false: .note is a class selector. (a) False (b) True
29. 29.🔗 Where does this link open?
    <a href="quiz.html" target="_blank">Take the quiz</a> (a) in a new tab (b) in the same tab
30. 30.🏷️ Every HTML tag starts with which sign? (a) < (b) ( (c) [ (d) {
31. 31.🔗 Which words do you click on?
    <a href="maths.html">Take the quiz</a> (a) maths.html (b) Take the quiz (c) Play games (d) href
32. 32.♿ Does this help everyone, or make the page harder to use: colour as the only clue? (a) makes it harder (b) helps everyone
33. 33.🏷️ Is </li> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
34. 34.🖌️ What colour is behind the letters?
    h1 {
      color: red;
      background-color: black;
      font-size: 16px;
      text-align: right;
    } (a) black (b) blue (c) red
35. 35.True or false: <br> is an empty tag. (a) True (b) False
36. 36.🖼️ How many pixels wide is the picture drawn?
    <img src="tiger.jpg" alt="A tiger asleep" width="300">
37. 37.🔢 To build and share your first web page, which comes first: “add CSS styles” or “plan what to show”? (a) plan what to show (b) add CSS styles
38. 38.🔢 On a typical page, from top to bottom, which comes first: “<main>” or “<nav>”? (a) <main> (b) <nav>
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-weight: bold;
      font-style: italic;
    }
40. 40.📱 Responsive design means a page ___. (a) has no pictures (b) never changes (c) is only for laptops (d) fits every screen

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