Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 381 · 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: <h1>, <h2>, <h3> or <h4>? (a) <h2> (b) <h3> (c) <h1> (d) <h4>
2. 2.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 22px;
     }
   } (a) No (b) Yes
3. 3.🌈 Which colour is #000000? (a) blue (b) red (c) black (d) magenta
4. 4.🌐 Which one shows pages from the web? (a) a code editor (b) a web server (c) a web browser
5. 5.True or false: to meet an online stranger is safe. (a) True (b) False
6. 6.🔗 Which address opens when you click this link?
   <a href="games.html">Contact us</a> (a) Contact us (b) contact.html (c) games.html (d) about.html
7. 7.📋 Which list tag shows 1, 2, 3 numbers? (a) <li> (b) <ul> (c) <ol>
8. 8.💬 How many paragraphs show on the page?
   <p>Hello, world!</p>
   <p>My best friend</p>
   <!-- <p>Good morning!</p> -->
   <p>Cricket is fun.</p>
9. 9.Which of these is an empty tag? (a) <img> (b) <title> (c) <p> (d) <ul>
10. 10.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="kite.png" alt="A red kite" width="350"> (a) kite.png (b) A red kite (c) Map of India (d) width
11. 11.🌈 Which hex code is yellow? (a) #00ffff (b) #ff0000 (c) #ffff00 (d) #00ff00
12. 12.Which of these is the border? (a) the text or picture (b) the line round the box (c) space outside the border (d) space inside the border
13. 13.🌈 In #820000 the red part is the hex number 82. What is it as a normal number?
14. 14.True or false: p { color: red; } goes in style.css. (a) True (b) False
15. 15.🔗 Where does this link open?
    <a href="games.html">Maths fun</a> (a) in the same tab (b) in a new tab
16. 16.🧭 Who is helped most by semantic tags? (a) only the printer (b) only the server (c) nobody (d) screen-reader users
17. 17.📋 What number does the browser show next to “Guava”?
    <ol>
      <li>Mango</li>
      <li>Papaya</li>
      <li>Banana</li>
      <li>Orange</li>
      <li>Guava</li>
      <li>Litchi</li>
    </ol>
18. 18.💬 Which text will NOT show on the page?
    <!-- <p>My pets</p> -->
    <p>Rain today</p>
    <p>Hello, world!</p>
    <p>Good morning!</p> (a) Rain today (b) My pets (c) Hello, world! (d) Good morning!
19. 19.Which of these goes in the body? (a) <style> (b) <h1> (c) <link rel="stylesheet"> (d) <title>
20. 20.True or false: the border is the text or picture. (a) True (b) False
21. 21.🏷️ Which is the closing tag for <b>? (a) <\b> (b) </b> (c) <b> (d) <b/>
22. 22.🖼️ Which attribute of <img> describes the picture? (a) width (b) alt (c) src (d) height
23. 23.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>Planets</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) Planets (b) index.html (c) My Hobbies (d) I like to read.
24. 24.♿ Who uses a screen reader? (a) only robots (b) only coders (c) only teachers (d) people who are blind
25. 25.🛡️ Should you share your password with your best friend? (a) Yes (b) No
26. 26.💬 How does an HTML comment end? (a) */ (b) // (c) --> (d) >>
27. 27.🌈 Which colour is #00ffff? (a) magenta (b) black (c) blue (d) cyan
28. 28.🔢 On a typical page, from top to bottom, which comes first: “<main>” or “<footer>”? (a) <main> (b) <footer>
29. 29.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 32px;
      }
    }
30. 30.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 32px;
      }
    } (a) Yes (b) No
31. 31.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 240px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 40px wide (no margins).
32. 32.✍️ Which sign ends each CSS declaration? (a) ; (b) . (c) : (d) ,
33. 33.⚡ What number does this code print?
    let books = 15;
    books = books + 13;
    books = books - 25;
    console.log(books);
34. 34.⚡ Which JavaScript word writes in the console? (a) if (b) console.log() (c) alert() (d) let
35. 35.True or false: .star is an element selector. (a) True (b) False
36. 36.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 50px wide (no margins).
37. 37.🔢 To build and share your first web page, what comes right after “plan what to show”? (a) add CSS styles (b) publish it online (c) test in a browser (d) write the HTML
38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 4 boxes, each 50px wide (no margins).
39. 39.Which of these does JavaScript do? (a) rounds box corners (b) reacts to a button click (c) makes a form box (d) puts a picture on a page
40. 40.🧩 Which language shows a pop-up message? (a) JavaScript (b) HTML (c) CSS

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