Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 91 · 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 head (b) in the body
2. 2.🔁 What does this code print?
   let age = 5;
   if (age < 45) {
     console.log("teen");
   } else {
     console.log("child");
   } (a) teen (b) child
3. 3.⚡ What number does this code print?
   let a = 50;
   let b = 22;
   console.log(a - b);
4. 4.🖌️ How big is the text, in px?
   li {
     text-align: left;
     font-size: 12px;
     background-color: blue;
     color: orange;
   }
5. 5.🚀 Which file should this code go in: <p>Hello!</p> (a) index.html (b) style.css (c) script.js
6. 6.📄 What is the first line of an HTML5 page? (a) <body> (b) <head> (c) <!DOCTYPE html> (d) <html>
7. 7.📋 Does this list show bullets or numbers?
   <ul>
     <li>Mango</li>
     <li>Jamun</li>
   </ul> (a) numbers (b) bullets
8. 8.Which of these goes in the head? (a) <a> (b) <link rel="stylesheet"> (c) <p> (d) <table>
9. 9.✍️ What is the selector in this CSS rule?
   #top {
     text-align: center;
     width: 300px;
     padding: 8px;
     color: red;
   } (a) 300px (b) text-align (c) #top (d) li
10. 10.✍️ Which sign goes between a property and its value? (a) = (b) - (c) ; (d) :
11. 11.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
12. 12.🎯 Which CSS selector matches this element?
    <li class="menu" id="end">Hello</li> (a) #hero (b) div (c) li (d) #menu
13. 13.⚡ What number does this code print?
    let a = 13;
    let b = 7;
    console.log(a + b);
14. 14.Which of these is padding? (a) a solid or dotted edge (b) the text or picture (c) the gap to other boxes (d) space inside the border
15. 15.🏷️ Which is the closing tag for <h1>? (a) </h1> (b) <h1/> (c) <\h1> (d) <h1>
16. 16.♿ A part of the page is under a <h5> heading. Which tag should its sub-heading use? (a) <h2> (b) <h6> (c) <h1> (d) <h5>
17. 17.📝 Does <li> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
18. 18.Which of these is a weak password? (a) 111111 (b) Kite_Fl1es@Dawn (c) Chai$Cup_19x (d) Blue@Tiger_74
19. 19.True or false: <table> holds the whole table. (a) True (b) False
20. 20.🔍 Which line is missing its closing tag?
    line 1: <u>Rain today</u>
    line 2: <h1>Hello, world!</h1>
    line 3: <em>Cricket is fun. (a) line 3 (b) line 1 (c) line 2
21. 21.🔢 In a basic web page file, which comes first: “<!DOCTYPE html>” or “</head>”? (a) <!DOCTYPE html> (b) </head>
22. 22.⚖️ What colour is the text of this element?
    <h1 class="red" id="intro">Hi</h1>
    CSS:
    #intro { color: black; }
    h1 { color: blue; }
    .red { color: purple; } (a) green (b) blue (c) purple (d) black
23. 23.📊 Which tag makes one table row? (a) <caption> (b) <td> (c) <tr> (d) <table>
24. 24.True or false: HTML shows a pop-up message. (a) False (b) True
25. 25.🔗 What does target="_blank" do to a link? (a) opens it in a new tab (b) makes it blank (c) makes it bold (d) hides the link
26. 26.Which of these has a closing tag? (a) <b> (b) <br> (c) <meta> (d) <img>
27. 27.🛡️ Should you share your password with your best friend? (a) No (b) Yes
28. 28.🚀 Which file should this code go in: console.log(5 + 2); (a) index.html (b) style.css (c) script.js
29. 29.🔢 On a typical page, from top to bottom, which comes FIRST? (a) <nav> (b) <header> (c) <footer> (d) <main>
30. 30.🖌️ Which CSS property sets the letter colour? (a) color (b) font-size (c) background-color (d) text-align
31. 31.🌈 Which colour is #ff0000? (a) blue (b) bright green (c) red (d) white
32. 32.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 180px;
      padding: 25px;
      border: 5px solid black;
      margin: 5px;
    }
33. 33.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
34. 34.⚖️ What colour is the text of this element?
    <p class="red" id="main">Hi</p>
    CSS:
    #main { color: purple; }
    #main { color: blue; } (a) yellow (b) purple (c) black (d) blue
35. 35.🔠 Which heading shows the BIGGEST text: <h5>, <h6>, <h1> or <h4>? (a) <h6> (b) <h4> (c) <h1> (d) <h5>
36. 36.True or false: HTML on its own cannot make headings. (a) False (b) True
37. 37.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 30px;
      border: 4px solid black;
      margin: 20px;
    }
38. 38.🔠 Which heading shows the BIGGEST text: <h1>, <h6>, <h2> or <h3>? (a) <h3> (b) <h6> (c) <h2> (d) <h1>
39. 39.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <h4>Fun facts</h4>
    <p>Good morning!</p>
    <p>Cricket is fun.</p>
    <p>Good morning!</p>
40. 40.True or false: HTML on its own can make a form. (a) False (b) True

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