Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 397 · 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.🔠 Which heading shows the SMALLEST text: <h2>, <h5>, <h6> or <h3>? (a) <h2> (b) <h6> (c) <h3> (d) <h5>
2. 2.♿ Who uses a screen reader? (a) only teachers (b) only coders (c) only robots (d) people who are blind
3. 3.Which of these has a closing tag? (a) <br> (b) <img> (c) <meta> (d) <b>
4. 4.🧭 Is <main> semantic or not semantic? (a) not semantic (b) semantic
5. 5.🏷️ Every HTML tag starts with which sign? (a) ( (b) < (c) [ (d) {
6. 6.📝 How many <input> tags are in this form?
   <form>
     <input type="checkbox">
     <input type="password">
     <input type="text">
     <input type="submit" value="Send">
   </form>
7. 7.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 240px;
     padding: 25px;
     border: 4px solid black;
     margin: 5px;
   }
8. 8.🏷️ Which is the closing tag for <b>? (a) <b> (b) <b/> (c) <\b> (d) </b>
9. 9.🎯 Can many elements share the same class? (a) Yes (b) No
10. 10.✍️ Which property is set to 300px in this rule?
    .note {
      font-style: italic;
      font-size: 20px;
      color: red;
      width: 300px;
    } (a) font-style (b) color (c) 300px (d) width
11. 11.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
12. 12.🌍 What is the protocol in this URL?
    http://www.example.com/games/chess.html (a) https (b) /games/chess.html (c) www.example.com (d) http
13. 13.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
14. 14.📄 What is the first line of an HTML5 page? (a) <html> (b) <body> (c) <head> (d) <!DOCTYPE html>
15. 15.📝 What does <p> make? (a) a link (b) a paragraph (c) a table (d) a picture
16. 16.♿ Does this help everyone, or make the page harder to use: images with no alt? (a) helps everyone (b) makes it harder
17. 17.🔠 Which heading shows the BIGGEST text: <h1>, <h5>, <h3> or <h2>? (a) <h2> (b) <h1> (c) <h3> (d) <h5>
18. 18.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) center (c) space-between (d) flex-end
19. 19.Which of these is an empty tag? (a) <p> (b) <hr> (c) <h1> (d) <title>
20. 20.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as one space (b) as a dot (c) as 5 spaces (d) as a new line
21. 21.What does justify-content: space-between do? (a) packs boxes at the start (b) puts boxes in the middle (c) packs boxes at the end (d) equal gaps, none at ends
22. 22.⚖️ What colour is the text of this element?
    <p class="box" id="logo">Hi</p>
    CSS:
    p { color: yellow; }
    p { color: green; } (a) green (b) blue (c) purple (d) yellow
23. 23.📦 In the box model, which part is the text or picture? (a) border (b) content (c) margin (d) padding
24. 24.📋 Does this list show bullets or numbers?
    <ul>
      <li>Mango</li>
      <li>Banana</li>
    </ul> (a) bullets (b) numbers
25. 25.💬 Which text will NOT show on the page?
    <p>Cricket is fun.</p>
    <!-- <p>My best friend</p> -->
    <p>My pets</p> (a) My best friend (b) My pets (c) Cricket is fun.
26. 26.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 400px;
      justify-content: center;
    }
    Inside are 3 boxes, each 100px wide (no margins).
27. 27.🖼️ Which picture file does the browser load?
    <img src="kite.png" alt="A red kite" width="250"> (a) A red kite (b) cake.jpg (c) map.png (d) kite.png
28. 28.🖌️ Where does the text sit on its line?
    p {
      background-color: green;
      text-align: left;
      font-size: 20px;
      color: black;
    } (a) in the middle (b) on the left (c) on the right
29. 29.True or false: “link text “click here”” makes the page harder to use. (a) True (b) False
30. 30.What is <input type="submit"> for? (a) picks a day (b) lets you tick many (c) sends the form (d) lets you pick only one
31. 31.🔠 Which heading shows the SMALLEST text: <h5>, <h1>, <h4> or <h2>? (a) <h1> (b) <h4> (c) <h5> (d) <h2>
32. 32.⚡ What does this code print? (Look at the quotes!)
    let x = "3";
    let y = 6;
    console.log(x + y); (a) 36 (b) Error (c) 9
33. 33.⚖️ What colour is the text of this element?
    <h1 class="red" id="end">Hi</h1>
    CSS:
    #end { color: purple; }
    #end { color: orange; } (a) orange (b) white (c) red (d) purple
34. 34.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 130px;
      padding: 25px;
      border: 2px solid black;
      margin: 0px;
    }
35. 35.Which of these is a weak password? (a) riya2014 (b) Rain#Drop_42! (c) Mango#Kite29! (d) S0lar!Pen#8
36. 36.True or false: a code editor hosts websites online. (a) True (b) False
37. 37.True or false: <table> makes a heading cell. (a) True (b) False
38. 38.🏷️ Which is the closing tag for <h3>? (a) <h3> (b) </h3> (c) <\h3> (d) <h3/>
39. 39.🔁 What does this code print?
    let score = 48;
    if (score > 37) {
      console.log("You win");
    } else {
      console.log("Play again");
    } (a) You win (b) Play again
40. 40.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }

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