Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 461 · 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.🎯 How many elements on a page should have the same id? (a) 2 (b) any number (c) 1 (d) 5
2. 2.📱 What does a media query check? (a) the battery level (b) the screen width (c) the page title (d) the time of day
3. 3.🎯 Which sign starts a class selector? (a) . (b) @ (c) & (d) #
4. 4.🌗 Is yellow on white easy or hard to read? (a) easy to read (b) hard to read
5. 5.True or false: HTML on its own can count button clicks. (a) False (b) True
6. 6.🔗 Which words do you click on?
   <a href="games.html">Contact us</a> (a) Visit the site (b) Contact us (c) href (d) games.html
7. 7.📋 How many items does this list show?
   <ul>
     <li>Jamun</li>
     <li>Litchi</li>
   </ul>
8. 8.🔁 Which word runs code only when something is true? (a) for (b) if (c) let (d) log
9. 9.📋 Which list shows the steps of a recipe best? (a) <br> (b) <ul> (c) <hr> (d) <ol>
10. 10.🔢 When you open a web page, which comes first: “DNS finds the server” or “the browser shows it”? (a) DNS finds the server (b) the browser shows it
11. 11.📝 Which tag holds a whole form? (a) <ol> (b) <input> (c) <form> (d) <table>
12. 12.⚖️ What colour is the text of this element?
    <h2 class="big" id="hero">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: purple; } (a) green (b) red (c) purple (d) yellow
13. 13.📛 In <a href="x.html">, what is href? (a) a closing tag (b) an attribute (c) an element name (d) a comment
14. 14.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    .star { color: black; }
    .star { color: blue; } (a) green (b) black (c) blue (d) yellow
15. 15.🌐 Which one colours code to help us? (a) a code editor (b) a web browser (c) a web server
16. 16.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
17. 17.🚀 Which file should this code go in: let score = 0; (a) index.html (b) style.css (c) script.js
18. 18.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) turned off (c) 800px or narrower (d) exactly 100px
19. 19.✍️ In color: blue; which part is the property? (a) ; (b) blue (c) color (d) :
20. 20.⚡ Which JavaScript word writes in the console? (a) for (b) let (c) if (d) console.log()
21. 21.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 12px;
      }
    } (a) No (b) Yes
22. 22.📝 How many paragraphs does this code make?
    <p>I love mangoes.</p>
    <h2>I love mangoes.</h2>
    <p>Good morning!</p>
    <p>Hello, world!</p>
23. 23.📋 Does this list show bullets or numbers?
    <ol>
      <li>Mango</li>
      <li>Orange</li>
      <li>Banana</li>
    </ol> (a) numbers (b) bullets
24. 24.✍️ What is the selector in this CSS rule?
    body {
      width: 300px;
      font-weight: bold;
    } (a) bold (b) body (c) .box (d) width
25. 25.What is <input type="radio"> for? (a) lets you tick many (b) takes only numbers (c) lets you pick only one (d) is for one line of words
26. 26.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
27. 27.🔗 Where does this link open?
    <a href="https://example.com">Take the quiz</a> (a) in a new tab (b) in the same tab
28. 28.🛡️ Online: is it safe to download from pop-ups? (a) safe (b) not safe
29. 29.💬 How many paragraphs show on the page?
    <p>Good morning!</p>
    <!-- <p>I love mangoes.</p> -->
    <p>Cricket is fun.</p>
30. 30.🏷️ Which is the closing tag for <small>? (a) <small> (b) <\small> (c) <small/> (d) </small>
31. 31.⚖️ What colour is the text of this element?
    <h1 class="note" id="end">Hi</h1>
    CSS:
    .note { color: yellow; }
    .note { color: green; } (a) yellow (b) purple (c) green (d) orange
32. 32.What is <input type="submit"> for? (a) picks a day (b) sends the form (c) takes only numbers (d) is for one line of words
33. 33.🔢 To build and share your first web page, which comes LAST? (a) add CSS styles (b) write the HTML (c) publish it online (d) test in a browser
34. 34.Which of these is not safe to do online? (a) meet an online stranger (b) use a nickname in games (c) use a strong password (d) think before you post
35. 35.True or false: “label every form box” makes the page harder to use. (a) False (b) True
36. 36.🔍 One closing tag is missing. Which one?
    <h1>Our school trip
    <h3>Cricket is fun.</h3>
    <h2>Fun facts</h2> (a) </h3> (b) </small> (c) </h2> (d) </h1>
37. 37.🌈 Which colour is rgb(0, 255, 255)? (a) bright green (b) blue (c) cyan (d) black
38. 38.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    }
39. 39.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 30px;
      }
    }
40. 40.📝 Which tag makes a big box for many lines of text? (a) <p> (b) <input> (c) <textarea> (d) <br>

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