Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 363 · 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.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 18px;
     }
   }
2. 2.🖌️ Which CSS property centres a heading? (a) font-weight (b) font-size (c) font-family (d) text-align
3. 3.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) blue (c) red (d) green
4. 4.📄 Where does the text of <title> appear? (a) at the bottom (b) in a big heading (c) nowhere (d) on the browser tab
5. 5.🚀 Which file should this code go in: <ul><li>Art</li></ul> (a) script.js (b) index.html (c) style.css
6. 6.📄 Where does <p> go: in the head or in the body? (a) in the head (b) in the body
7. 7.🔁 How many numbers does this code print?
   for (let i = 0; i < 13; i = i + 4) {
     console.log(i);
   }
8. 8.🔁 What is the LAST number this code prints?
   for (let i = 0; i < 8; i = i + 3) {
     console.log(i);
   }
9. 9.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 3; i++) {
     total = total + i;
   }
   console.log(total);
10. 10.🔠 How many heading levels does HTML have? (a) 3 (b) 6 (c) 4 (d) 10
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      width: 300px;
      margin: 10px;
    }
12. 12.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    }
13. 13.📄 Where does <a> go: in the head or in the body? (a) in the head (b) in the body
14. 14.🌈 Which hex code is magenta? (a) #0000ff (b) #ff00ff (c) #ff0000 (d) #00ffff
15. 15.🖼️ Which attribute of <img> shows if the image fails? (a) width (b) src (c) alt (d) height
16. 16.🎯 Which sign starts an id selector? (a) . (b) @ (c) & (d) #
17. 17.🖼️ Which attribute of <img> names the picture file? (a) src (b) height (c) width (d) alt
18. 18.📝 What do we need to write HTML? (a) a printer (b) a plain text editor (c) a microphone (d) a paintbrush
19. 19.🌍 Which one stores the site’s files? (a) the URL (b) the browser (c) HTTPS (d) the server
20. 20.🎯 Which element does the selector h2 style? (a) <li> (b) <h2 class="note"> (c) <div class="note"> (d) <span id="intro">
21. 21.📝 Which tag gives a form box a name you can click? (a) <title> (b) <h1> (c) <hr> (d) <label>
22. 22.🔠 Which heading shows the BIGGEST text: <h5>, <h3>, <h1> or <h2>? (a) <h5> (b) <h1> (c) <h3> (d) <h2>
23. 23.📋 Which list tag lists steps in order? (a) <ol> (b) <ul> (c) <li>
24. 24.💬 Which text will NOT show on the page?
    <p>My pets</p>
    <!-- <p>I love mangoes.</p> -->
    <p>Our school trip</p> (a) Our school trip (b) My pets (c) I love mangoes.
25. 25.True or false: <p> is an empty tag. (a) True (b) False
26. 26.🔍 One closing tag is missing. Which one?
    <h2>My pets</h2>
    <p>Our school trip
    <i>My best friend</i> (a) </i> (b) </em> (c) </p> (d) </h2>
27. 27.♿ Does this help everyone, or make the page harder to use: colour as the only clue? (a) helps everyone (b) makes it harder
28. 28.🖌️ What colour is behind the letters?
    h2 {
      color: green;
      background-color: black;
      text-align: right;
      font-size: 32px;
    } (a) black (b) green (c) orange
29. 29.🧭 Which semantic tag holds copyright notes? (a) <article> (b) <footer> (c) <main> (d) <aside>
30. 30.🔠 Which tag is used for the main title on a page? (a) <br> (b) <h1> (c) <h6> (d) <p>
31. 31.🎨 Which tag connects an outside CSS file? (a) <a> (b) <img> (c) <link> (d) <css>
32. 32.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the shorter one (c) the first one (d) neither
33. 33.🌍 What does a web address (URL) tell the browser? (a) how old you are (b) your password (c) the page colour (d) where the page is
34. 34.⚖️ What colour is the text of this element?
    <h2 class="big" id="end">Hi</h2>
    CSS:
    h2 { color: red; }
    #end { color: purple; }
    .big { color: blue; } (a) blue (b) green (c) purple (d) red
35. 35.What is <input type="radio"> for? (a) is for an email address (b) picks a day (c) lets you pick only one (d) lets you tick many
36. 36.📊 Which tag makes a heading cell? (a) <caption> (b) <th> (c) <td> (d) <table>
37. 37.🌗 Is light grey on white easy or hard to read? (a) easy to read (b) hard to read
38. 38.🖌️ How big is the text, in px?
    h2 {
      text-align: right;
      color: yellow;
      font-size: 36px;
      background-color: purple;
    }
39. 39.Which of these goes in the head? (a) <table> (b) <meta charset="utf-8"> (c) <img> (d) <h1>
40. 40.Which of these goes in the body? (a) <link rel="stylesheet"> (b) <p> (c) <meta charset="utf-8"> (d) <title>

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