Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 32 · 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.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 24px;
     }
   }
2. 2.🖼️ How many pixels wide is the picture drawn?
   <img src="map.png" alt="Map of India" width="250">
3. 3.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 300px;
     justify-content: center;
   }
   Inside are 4 boxes, each 60px wide (no margins).
4. 4.✍️ How many declarations (property: value pairs) are in this rule?
   li {
     font-weight: bold;
     padding: 8px;
     margin: 10px;
   }
5. 5.📝 Which tag gives a form box a name you can click? (a) <label> (b) <title> (c) <hr> (d) <h1>
6. 6.📋 Does this list show bullets or numbers?
   <ul>
     <li>Litchi</li>
     <li>Banana</li>
   </ul> (a) bullets (b) numbers
7. 7.🔗 Which address opens when you click this link?
   <a href="about.html">Play games</a> (a) https://example.com (b) contact.html (c) about.html (d) Play games
8. 8.🌈 Which hex code is red? (a) #00ffff (b) #ff00ff (c) #ff0000 (d) #ffffff
9. 9.✍️ Which property is set to bold in this rule?
   h1 {
     width: 300px;
     border: 2px solid;
     font-weight: bold;
     text-align: center;
   } (a) bold (b) border (c) width (d) font-weight
10. 10.🖼️ Why do we add alt text to an image? (a) to load it faster (b) to describe the image (c) to make it bigger (d) to colour it
11. 11.🔗 Which tag makes a clickable link? (a) <img> (b) <link> (c) <p> (d) <a>
12. 12.💬 Does the browser show comments on the page? (a) Yes (b) No
13. 13.Which of these is an empty tag? (a) <p> (b) <li> (c) <h1> (d) <hr>
14. 14.True or false: “colour as the only clue” helps everyone use the page. (a) True (b) False
15. 15.♿ Does this help everyone, or make the page harder to use: add alt text to images? (a) makes it harder (b) helps everyone
16. 16.🛡️ Online: is it safe to think before you post? (a) safe (b) not safe
17. 17.🖼️ Does <img> need a closing tag? (a) No (b) Yes
18. 18.⚖️ What colour is the text of this element?
    <h1 class="menu" id="intro">Hi</h1>
    CSS:
    h1 { color: red; }
    .menu { color: orange; } (a) green (b) orange (c) blue (d) red
19. 19.True or false: alert(score); goes in index.html. (a) True (b) False
20. 20.True or false: padding is space inside the border. (a) False (b) True
21. 21.🔗 Which words do you click on?
    <a href="art.html">Play games</a> (a) href (b) About us (c) art.html (d) Play games
22. 22.🖼️ Which picture file does the browser load?
    <img src="dog.jpg" alt="A happy dog" width="400"> (a) dog.jpg (b) bus.jpg (c) A happy dog (d) moon.png
23. 23.🔠 Which heading shows the SMALLEST text: <h1>, <h2>, <h4> or <h5>? (a) <h5> (b) <h1> (c) <h4> (d) <h2>
24. 24.✍️ Which property is set to bold in this rule?
    h1 {
      font-weight: bold;
      padding: 8px;
    } (a) font-weight (b) border (c) width (d) bold
25. 25.🔐 Is 123456 a strong or a weak password? (a) weak (b) strong
26. 26.🌍 What is the path in this URL?
    http://learn.example.com/about.html (a) http (b) /maths/tables.html (c) /about.html (d) learn.example.com
27. 27.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the br tag (c) the hr tag (d) the viewport meta tag
28. 28.🌍 What does a web address (URL) tell the browser? (a) where the page is (b) the page colour (c) how old you are (d) your password
29. 29.🔍 One closing tag is missing. Which one?
    <h1>Our school trip
    <h2>Good morning!</h2>
    <u>Rain today</u> (a) </h2> (b) </h1> (c) </u> (d) </i>
30. 30.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
31. 31.True or false: <li> is one item of a list. (a) True (b) False
32. 32.♿ Which link text is clearest? (a) here (b) Read the fruit facts (c) link (d) click here
33. 33.🖼️ Which tag puts a picture on a page? (a) <p> (b) <img> (c) <pic> (d) <a>
34. 34.✍️ How does a CSS comment start? (a) // (b) /* (c) <!-- (d) #
35. 35.⚖️ What colour is the text of this element?
    <h2 class="box" id="top">Hi</h2>
    CSS:
    #top { color: white; }
    #top { color: red; } (a) white (b) blue (c) orange (d) red
36. 36.Which colour pair is hard to read? (a) white on black (b) dark grey on white (c) blue on purple (d) yellow on black
37. 37.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 90px;
      padding: 10px;
      border: 2px solid black;
      margin: 15px;
    }
38. 38.🖌️ Which CSS property centres a heading? (a) text-align (b) font-size (c) color (d) background-color
39. 39.🔢 In a basic web page file, which comes LAST? (a) <html> (b) </body> (c) <!DOCTYPE html> (d) </html>
40. 40.✍️ Which property is set to bold in this rule?
    body {
      font-weight: bold;
      background-color: yellow;
    } (a) border (b) font-weight (c) bold (d) width

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