Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 957 · 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 many pixels wide is the picture drawn?
   <img src="fort.jpg" alt="An old fort" width="350">
2. 2.🧭 Why use <nav> instead of <div> for a menu? (a) it loads faster (b) it adds pictures (c) it makes text red (d) it tells its meaning
3. 3.📦 In the box model, which part is space outside the border? (a) content (b) padding (c) border (d) margin
4. 4.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
5. 5.🖌️ What colour are the letters?
   h1 {
     background-color: green;
     text-align: left;
     color: white;
     font-size: 12px;
   } (a) green (b) purple (c) white
6. 6.🚀 Which file should this code go in: #top { color: blue; } (a) index.html (b) style.css (c) script.js
7. 7.📋 Which list tag is an ordered list? (a) <ol> (b) <li> (c) <ul>
8. 8.💬 Which text will NOT show on the page?
   <!-- <p>The red kite</p> -->
   <p>Good morning!</p>
   <p>My best friend</p>
   <p>Rain today</p> (a) Rain today (b) The red kite (c) Good morning! (d) My best friend
9. 9.🔍 One closing tag is missing. Which one?
   <small>My best friend</small>
   <h1>My pets
   <p>I love mangoes.</p> (a) </p> (b) </h1> (c) </strong> (d) </small>
10. 10.🚀 Which file should this code go in: body { margin: 0; } (a) style.css (b) index.html (c) script.js
11. 11.🔠 Which heading shows the BIGGEST text: <h4>, <h3>, <h2> or <h6>? (a) <h4> (b) <h3> (c) <h6> (d) <h2>
12. 12.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="fort.jpg" alt="An old fort" width="400"> (a) A tiger asleep (b) An old fort (c) fort.jpg (d) width
13. 13.🔗 Which words do you click on?
    <a href="https://example.com">About us</a> (a) About us (b) https://example.com (c) Contact us (d) href
14. 14.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
15. 15.🖼️ Which attribute of <img> describes the picture? (a) alt (b) width (c) height (d) src
16. 16.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="dog.jpg" alt="A happy dog" width="250"> (a) The full moon (b) A happy dog (c) dog.jpg (d) width
17. 17.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) 800px or wider (d) turned off
18. 18.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
19. 19.🔢 In a basic web page file, which comes first: “</body>” or “<head>”? (a) </body> (b) <head>
20. 20.True or false: <td> makes one data cell. (a) False (b) True
21. 21.🌍 What do we call the computer that stores a website? (a) a printer (b) a server (c) a keyboard (d) a mouse
22. 22.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 210px;
      padding: 20px;
      border: 5px solid black;
      margin: 20px;
    }
23. 23.🔠 Which heading shows the BIGGEST text: <h2>, <h6>, <h3> or <h5>? (a) <h2> (b) <h6> (c) <h5> (d) <h3>
24. 24.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <h3>The red kite</h3>
    <p>Good morning!</p>
    <h2>Fun facts</h2>
25. 25.What does justify-content: space-between do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends
26. 26.Which of these is true of a web server? (a) has an address bar (b) opens web pages for us (c) colours code to help us (d) sends pages over the net
27. 27.🔠 Which heading shows the SMALLEST text: <h2>, <h4>, <h3> or <h6>? (a) <h2> (b) <h3> (c) <h4> (d) <h6>
28. 28.✍️ What value is given to color in this rule?
    .box {
      padding: 8px;
      color: red;
      font-size: 20px;
    } (a) red (b) center (c) color (d) 20px
29. 29.🔁 When does the else part run? (a) always (b) never (c) when if is true (d) when if is false
30. 30.💬 Which text will NOT show on the page?
    <!-- <p>Rain today</p> -->
    <p>My pets</p>
    <p>My best friend</p> (a) My best friend (b) My pets (c) Rain today
31. 31.True or false: “use headings in order” makes the page harder to use. (a) True (b) False
32. 32.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) ( ) (d) { }
33. 33.🚀 Should file names have spaces, like my page.html? (a) Yes (b) No
34. 34.📄 Where does <table> go: in the head or in the body? (a) in the body (b) in the head
35. 35.🔍 One closing tag is missing. Which one?
    <h2>Cricket is fun.</h2>
    <em>Rain today
    <strong>Our school trip</strong> (a) </h2> (b) </strong> (c) </h1> (d) </em>
36. 36.🖌️ Where does the text sit on its line?
    h2 {
      background-color: purple;
      text-align: right;
      font-size: 24px;
      color: green;
    } (a) on the left (b) on the right (c) in the middle
37. 37.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="bus.jpg" alt="Our school bus" width="400"> (a) bus.jpg (b) width (c) An old fort (d) Our school bus
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      color: red;
      font-size: 20px;
    }
39. 39.📋 What number does the browser show next to “Mango”?
    <ol>
      <li>Papaya</li>
      <li>Mango</li>
      <li>Banana</li>
      <li>Guava</li>
      <li>Jamun</li>
    </ol>
40. 40.Which colour pair is hard to read? (a) black on white (b) white on black (c) white on dark blue (d) blue on purple

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