Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 701 · 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>, <h3>, <h6> or <h4>? (a) <h3> (b) <h4> (c) <h1> (d) <h6>
2. 2.🧭 Who is helped most by semantic tags? (a) only the server (b) screen-reader users (c) only the printer (d) nobody
3. 3.🔗 Which words do you click on?
   <a href="https://example.com">School news</a> (a) href (b) https://example.com (c) Take the quiz (d) School news
4. 4.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) turned off (c) exactly 100px (d) 800px or narrower
5. 5.Which of these is true of a web browser? (a) has an address bar (b) hosts websites online (c) sends pages over the net (d) stores a website’s files
6. 6.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-start (c) flex-end (d) space-between
7. 7.🎯 Which element does the selector #end style? (a) <li id="end"> (b) <li class="end"> (c) <li id="hero"> (d) <div class="box">
8. 8.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Cricket Club</title>
   </head>
   <body>
     <h1>Welcome!</h1>
     <p>Mars is red.</p>
   </body>
   </html> (a) index.html (b) Cricket Club (c) Mars is red. (d) Welcome!
9. 9.What does color do? (a) picks the font style (b) sets the letter colour (c) centres a heading (d) colours behind the text
10. 10.📝 Which input type lets you pick only one? (a) radio (b) date (c) number (d) password
11. 11.True or false: HTML on its own can make links to pages. (a) False (b) True
12. 12.💪 Which flexbox property sets space between boxes? (a) gap (b) display: flex (c) align-items (d) justify-content
13. 13.True or false: HTML reacts to a button click. (a) True (b) False
14. 14.🌗 Is pink on red easy or hard to read? (a) easy to read (b) hard to read
15. 15.🌐 Which one colours code to help us? (a) a web server (b) a code editor (c) a web browser
16. 16.📊 How many cells are in each row?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Jamun</td><td>Papaya</td><td>Papaya</td></tr>
      <tr><td>Orange</td><td>Orange</td><td>Orange</td></tr>
    </table>
17. 17.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
18. 18.🔍 Which is the odd one out? (a) makes a link (b) makes headings and lists (c) puts a picture on a page (d) checks a quiz answer
19. 19.🔗 Where does this link open?
    <a href="about.html">Contact us</a> (a) in a new tab (b) in the same tab
20. 20.📝 Which tag makes a big box for many lines of text? (a) <p> (b) <br> (c) <input> (d) <textarea>
21. 21.🔗 Which address opens when you click this link?
    <a href="games.html">About us</a> (a) about.html (b) About us (c) games.html (d) contact.html
22. 22.📝 How many <input> tags are in this form?
    <form>
      <input type="checkbox">
      <input type="date">
      <input type="submit" value="Send">
    </form>
23. 23.🔠 How many headings are in this code?
    <h1>Hello, world!</h1>
    <h2>My best friend</h2>
    <h3>Hello, world!</h3>
    <p>My pets</p>
    <p>I love mangoes.</p>
24. 24.True or false: “tiny grey text” makes the page harder to use. (a) True (b) False
25. 25.♿ Does this help everyone, or make the page harder to use: use headings in order? (a) makes it harder (b) helps everyone
26. 26.📊 In a table, which tag is a row? (a) <td> (b) <tr> (c) <th> (d) <tb>
27. 27.True or false: <p> has a closing tag. (a) False (b) True
28. 28.🖌️ What colour are the letters?
    li {
      text-align: left;
      background-color: yellow;
      color: black;
      font-size: 24px;
    } (a) yellow (b) orange (c) black
29. 29.🔗 Which attribute holds the address of a link? (a) href (b) alt (c) id (d) src
30. 30.⚡ What number does this code print?
    let a = 51;
    let b = 18;
    console.log(a + b);
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 210px;
      padding: 5px;
      border: 4px solid black;
      margin: 20px;
    }
32. 32.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 230px;
      padding: 10px;
      border: 3px solid black;
      margin: 15px;
    }
33. 33.🌈 Which colour of light is strongest in rgb(170, 17, 38)? (a) red (b) blue (c) green
34. 34.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
35. 35.🔍 Which is the odd one out? (a) reacts to a button click (b) counts down a timer (c) checks a quiz answer (d) sets colours and fonts
36. 36.🔢 On a typical page, from top to bottom, which comes first: “<header>” or “<footer>”? (a) <footer> (b) <header>
37. 37.True or false: HTML on its own can add pictures to a page. (a) False (b) True
38. 38.✍️ CSS declarations go inside which brackets? (a) [ ] (b) ( ) (c) < > (d) { }
39. 39.True or false: <ol> lists steps in order. (a) True (b) False
40. 40.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes

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