Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 934 · 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.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) white (d) blue
2. 2.True or false: CSS gives the page structure. (a) False (b) True
3. 3.🚀 Which file should this code go in: score = score + 1; (a) index.html (b) style.css (c) script.js
4. 4.💬 How does an HTML comment end? (a) --> (b) >> (c) */ (d) //
5. 5.🔠 How many headings are in this code?
   <h1>Cricket is fun.</h1>
   <h3>The red kite</h3>
   <p>Good morning!</p>
6. 6.🔢 On a typical page, from top to bottom, which comes first: “<nav>” or “<footer>”? (a) <nav> (b) <footer>
7. 7.🎯 What kind of selector is #hero? (a) an element selector (b) a class selector (c) an id selector
8. 8.🔁 How many times does this code print “Hi”?
   for (let i = 3; i < 9; i++) {
     console.log("Hi");
   }
9. 9.🖼️ How many pixels wide is the picture drawn?
   <img src="tiger.jpg" alt="A tiger asleep" width="50">
10. 10.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    }
11. 11.🎯 What kind of selector is img? (a) an element selector (b) an id selector (c) a class selector
12. 12.True or false: a web browser shows pages from the web. (a) True (b) False
13. 13.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 300px;
      padding: 5px;
      border: 1px solid black;
      margin: 5px;
    }
14. 14.🖌️ Which CSS property colours behind the text? (a) font-family (b) color (c) text-align (d) background-color
15. 15.🔢 On a typical page, from top to bottom, what comes right after “<header>”? (a) <footer> (b) <nav> (c) <main>
16. 16.🔍 Which is the odd one out? (a) changes the page live (b) shows a pop-up message (c) changes the text size (d) reacts to a button click
17. 17.🔐 Is riya2014 a strong or a weak password? (a) strong (b) weak
18. 18.True or false: in <img>, alt shows if the image fails. (a) False (b) True
19. 19.🔍 Which line is missing its closing tag?
    line 1: <h3>Fun facts</h3>
    line 2: <p>Our school trip</p>
    line 3: <b>The red kite (a) line 1 (b) line 3 (c) line 2
20. 20.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    }
21. 21.True or false: <a href="a.html">Go</a> goes in index.html. (a) True (b) False
22. 22.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 12px;
      }
    }
23. 23.🌍 What is the protocol in this URL?
    https://www.example.net/maths/tables.html (a) /maths/tables.html (b) www.example.net (c) http (d) https
24. 24.🖌️ What colour are the letters?
    li {
      background-color: black;
      text-align: left;
      color: blue;
      font-size: 28px;
    } (a) black (b) orange (c) blue
25. 25.🔗 Which attribute holds the address of a link? (a) alt (b) href (c) id (d) src
26. 26.🚀 Which file should this code go in: console.log(5 + 2); (a) script.js (b) style.css (c) index.html
27. 27.💬 Which text will NOT show on the page?
    <p>Hello, world!</p>
    <p>Fun facts</p>
    <!-- <p>Rain today</p> -->
    <p>The red kite</p> (a) The red kite (b) Fun facts (c) Rain today (d) Hello, world!
28. 28.📄 What is the first line of an HTML5 page? (a) <!DOCTYPE html> (b) <head> (c) <html> (d) <body>
29. 29.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 30px;
      border: 5px solid black;
      margin: 15px;
    }
30. 30.⚖️ What colour is the text of this element?
    <h1 class="star" id="main">Hi</h1>
    CSS:
    #main { color: orange; }
    #main { color: white; } (a) red (b) black (c) white (d) orange
31. 31.🌈 Which colour of light is strongest in rgb(65, 192, 86)? (a) green (b) red (c) blue
32. 32.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
33. 33.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) makes it harder (b) helps everyone
34. 34.What does background-color do? (a) sets the letter colour (b) centres a heading (c) colours behind the text (d) makes letters bigger
35. 35.📝 How many <input> tags are in this form?
    <form>
      <input type="text">
      <input type="email">
      <input type="password">
      <input type="checkbox">
      <input type="submit" value="Send">
    </form>
36. 36.🧭 Who is helped most by semantic tags? (a) screen-reader users (b) nobody (c) only the printer (d) only the server
37. 37.True or false: the server sends the page back. (a) False (b) True
38. 38.⚡ Which JavaScript word makes a new variable? (a) console.log() (b) let (c) alert() (d) if
39. 39.💪 Which flexbox property picks row or column? (a) align-items (b) flex-direction (c) display: flex (d) gap
40. 40.True or false: p { color: red; } goes in style.css. (a) True (b) False

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