Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 909 · 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 headings are in this code?
   <h1>The red kite</h1>
   <p>I love mangoes.</p>
   <h4>Our school trip</h4>
   <h4>Rain today</h4>
2. 2.📄 Can HTML on its own make headings? (a) Yes (b) No
3. 3.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 260px;
     justify-content: space-between;
   }
   Inside are 3 boxes, each 40px wide (no margins).
4. 4.📄 Where does <table> go: in the head or in the body? (a) in the body (b) in the head
5. 5.🔁 How many times does this code print “Welcome”?
   for (let i = 3; i <= 12; i++) {
     console.log("Welcome");
   }
6. 6.🎯 Which sign starts a class selector? (a) # (b) . (c) @ (d) &
7. 7.🌈 In #000024 the blue part is the hex number 24. What is it as a normal number?
8. 8.Which of these is padding? (a) the gap to other boxes (b) space outside the border (c) a solid or dotted edge (d) space inside the border
9. 9.🔗 What does target="_blank" do to a link? (a) hides the link (b) opens it in a new tab (c) makes it blank (d) makes it bold
10. 10.🛡️ Before typing a password on a site, check the address starts with ___. (a) www (b) https (c) http (d) ftp
11. 11.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="moon.png" alt="The full moon" width="50"> (a) Our school bus (b) moon.png (c) width (d) The full moon
12. 12.Which of these is safe to do online? (a) download from pop-ups (b) use a strong password (c) meet an online stranger (d) post your home address
13. 13.Which of these has a closing tag? (a) <p> (b) <br> (c) <hr> (d) <meta>
14. 14.True or false: a code editor has an address bar. (a) False (b) True
15. 15.True or false: HTTPS stores the site’s files. (a) True (b) False
16. 16.🌗 Is white on black easy or hard to read? (a) easy to read (b) hard to read
17. 17.True or false: console.log(5 + 2); goes in index.html. (a) False (b) True
18. 18.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h2> → <h3> (a) No (b) Yes
19. 19.🖼️ Does <img> need a closing tag? (a) Yes (b) No
20. 20.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
21. 21.💪 Which flexbox property picks row or column? (a) gap (b) align-items (c) flex-direction (d) justify-content
22. 22.⚖️ What colour is the text of this element?
    <h1 class="note" id="logo">Hi</h1>
    CSS:
    h1 { color: red; }
    h1 { color: white; } (a) white (b) black (c) orange (d) red
23. 23.📝 How many paragraphs does this code make?
    <p>My best friend</p>
    <p>I love mangoes.</p>
    <h2>Hello, world!</h2>
    <p>Hello, world!</p>
    <p>Fun facts</p>
24. 24.🔍 Which line is missing its closing tag?
    line 1: <p>Hello, world!</p>
    line 2: <h2>The red kite</h2>
    line 3: <b>My pets (a) line 3 (b) line 2 (c) line 1
25. 25.🖼️ Which tag puts a picture on a page? (a) <pic> (b) <img> (c) <p> (d) <a>
26. 26.⚡ Which JavaScript word makes a new variable? (a) let (b) console.log() (c) for (d) alert()
27. 27.🌈 Which colour of light is strongest in rgb(189, 87, 52)? (a) red (b) blue (c) green
28. 28.🔠 How many <h1> headings should a page usually have? (a) 6 (b) 3 (c) 1 (d) 10
29. 29.✍️ What value is given to font-weight in this rule?
    h2 {
      font-weight: bold;
      background-color: yellow;
    } (a) font-weight (b) 2px solid (c) 300px (d) bold
30. 30.🔁 How many numbers does this code print?
    for (let i = 0; i < 12; i = i + 2) {
      console.log(i);
    }
31. 31.⚡ Which tag holds JavaScript in a page? (a) <script> (b) <code> (c) <js> (d) <style>
32. 32.Which of these goes in the body? (a) <style> (b) <img> (c) <link rel="stylesheet"> (d) <title>
33. 33.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    }
34. 34.✍️ Which sign goes between a property and its value? (a) = (b) ; (c) : (d) -
35. 35.🏷️ Which is the closing tag for <strong>? (a) </strong> (b) <strong/> (c) <\strong> (d) <strong>
36. 36.📝 How many paragraphs does this code make?
    <p>Hello, world!</p>
    <h2>My best friend</h2>
    <p>My pets</p>
37. 37.Which of these is a strong password? (a) abcd1234 (b) qwerty (c) password (d) S0lar!Pen#8
38. 38.🌈 In #fa0000 the red part is the hex number fa. What is it as a normal number?
39. 39.True or false: <h1> has a closing tag. (a) True (b) False
40. 40.What does justify-content: center do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end

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