Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 3 · 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.📦 In the box model, which part is the line round the box? (a) content (b) margin (c) border (d) padding
2. 2.🎯 Which sign starts an id selector? (a) . (b) @ (c) & (d) #
3. 3.⚖️ What colour is the text of this element?
   <h2 class="note" id="hero">Hi</h2>
   CSS:
   .note { color: purple; }
   #hero { color: blue; }
   h2 { color: black; } (a) purple (b) black (c) blue (d) orange
4. 4.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 90px;
     padding: 30px;
     border: 1px solid black;
     margin: 15px;
   }
5. 5.📝 At most, how many of these can be chosen at the same time?
   <form>
     <input type="checkbox" name="sport"> Hockey
     <input type="checkbox" name="sport"> Cricket
     <input type="checkbox" name="sport"> Chess
     <input type="checkbox" name="sport"> Football
   </form>
6. 6.🖌️ Where does the text sit on its line?
   h2 {
     background-color: white;
     font-size: 24px;
     color: purple;
     text-align: left;
   } (a) on the right (b) on the left (c) in the middle
7. 7.🔗 What does target="_blank" do to a link? (a) makes it blank (b) hides the link (c) makes it bold (d) opens it in a new tab
8. 8.Which of these is true of a code editor? (a) opens web pages for us (b) turns HTML into a page (c) answers page requests (d) colours code to help us
9. 9.🔠 How many headings are in this code?
   <h1>Hello, world!</h1>
   <p>Rain today</p>
   <h2>My best friend</h2>
   <p>My best friend</p>
   <h4>I love mangoes.</h4>
10. 10.🏷️ Is <h1> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
11. 11.📊 Which tag gives the table a title? (a) <td> (b) <tr> (c) <caption> (d) <table>
12. 12.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Banana</td><td>Jamun</td></tr>
    </table>
13. 13.True or false: <li> goes inside ul or ol. (a) False (b) True
14. 14.🚀 Which file should this code go in: alert(score); (a) script.js (b) style.css (c) index.html
15. 15.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
16. 16.⚖️ What colour is the text of this element?
    <h1 class="menu" id="top">Hi</h1>
    CSS:
    .menu { color: green; }
    .menu { color: yellow; } (a) green (b) yellow (c) orange (d) black
17. 17.🌍 Which one stores the site’s files? (a) the server (b) the URL (c) HTTPS (d) the browser
18. 18.🖼️ Why do we add alt text to an image? (a) to make it bigger (b) to describe the image (c) to load it faster (d) to colour it
19. 19.💬 Why do coders write comments? (a) to add colour (b) to show pictures (c) to make links (d) to leave notes
20. 20.✍️ Which sign ends each CSS declaration? (a) , (b) . (c) ; (d) :
21. 21.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) helps everyone (b) makes it harder
22. 22.📝 Does <meta> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
23. 23.Which colour pair is easy to read? (a) pink on red (b) white on black (c) yellow on white (d) light grey on white
24. 24.True or false: HTML on its own cannot count button clicks. (a) False (b) True
25. 25.📋 Which list shows the steps of a recipe best? (a) <hr> (b) <ol> (c) <ul> (d) <br>
26. 26.🔗 Which tag makes a clickable link? (a) <img> (b) <link> (c) <p> (d) <a>
27. 27.🖼️ Does <img> need a closing tag? (a) Yes (b) No
28. 28.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 60px;
      padding: 25px;
      border: 2px solid black;
      margin: 15px;
    }
29. 29.🔗 Which code links to about.html? (a) <a href="about.html"> (b) <a alt="about.html"> (c) <link about.html> (d) <a src="about.html">
30. 30.🎯 What kind of selector is #main? (a) an element selector (b) a class selector (c) an id selector
31. 31.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 110px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
32. 32.Which of these is padding? (a) space inside the border (b) the text or picture (c) the gap to other boxes (d) a solid or dotted edge
33. 33.🔍 Which is the odd one out? (a) makes a link (b) puts a picture on a page (c) makes a form box (d) counts down a timer
34. 34.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
35. 35.🔡 Are HTML tag names usually written in small letters? (a) No (b) Yes
36. 36.🌈 Which hex code is red? (a) #000000 (b) #ff0000 (c) #00ffff (d) #ffffff
37. 37.🎨 A CSS file usually ends with which extension? (a) .css (b) .png (c) .html (d) .js
38. 38.📄 Which part holds everything you see on the page? (a) the doctype (b) the head (c) the body (d) the title
39. 39.True or false: <header> helps you move around. (a) True (b) False
40. 40.🔍 Which line is missing its closing tag?
    line 1: <h3>Our school trip</h3>
    line 2: <h1>Hello, world!
    line 3: <strong>My pets</strong> (a) line 3 (b) line 2 (c) line 1

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