Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 982 · 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 much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 180px;
     padding: 25px;
     border: 4px solid black;
     margin: 10px;
   }
2. 2.🖼️ Why do we add alt text to an image? (a) to colour it (b) to make it bigger (c) to describe the image (d) to load it faster
3. 3.✍️ How does a CSS comment start? (a) // (b) # (c) /* (d) <!--
4. 4.📝 Which input type lets you pick only one? (a) checkbox (b) radio (c) submit (d) text
5. 5.✍️ Which property is set to 2px solid in this rule?
   .box {
     margin: 10px;
     border: 2px solid;
   } (a) border (b) width (c) font-style (d) 2px solid
6. 6.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) green (d) blue
7. 7.🔤 In “HTML”, what does the L stand for? (a) Language (b) Line (c) Laptop (d) Link
8. 8.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 4; i++) {
     total = total + 9;
   }
   console.log(total);
9. 9.🎯 Can many elements share the same class? (a) Yes (b) No
10. 10.🛡️ Should you share your password with your best friend? (a) Yes (b) No
11. 11.🏷️ Every HTML tag starts with which sign? (a) { (b) [ (c) < (d) (
12. 12.🔁 How many times does this code print “Well done”?
    for (let i = 1; i <= 7; i++) {
      console.log("Well done");
    }
13. 13.♿ Which link text is clearest? (a) click here (b) Read the fruit facts (c) link (d) here
14. 14.🔗 Which address opens when you click this link?
    <a href="news.html">School news</a> (a) School news (b) games.html (c) quiz.html (d) news.html
15. 15.📝 What does <p> make? (a) a picture (b) a link (c) a table (d) a paragraph
16. 16.🚀 Which file is best for code that reacts to clicks? (a) notes.txt (b) style.css (c) index.html (d) script.js
17. 17.🔍 Which is the odd one out? (a) sets colours and fonts (b) lays out the page (c) makes a form box (d) adds space around boxes
18. 18.True or false: <h1> goes in the body. (a) True (b) False
19. 19.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
20. 20.What does text-align do? (a) picks the font style (b) makes the text bold (c) centres a heading (d) sets the letter colour
21. 21.🔗 Which words do you click on?
    <a href="maths.html">Play games</a> (a) href (b) maths.html (c) Play games (d) About us
22. 22.Which of these is margin? (a) the gap round content (b) the line round the box (c) the text or picture (d) space outside the border
23. 23.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) white (d) blue
24. 24.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 530px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
25. 25.🛡️ Before typing a password on a site, check the address starts with ___. (a) ftp (b) http (c) www (d) https
26. 26.🔁 Which word runs code only when something is true? (a) for (b) if (c) let (d) log
27. 27.Which of these is true of a code editor? (a) shows pages from the web (b) answers page requests (c) shows line numbers (d) has an address bar
28. 28.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }
29. 29.⚡ What number does this code print?
    let books = 22;
    books = books + 15;
    books = books - 10;
    console.log(books);
30. 30.📋 What number does the browser show next to “Grapes”?
    <ol start="3">
      <li>Banana</li>
      <li>Grapes</li>
      <li>Mango</li>
    </ol>
31. 31.🔠 Which heading shows the BIGGEST text: <h5>, <h1>, <h4> or <h2>? (a) <h4> (b) <h1> (c) <h5> (d) <h2>
32. 32.🌈 Which hex code is bright green? (a) #000000 (b) #ff0000 (c) #00ff00 (d) #00ffff
33. 33.🔁 How many times does this code print “Well done”?
    for (let i = 3; i < 11; i++) {
      console.log("Well done");
    }
34. 34.📊 Which tag gives the table a title? (a) <td> (b) <table> (c) <tr> (d) <caption>
35. 35.True or false: <p> goes in the head. (a) False (b) True
36. 36.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    }
37. 37.✍️ CSS declarations go inside which brackets? (a) [ ] (b) ( ) (c) { } (d) < >
38. 38.📦 In the box model, which part is the line round the box? (a) padding (b) border (c) content (d) margin
39. 39.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) space-between (c) flex-end (d) center
40. 40.⚡ What number does this code print?
    let a = 29;
    let b = 18;
    console.log(a - b);

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