Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 891 · 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>, <h5>, <h2> or <h6>? (a) <h5> (b) <h6> (c) <h2> (d) <h1>
2. 2.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 30px;
     }
   } (a) No (b) Yes
3. 3.⚖️ What colour is the text of this element?
   <h2 class="note" id="top">Hi</h2>
   CSS:
   .note { color: purple; }
   .note { color: red; } (a) blue (b) green (c) red (d) purple
4. 4.Which of these is not safe to do online? (a) tell a trusted adult (b) check for https first (c) click prize links (d) use a strong password
5. 5.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) flex-start (c) center (d) space-between
6. 6.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) close it, tell an adult (b) click it twice (c) share it with friends (d) type the password
7. 7.⚡ Which JavaScript word writes in the console? (a) alert() (b) let (c) console.log() (d) if
8. 8.🖼️ Which picture file does the browser load?
   <img src="tiger.jpg" alt="A tiger asleep" width="300"> (a) tiger.jpg (b) kite.png (c) A tiger asleep (d) map.png
9. 9.🔗 Which address opens when you click this link?
   <a href="art.html">Visit the site</a> (a) quiz.html (b) news.html (c) art.html (d) Visit the site
10. 10.📄 Can HTML on its own add pictures to a page? (a) Yes (b) No
11. 11.True or false: HTML on its own can make bullet lists. (a) True (b) False
12. 12.🔢 In a basic web page file, which comes first: “<!DOCTYPE html>” or “<body>”? (a) <body> (b) <!DOCTYPE html>
13. 13.What does justify-content: flex-end do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the end (d) packs boxes at the start
14. 14.True or false: <img> goes in the body. (a) True (b) False
15. 15.📊 How many cells are in each row?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Grapes</td><td>Grapes</td><td>Banana</td></tr>
      <tr><td>Grapes</td><td>Guava</td><td>Grapes</td></tr>
    </table>
16. 16.🖌️ What colour are the letters?
    li {
      background-color: black;
      text-align: left;
      font-size: 20px;
      color: orange;
    } (a) blue (b) orange (c) black
17. 17.🔠 Which heading shows the BIGGEST text: <h1>, <h6>, <h2> or <h5>? (a) <h5> (b) <h2> (c) <h1> (d) <h6>
18. 18.💬 How does an HTML comment start? (a) // (b) /* (c) <!-- (d) #
19. 19.True or false: <li> lists things in any order. (a) True (b) False
20. 20.🖼️ Which attribute of <img> sets how wide it is? (a) alt (b) height (c) src (d) width
21. 21.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 12px;
      }
    }
22. 22.💬 How many paragraphs show on the page?
    <!-- <p>My pets</p> -->
    <p>The red kite</p>
    <!-- <p>Rain today</p> -->
    <!-- <p>My best friend</p> -->
23. 23.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 180px;
      padding: 5px;
      border: 5px solid black;
      margin: 15px;
    }
24. 24.🖌️ Where does the text sit on its line?
    p {
      background-color: yellow;
      color: white;
      text-align: right;
      font-size: 40px;
    } (a) on the left (b) in the middle (c) on the right
25. 25.🔢 To build and share your first web page, what comes right after “add CSS styles”? (a) test in a browser (b) write the HTML (c) plan what to show (d) publish it online
26. 26.📝 On how many lines does the browser show this paragraph?
    <p>Rivers flow<br>Birds sing<br>Sky is blue<br>Kites fly high</p>
27. 27.💬 Which text will NOT show on the page?
    <p>Cricket is fun.</p>
    <p>I love mangoes.</p>
    <p>Our school trip</p>
    <!-- <p>My pets</p> --> (a) Our school trip (b) Cricket is fun. (c) My pets (d) I love mangoes.
28. 28.📋 Which list shows the steps of a recipe best? (a) <hr> (b) <ul> (c) <ol> (d) <br>
29. 29.♿ Who uses a screen reader? (a) only teachers (b) only robots (c) only coders (d) people who are blind
30. 30.True or false: the content is the text or picture. (a) True (b) False
31. 31.🖼️ Which picture file does the browser load?
    <img src="moon.png" alt="The full moon" width="50"> (a) The full moon (b) fort.jpg (c) moon.png (d) bus.jpg
32. 32.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 10; i++) {
      total = total + i;
    }
    console.log(total);
33. 33.🎯 Which CSS selector matches this element?
    <p class="red" id="logo">Hello</p> (a) .box (b) h1 (c) #logo (d) .logo
34. 34.🧭 Why use <nav> instead of <div> for a menu? (a) it adds pictures (b) it makes text red (c) it tells its meaning (d) it loads faster
35. 35.🔗 Which code links to about.html? (a) <a alt="about.html"> (b) <a src="about.html"> (c) <a href="about.html"> (d) <link about.html>
36. 36.🔗 Where does this link open?
    <a href="https://example.com">Maths fun</a> (a) in the same tab (b) in a new tab
37. 37.📛 In <a href="x.html">, what is href? (a) an element name (b) a comment (c) an attribute (d) a closing tag
38. 38.📄 Where does <link rel="stylesheet"> go: in the head or in the body? (a) in the head (b) in the body
39. 39.Which of these is padding? (a) the text or picture (b) the gap round content (c) space outside the border (d) the line round the box
40. 40.📋 Which list tag goes inside ul or ol? (a) <li> (b) <ul> (c) <ol>

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