Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 192 · 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 paragraphs does this code make?
   <p>Rain today</p>
   <p>Cricket is fun.</p>
   <p>Cricket is fun.</p>
   <h2>Fun facts</h2>
   <h2>Rain today</h2>
   <p>Cricket is fun.</p>
2. 2.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) space-between (c) flex-end (d) center
3. 3.🌈 Hex digits go 0 to 9, then A to which letter? (a) F (b) Z (c) J (d) G
4. 4.⚡ What does this code print? (Look at the quotes!)
   let x = "6";
   let y = 1;
   console.log(x + y); (a) Error (b) 61 (c) 7
5. 5.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
6. 6.🔠 Which heading shows the SMALLEST text: <h2>, <h1>, <h4> or <h3>? (a) <h4> (b) <h2> (c) <h3> (d) <h1>
7. 7.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the start (c) packs boxes at the end (d) puts boxes in the middle
8. 8.🏷️ Is <li> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
9. 9.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 250px;
     padding: 20px;
     border: 4px solid black;
     margin: 0px;
   }
10. 10.💬 Which text will NOT show on the page?
    <!-- <p>The red kite</p> -->
    <p>My pets</p>
    <p>My best friend</p>
    <p>Our school trip</p> (a) Our school trip (b) My pets (c) My best friend (d) The red kite
11. 11.True or false: <title> has a closing tag. (a) True (b) False
12. 12.Which of these is not safe to do online? (a) use a nickname in games (b) share your OTP (c) ask before downloading (d) use a strong password
13. 13.📝 How many <input> tags are in this form?
    <form>
      <input type="checkbox">
      <input type="password">
      <input type="submit" value="Send">
    </form>
14. 14.Which of these is a weak password? (a) iloveyou (b) Mango#Kite29! (c) S0lar!Pen#8 (d) Chai$Cup_19x
15. 15.🌈 Which hex code is red? (a) #000000 (b) #00ffff (c) #ffff00 (d) #ff0000
16. 16.📝 On how many lines does the browser show this paragraph?
    <p>Birds sing<br>Stars shine<br>Roses are red</p>
17. 17.✍️ In color: blue; which part is the value? (a) ; (b) blue (c) color (d) :
18. 18.♿ Which link text is clearest? (a) here (b) link (c) click here (d) Read the fruit facts
19. 19.🔠 How many headings are in this code?
    <h1>Rain today</h1>
    <h4>Good morning!</h4>
    <h2>I love mangoes.</h2>
20. 20.♿ A part of the page is under a <h1> heading. Which tag should its sub-heading use? (a) <h6> (b) <h1> (c) <h2> (d) <h3>
21. 21.🔢 On a typical page, from top to bottom, which comes FIRST? (a) <nav> (b) <header> (c) <main> (d) <footer>
22. 22.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    p { color: red; }
    #top { color: blue; }
    .big { color: black; } (a) red (b) black (c) blue (d) green
23. 23.True or false: in <img>, height tells which image to load. (a) True (b) False
24. 24.♿ What does good colour contrast mean? (a) many bright colours (b) only red text (c) text stands out clearly (d) no colours at all
25. 25.Which of these is true of <main>? (a) holds the logo and title (b) holds the main content (c) holds a side box of tips (d) helps you move around
26. 26.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 5; i++) {
      total = total + 4;
    }
    console.log(total);
27. 27.📝 Does <li> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
28. 28.📝 Which input type lets you pick only one? (a) radio (b) email (c) number (d) checkbox
29. 29.True or false: <li> is one item of a list. (a) False (b) True
30. 30.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="cake.jpg" alt="Birthday cake" width="400"> (a) A happy dog (b) cake.jpg (c) width (d) Birthday cake
31. 31.💬 How many paragraphs show on the page?
    <!-- <p>My pets</p> -->
    <p>Cricket is fun.</p>
    <p>I love mangoes.</p>
32. 32.Which of these does CSS do? (a) makes a form box (b) shows a pop-up message (c) makes headings and lists (d) adds space around boxes
33. 33.True or false: margin is the gap to other boxes. (a) False (b) True
34. 34.🎯 Which element does the selector p style? (a) <h1> (b) <p class="box"> (c) <li id="main"> (d) <h2 class="box">
35. 35.💪 Which flexbox property lines boxes up across? (a) align-items (b) justify-content (c) flex-direction (d) gap
36. 36.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 70px;
      padding: 10px;
      border: 2px solid black;
      margin: 5px;
    }
37. 37.🔗 Which words do you click on?
    <a href="quiz.html">Play games</a> (a) href (b) About us (c) quiz.html (d) Play games
38. 38.🔠 Which heading shows the SMALLEST text: <h2>, <h5>, <h1> or <h6>? (a) <h6> (b) <h5> (c) <h1> (d) <h2>
39. 39.🌍 Which one shows the page to you? (a) the browser (b) the server (c) the URL (d) HTTPS
40. 40.Which colour pair is hard to read? (a) yellow on black (b) yellow on white (c) white on dark blue (d) dark grey on white

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