Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 587 · 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.🔍 One closing tag is missing. Which one?
   <h3>My best friend</h3>
   <h1>Our school trip
   <strong>My pets</strong> (a) </h3> (b) </strong> (c) </small> (d) </h1>
2. 2.🔐 Is abcd1234 a strong or a weak password? (a) weak (b) strong
3. 3.🚀 Which file should this code go in: h1 { font-size: 32px; } (a) index.html (b) style.css (c) script.js
4. 4.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) green (c) blue (d) red
5. 5.🖼️ Which picture file does the browser load?
   <img src="kite.png" alt="A red kite" width="50"> (a) cake.jpg (b) A red kite (c) kite.png (d) map.png
6. 6.🌈 In #8c0000 the red part is the hex number 8c. What is it as a normal number?
7. 7.📱 The screen is 820px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 22px;
     }
   } (a) No (b) Yes
8. 8.🎯 Which CSS selector matches this element?
   <h1 class="box" id="intro">Hello</h1> (a) h2 (b) h1 (c) .intro (d) #main
9. 9.🖌️ Which CSS property colours behind the text? (a) color (b) font-size (c) background-color (d) text-align
10. 10.⚡ What number does this code print?
    let marks = 11;
    marks = marks + 10;
    marks = marks - 9;
    console.log(marks);
11. 11.📄 Where does <link rel="stylesheet"> go: in the head or in the body? (a) in the head (b) in the body
12. 12.🎯 Which CSS selector matches this element?
    <span class="star" id="intro">Hello</span> (a) #star (b) p (c) .star (d) .intro
13. 13.Which of these is true of <header>? (a) holds a side box of tips (b) holds the logo and title (c) holds extra side notes (d) holds one blog post
14. 14.🔠 Which heading shows the BIGGEST text: <h5>, <h3>, <h6> or <h1>? (a) <h5> (b) <h1> (c) <h3> (d) <h6>
15. 15.🖼️ Which tag puts a picture on a page? (a) <pic> (b) <p> (c) <img> (d) <a>
16. 16.✍️ Which property is set to center in this rule?
    #top {
      font-size: 20px;
      text-align: center;
    } (a) center (b) margin (c) text-align (d) background-color
17. 17.Which of these is the content? (a) space inside the border (b) the text or picture (c) a solid or dotted edge (d) space outside the border
18. 18.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 150px;
      padding: 25px;
      border: 5px solid black;
      margin: 15px;
    }
19. 19.🚀 Which file is best for code that reacts to clicks? (a) style.css (b) script.js (c) index.html (d) notes.txt
20. 20.🔍 Which is the odd one out? (a) counts down a timer (b) changes the page live (c) shows a pop-up message (d) changes the text size
21. 21.⚖️ What colour is the text of this element?
    <h1 class="big" id="main">Hi</h1>
    CSS:
    h1 { color: white; }
    h1 { color: green; } (a) white (b) purple (c) red (d) green
22. 22.⚡ Which JavaScript word shows a pop-up box? (a) let (b) if (c) alert() (d) console.log()
23. 23.Which colour pair is easy to read? (a) white on black (b) red on green (c) yellow on white (d) blue on purple
24. 24.🌗 Is white on black easy or hard to read? (a) easy to read (b) hard to read
25. 25.True or false: .big is a class selector. (a) True (b) False
26. 26.🔢 To build and share your first web page, which comes first: “plan what to show” or “test in a browser”? (a) plan what to show (b) test in a browser
27. 27.📝 Which input type is for an email address? (a) submit (b) email (c) checkbox (d) text
28. 28.True or false: “images with no alt” makes the page harder to use. (a) False (b) True
29. 29.✍️ What is the selector in this CSS rule?
    .note {
      text-align: center;
      padding: 8px;
      font-weight: bold;
    } (a) text-align (b) #top (c) .note (d) 8px
30. 30.True or false: <input type="text"> hides what you type. (a) False (b) True
31. 31.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 4; i++) {
      total = total + 6;
    }
    console.log(total);
32. 32.📄 Where does <img> go: in the head or in the body? (a) in the head (b) in the body
33. 33.🛡️ Before typing a password on a site, check the address starts with ___. (a) https (b) http (c) www (d) ftp
34. 34.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 30px;
      border: 5px solid black;
      margin: 15px;
    }
35. 35.♿ Is this heading order correct (no level skipped)?
    <h1> → <h3> → <h2> → <h3> (a) Yes (b) No
36. 36.📱 What does a media query check? (a) the screen width (b) the page title (c) the time of day (d) the battery level
37. 37.True or false: “colour as the only clue” helps everyone use the page. (a) True (b) False
38. 38.🎯 Which element does the selector div style? (a) <h1 id="top"> (b) <span> (c) <p class="red"> (d) <div class="red">
39. 39.⚡ What does this code print? (Look at the quotes!)
    let x = "4";
    let y = 6;
    console.log(x + y); (a) 46 (b) Error (c) 10
40. 40.📊 How many cells are in each row?
    <table>
      <tr><td>Banana</td><td>Jamun</td></tr>
      <tr><td>Jamun</td><td>Litchi</td></tr>
      <tr><td>Grapes</td><td>Litchi</td></tr>
    </table>

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