Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 409 · 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 414px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 16px;
     }
   } (a) No (b) Yes
2. 2.⚖️ What colour is the text of this element?
   <h2 class="note" id="hero">Hi</h2>
   CSS:
   h2 { color: blue; }
   h2 { color: white; } (a) orange (b) white (c) red (d) blue
3. 3.🧭 Is <aside> semantic or not semantic? (a) not semantic (b) semantic
4. 4.🎯 Which CSS selector matches this element?
   <p class="big" id="top">Hello</p> (a) p (b) .top (c) #intro (d) #big
5. 5.♿ Which link text is clearest? (a) here (b) link (c) click here (d) Read the fruit facts
6. 6.🔗 Which address opens when you click this link?
   <a href="about.html">About us</a> (a) About us (b) about.html (c) https://example.com (d) contact.html
7. 7.🔢 To build and share your first web page, which comes first: “write the HTML” or “test in a browser”? (a) test in a browser (b) write the HTML
8. 8.🔢 In a basic web page file, which comes first: “<!DOCTYPE html>” or “</body>”? (a) <!DOCTYPE html> (b) </body>
9. 9.🔢 When you open a web page, what comes right after “you type the URL”? (a) the server sends files (b) the browser shows it (c) DNS finds the server (d) the browser asks it
10. 10.✍️ In color: blue; which part is the value? (a) color (b) ; (c) : (d) blue
11. 11.🎨 Which attribute adds CSS inside one tag? (a) style (b) src (c) href (d) alt
12. 12.💬 How does an HTML comment start? (a) // (b) <!-- (c) # (d) /*
13. 13.📱 Responsive design means a page ___. (a) has no pictures (b) never changes (c) is only for laptops (d) fits every screen
14. 14.🔗 Which attribute holds the address of a link? (a) alt (b) href (c) src (d) id
15. 15.📄 Where does <title> go: in the head or in the body? (a) in the body (b) in the head
16. 16.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Grapes</td><td>Banana</td><td>Guava</td><td>Papaya</td></tr>
      <tr><td>Mango</td><td>Papaya</td><td>Mango</td><td>Mango</td></tr>
      <tr><td>Banana</td><td>Litchi</td><td>Orange</td><td>Mango</td></tr>
    </table>
17. 17.True or false: “skipping heading levels” helps everyone use the page. (a) False (b) True
18. 18.📊 Which tag makes one table row? (a) <caption> (b) <tr> (c) <table> (d) <td>
19. 19.🖼️ Which tag puts a picture on a page? (a) <pic> (b) <img> (c) <a> (d) <p>
20. 20.💪 Which flexbox property spaces boxes along a row? (a) align-items (b) gap (c) justify-content (d) display: flex
21. 21.🔗 Which code links to about.html? (a) <a href="about.html"> (b) <a alt="about.html"> (c) <a src="about.html"> (d) <link about.html>
22. 22.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Space Facts</title>
    </head>
    <body>
      <h1>My drawings</h1>
      <p>Try this poha.</p>
    </body>
    </html> (a) index.html (b) Space Facts (c) My drawings (d) Try this poha.
23. 23.📝 What does <br> do? (a) makes a list (b) adds a picture (c) makes text bold (d) starts a new line
24. 24.Which of these is true of <header>? (a) holds copyright notes (b) sits at the very top (c) holds the menu of links (d) holds a side box of tips
25. 25.🔍 Which is the odd one out? (a) opens web pages for us (b) is where we type code (c) has an address bar (d) shows pages from the web
26. 26.🏷️ Every HTML tag starts with which sign? (a) < (b) ( (c) [ (d) {
27. 27.💬 Which text will NOT show on the page?
    <!-- <p>Hello, world!</p> -->
    <p>Our school trip</p>
    <p>Good morning!</p> (a) Our school trip (b) Good morning! (c) Hello, world!
28. 28.🌈 Which colour is #00ffff? (a) blue (b) red (c) cyan (d) magenta
29. 29.🌐 Which one sends pages over the net? (a) a web browser (b) a code editor (c) a web server
30. 30.📄 Where does the text of <title> appear? (a) nowhere (b) at the bottom (c) on the browser tab (d) in a big heading
31. 31.🖌️ Where does the text sit on its line?
    li {
      background-color: red;
      color: purple;
      text-align: right;
      font-size: 36px;
    } (a) on the right (b) in the middle (c) on the left
32. 32.Which of these has a closing tag? (a) <img> (b) <meta> (c) <p> (d) <hr>
33. 33.🔁 How many times does this code print “Well done”?
    for (let i = 3; i < 10; i++) {
      console.log("Well done");
    }
34. 34.🔢 On a typical page, from top to bottom, which comes LAST? (a) <main> (b) <footer> (c) <header> (d) <nav>
35. 35.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) the first one (d) neither
36. 36.🌗 Is red on green easy or hard to read? (a) hard to read (b) easy to read
37. 37.🎯 Which sign starts an id selector? (a) . (b) # (c) @ (d) &
38. 38.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    h2 { color: white; }
    h2 { color: green; } (a) red (b) white (c) green (d) blue
39. 39.True or false: <title> goes in the head. (a) True (b) False
40. 40.🎯 What kind of selector is #hero? (a) a class selector (b) an id selector (c) an element selector

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