Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 986 · 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.📄 Where does <h1> go: in the head or in the body? (a) in the body (b) in the head
2. 2.⚖️ What colour is the text of this element?
   <h2 class="red" id="top">Hi</h2>
   CSS:
   .red { color: black; }
   .red { color: green; } (a) black (b) green (c) white (d) blue
3. 3.🧩 Which language adds space around boxes? (a) HTML (b) CSS (c) JavaScript
4. 4.Which of these is a weak password? (a) 123456 (b) Blue@Tiger_74 (c) S0lar!Pen#8 (d) Chai$Cup_19x
5. 5.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) red (c) green (d) blue
6. 6.🎯 What kind of selector is .big? (a) a class selector (b) an id selector (c) an element selector
7. 7.🧭 Which semantic tag helps you move around? (a) <nav> (b) <main> (c) <aside> (d) <article>
8. 8.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 80px;
     padding: 5px;
     border: 4px solid black;
     margin: 0px;
   }
9. 9.True or false: <ul> lists things in any order. (a) False (b) True
10. 10.♿ Does this help everyone, or make the page harder to use: use headings in order? (a) makes it harder (b) helps everyone
11. 11.🔁 Which loop repeats code a set number of times? (a) else (b) for (c) if (d) let
12. 12.What does font-weight do? (a) makes letters bigger (b) centres a heading (c) makes the text bold (d) sets the letter colour
13. 13.🔗 Where does this link open?
    <a href="art.html" target="_blank">Take the quiz</a> (a) in a new tab (b) in the same tab
14. 14.🔗 Which code links to about.html? (a) <a alt="about.html"> (b) <a href="about.html"> (c) <link about.html> (d) <a src="about.html">
15. 15.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) green (c) black (d) red
16. 16.⚖️ What colour is the text of this element?
    <p class="star" id="end">Hi</p>
    CSS:
    .star { color: black; }
    p { color: blue; }
    #end { color: red; } (a) white (b) red (c) blue (d) black
17. 17.⚖️ What colour is the text of this element?
    <p class="menu" id="logo">Hi</p>
    CSS:
    .menu { color: blue; }
    .menu { color: red; } (a) red (b) green (c) blue (d) yellow
18. 18.Which of these is a strong password? (a) riya2014 (b) 111111 (c) S0lar!Pen#8 (d) iloveyou
19. 19.What is <input type="number"> for? (a) is for one line of words (b) picks a day (c) lets you pick only one (d) takes only numbers
20. 20.📄 Where does <p> go: in the head or in the body? (a) in the head (b) in the body
21. 21.⚡ What does this code show?
    let name = "Arjun";
    console.log("Welcome, " + name + "!"); (a) Welcome, Arjun! (b) Arjun (c) name (d) Welcome, name!
22. 22.✍️ What value is given to font-weight in this rule?
    .note {
      text-align: center;
      font-weight: bold;
      margin: 10px;
      padding: 8px;
    } (a) 2px solid (b) font-weight (c) 300px (d) bold
23. 23.⚡ What number does this code print?
    let coins = 25;
    coins = coins + 16;
    coins = coins - 23;
    console.log(coins);
24. 24.🎯 Which CSS selector matches this element?
    <div class="red" id="end">Hello</div> (a) span (b) div (c) .end (d) .box
25. 25.🖌️ What colour are the letters?
    h2 {
      font-size: 20px;
      color: purple;
      text-align: center;
      background-color: white;
    } (a) purple (b) white (c) red
26. 26.True or false: alert("Hi"); goes in index.html. (a) True (b) False
27. 27.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) Mars is red. (b) index.html (c) Welcome! (d) Class 7 Blog
28. 28.✍️ What is the selector in this CSS rule?
    li {
      font-style: italic;
      padding: 8px;
      text-align: center;
      border: 2px solid;
    } (a) li (b) body (c) font-style (d) 8px
29. 29.⚡ What number does this code print?
    let a = 40;
    let b = 22;
    console.log(a - b);
30. 30.⚖️ What colour is the text of this element?
    <h1 class="menu" id="hero">Hi</h1>
    CSS:
    .menu { color: white; }
    h1 { color: orange; }
    #hero { color: purple; } (a) purple (b) blue (c) white (d) orange
31. 31.📋 Does this list show bullets or numbers?
    <ol>
      <li>Banana</li>
      <li>Grapes</li>
    </ol> (a) numbers (b) bullets
32. 32.📱 Responsive design means a page ___. (a) fits every screen (b) is only for laptops (c) has no pictures (d) never changes
33. 33.🔠 How many headings are in this code?
    <h1>Hello, world!</h1>
    <p>Rain today</p>
    <p>Hello, world!</p>
    <p>Rain today</p>
34. 34.🔒 Is the connection to this address scrambled (encrypted)?
    https://school.example.in/news/today.html (a) Yes (b) No
35. 35.True or false: <table> holds the whole table. (a) False (b) True
36. 36.🧭 Is <main> semantic or not semantic? (a) not semantic (b) semantic
37. 37.⚡ What number does this code print?
    let a = 44;
    let b = 33;
    console.log(a - b);
38. 38.⚡ Which JavaScript word writes in the console? (a) console.log() (b) let (c) alert() (d) for
39. 39.📄 Where does <link rel="stylesheet"> go: in the head or in the body? (a) in the head (b) in the body
40. 40.🔠 Are headings shown in bold by default? (a) Yes (b) No

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