Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 153 · 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.📱 Responsive design means a page ___. (a) never changes (b) has no pictures (c) fits every screen (d) is only for laptops
2. 2.📄 Where does <img> go: in the head or in the body? (a) in the body (b) in the head
3. 3.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Colourful Site Styles (c) Creative Sheet System (d) Cascading Style Sheets
4. 4.🔢 On a typical page, from top to bottom, what comes right after “<nav>”? (a) <header> (b) <footer> (c) <main>
5. 5.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 230px;
     padding: 25px;
     border: 3px solid black;
     margin: 20px;
   }
6. 6.🖼️ Does <img> need a closing tag? (a) Yes (b) No
7. 7.🔗 Which words do you click on?
   <a href="art.html">About us</a> (a) art.html (b) About us (c) Contact us (d) href
8. 8.🔍 One closing tag is missing. Which one?
   <strong>Fun facts</strong>
   <h1>Our school trip</h1>
   <h2>Good morning! (a) </i> (b) </strong> (c) </h1> (d) </h2>
9. 9.🎯 Which element does the selector h2 style? (a) <li> (b) <h2 class="menu"> (c) <span id="main"> (d) <div class="menu">
10. 10.True or false: <a href="a.html">Go</a> goes in script.js. (a) True (b) False
11. 11.🧭 Which semantic tag holds the main content? (a) <main> (b) <article> (c) <aside> (d) <header>
12. 12.🔗 Which words do you click on?
    <a href="news.html">Art corner</a> (a) School news (b) href (c) news.html (d) Art corner
13. 13.🔗 Where does this link open?
    <a href="https://example.com">About us</a> (a) in the same tab (b) in a new tab
14. 14.🌍 What is the protocol in this URL?
    http://kids.example.org/index.html (a) kids.example.org (b) http (c) https (d) /index.html
15. 15.🚀 Which file should this code go in: console.log(5 + 2); (a) index.html (b) style.css (c) script.js
16. 16.📝 How many paragraphs does this code make?
    <p>Fun facts</p>
    <p>Good morning!</p>
    <p>My best friend</p>
17. 17.🔍 One closing tag is missing. Which one?
    <h2>The red kite
    <b>Fun facts</b>
    <p>Our school trip</p> (a) </b> (b) </u> (c) </p> (d) </h2>
18. 18.🌍 What is the protocol in this URL?
    http://learn.example.com/maths/tables.html (a) /maths/tables.html (b) learn.example.com (c) https (d) http
19. 19.🖌️ How big is the text, in px?
    h1 {
      font-size: 20px;
      text-align: right;
      background-color: purple;
      color: orange;
    }
20. 20.📦 In the box model, which part is the text or picture? (a) margin (b) border (c) content (d) padding
21. 21.📝 What does a password box show instead of letters? (a) dots (b) numbers (c) capital letters (d) emojis
22. 22.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
23. 23.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 20px;
      border: 4px solid black;
      margin: 15px;
    }
24. 24.🌈 Which colour of light is strongest in rgb(18, 238, 14)? (a) blue (b) red (c) green
25. 25.💬 Does the browser show comments on the page? (a) No (b) Yes
26. 26.♿ What does good colour contrast mean? (a) many bright colours (b) no colours at all (c) only red text (d) text stands out clearly
27. 27.📄 Where does the text of <title> appear? (a) on the browser tab (b) nowhere (c) in a big heading (d) at the bottom
28. 28.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) G (c) F (d) J
29. 29.🧭 Is <section> semantic or not semantic? (a) semantic (b) not semantic
30. 30.Which of these has a closing tag? (a) <img> (b) <input> (c) <br> (d) <p>
31. 31.What is <input type="submit"> for? (a) takes only numbers (b) picks a day (c) sends the form (d) is for an email address
32. 32.🎯 What kind of selector is body? (a) an id selector (b) an element selector (c) a class selector
33. 33.🔠 How many headings are in this code?
    <h1>Rain today</h1>
    <p>My pets</p>
    <p>The red kite</p>
    <h2>Rain today</h2>
34. 34.✍️ Which property is set to center in this rule?
    h1 {
      padding: 8px;
      text-align: center;
      border: 2px solid;
    } (a) center (b) background-color (c) margin (d) text-align
35. 35.📊 In a table, which tag is a row? (a) <th> (b) <tr> (c) <td> (d) <tb>
36. 36.Which of these does JavaScript do? (a) reacts to a button click (b) gives the page structure (c) sets colours and fonts (d) puts a picture on a page
37. 37.⚡ Where does console.log() show its output? (a) in the console (b) in the address bar (c) on the title bar (d) on the printer
38. 38.🔠 Which heading shows the SMALLEST text: <h5>, <h3>, <h6> or <h4>? (a) <h4> (b) <h6> (c) <h5> (d) <h3>
39. 39.🔁 What does this code print?
    let age = 49;
    if (age < 19) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
40. 40.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    }

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