Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 798 · 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 element does the selector h2 style? (a) <span id="hero"> (b) <div class="note"> (c) <li> (d) <h2 class="note">
2. 2.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 22px;
     }
   } (a) Yes (b) No
3. 3.True or false: <table> makes one data cell. (a) False (b) True
4. 4.🌍 What is the path in this URL?
   https://www.example.com/art/gallery.html (a) /art/gallery.html (b) www.example.com (c) /news/today.html (d) https
5. 5.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 150px;
     padding: 15px;
     border: 5px solid black;
     margin: 10px;
   }
6. 6.⚡ What does alert() show? (a) a new tab (b) a picture (c) a pop-up box (d) a table
7. 7.📝 At most, how many of these can be chosen at the same time?
   <form>
     <input type="radio" name="sport"> Hockey
     <input type="radio" name="sport"> Football
     <input type="radio" name="sport"> Cricket
     <input type="radio" name="sport"> Chess
   </form>
8. 8.📄 Can HTML on its own make headings? (a) Yes (b) No
9. 9.⚡ What number does this code print?
   let a = 40;
   let b = 39;
   console.log(a - b);
10. 10.🌍 What do we call the computer that stores a website? (a) a server (b) a mouse (c) a printer (d) a keyboard
11. 11.📝 Does <br> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
12. 12.🔍 Which is the odd one out? (a) has an address bar (b) opens web pages for us (c) turns HTML into a page (d) stores a website’s files
13. 13.♿ Is this heading order correct (no level skipped)?
    <h1> → <h3> → <h2> → <h2> (a) Yes (b) No
14. 14.Which of these is true of <main>? (a) is the page’s key part (b) holds one blog post (c) holds copyright notes (d) holds a news story
15. 15.📄 Can HTML on its own make bullet lists? (a) Yes (b) No
16. 16.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) G (c) F (d) J
17. 17.✍️ What value is given to text-align in this rule?
    h1 {
      text-align: center;
      font-style: italic;
    } (a) center (b) 10px (c) text-align (d) yellow
18. 18.True or false: the border is the line round the box. (a) False (b) True
19. 19.Which of these is a closing tag? (a) <p> (b) </title> (c) <body> (d) <b>
20. 20.📊 Are <th> cells shown bold and centred by default? (a) Yes (b) No
21. 21.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Art Gallery</title>
    </head>
    <body>
      <h1>Match report</h1>
      <p>Try this poha.</p>
    </body>
    </html> (a) body (b) Art Gallery (c) Try this poha. (d) Match report
22. 22.🖌️ Where does the text sit on its line?
    h2 {
      background-color: orange;
      text-align: right;
      font-size: 28px;
      color: yellow;
    } (a) on the left (b) in the middle (c) on the right
23. 23.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="colour"> Orange
      <input type="checkbox" name="colour"> Blue
      <input type="checkbox" name="colour"> Pink
    </form>
24. 24.💪 Which flexbox property turns on flexbox? (a) gap (b) display: flex (c) align-items (d) flex-direction
25. 25.🔗 Which tag makes a clickable link? (a) <link> (b) <img> (c) <a> (d) <p>
26. 26.💪 Which flexbox property sets space between boxes? (a) display: flex (b) justify-content (c) gap (d) align-items
27. 27.True or false: in <img>, width sets how wide it is. (a) False (b) True
28. 28.True or false: “tiny grey text” helps everyone use the page. (a) False (b) True
29. 29.📊 How many cells does this table have in all?
    <table>
      <tr><td>Jamun</td><td>Litchi</td><td>Orange</td><td>Banana</td></tr>
      <tr><td>Orange</td><td>Orange</td><td>Mango</td><td>Guava</td></tr>
      <tr><td>Orange</td><td>Banana</td><td>Mango</td><td>Litchi</td></tr>
    </table>
30. 30.🧭 Which semantic tag holds the logo and title? (a) <article> (b) <header> (c) <footer> (d) <aside>
31. 31.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) red (c) blue (d) white
32. 32.Which of these is safe to do online? (a) meet an online stranger (b) log out on shared PCs (c) click prize links (d) post your home address
33. 33.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 32px;
      }
    }
34. 34.📋 Which tag goes around each item of a list? (a) <ol> (b) <ul> (c) <p> (d) <li>
35. 35.♿ What does good colour contrast mean? (a) no colours at all (b) many bright colours (c) text stands out clearly (d) only red text
36. 36.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 360px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 80px wide (no margins).
37. 37.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="sport"> Hockey
      <input type="radio" name="sport"> Football
      <input type="radio" name="sport"> Kabaddi
      <input type="radio" name="sport"> Cricket
      <input type="radio" name="sport"> Chess
    </form>
38. 38.🚀 Which file is best for the colours and fonts? (a) script.js (b) photo.jpg (c) style.css (d) index.html
39. 39.What does font-weight do? (a) picks the font style (b) centres a heading (c) makes letters bigger (d) makes the text bold
40. 40.🔠 How many headings are in this code?
    <h1>Cricket is fun.</h1>
    <h3>Hello, world!</h3>
    <h3>I love mangoes.</h3>
    <p>Rain today</p>
    <h3>My best friend</h3>

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