Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 868 · 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 items does this list show?
   <ul>
     <li>Jamun</li>
     <li>Mango</li>
   </ul>
2. 2.🔠 Which heading shows the SMALLEST text: <h5>, <h4>, <h2> or <h3>? (a) <h4> (b) <h5> (c) <h3> (d) <h2>
3. 3.Which of these does CSS do? (a) rounds box corners (b) shows a pop-up message (c) puts a picture on a page (d) checks a quiz answer
4. 4.📝 Does <br> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
5. 5.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) red (c) blue (d) black
6. 6.Which of these is true of <article>? (a) holds the logo and title (b) sits at the very top (c) holds one blog post (d) holds the menu of links
7. 7.📝 On how many lines does the browser show this paragraph?
   <p>Kites fly high<br>Roses are red<br>Stars shine<br>Rivers flow</p>
8. 8.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 6px;
     }
   }
9. 9.🖌️ What colour are the letters?
   h2 {
     background-color: blue;
     font-size: 36px;
     text-align: right;
     color: red;
   } (a) red (b) green (c) blue
10. 10.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <p>Good morning!</p>
    <p>The red kite</p>
    <p>My pets</p>
    <p>My best friend</p>
11. 11.✍️ What is the selector in this CSS rule?
    .note {
      border: 2px solid;
      width: 300px;
      font-style: italic;
      background-color: yellow;
    } (a) 300px (b) .note (c) border (d) #top
12. 12.🔢 To build and share your first web page, which comes LAST? (a) add CSS styles (b) publish it online (c) plan what to show (d) write the HTML
13. 13.🖌️ Which CSS property makes the text bold? (a) color (b) font-weight (c) font-family (d) text-align
14. 14.🔠 Which heading shows the SMALLEST text: <h3>, <h1>, <h5> or <h2>? (a) <h2> (b) <h1> (c) <h3> (d) <h5>
15. 15.🚀 Which file should this code go in: console.log(5 + 2); (a) style.css (b) script.js (c) index.html
16. 16.📝 Which input type picks a day? (a) text (b) checkbox (c) radio (d) date
17. 17.True or false: <img> goes in the body. (a) True (b) False
18. 18.True or false: <table> makes one data cell. (a) True (b) False
19. 19.📄 Where does <title> go: in the head or in the body? (a) in the body (b) in the head
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 190px;
      padding: 5px;
      border: 1px solid black;
      margin: 10px;
    }
21. 21.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 4; i++) {
      total = total + i;
    }
    console.log(total);
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      background-color: yellow;
      text-align: center;
    }
23. 23.💬 How many paragraphs show on the page?
    <p>Good morning!</p>
    <p>The red kite</p>
    <p>I love mangoes.</p>
    <p>My pets</p>
    <!-- <p>Our school trip</p> -->
24. 24.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as one space (b) as a new line (c) as 5 spaces (d) as a dot
25. 25.🌐 Which one colours code to help us? (a) a web server (b) a code editor (c) a web browser
26. 26.🌍 What is the path in this URL?
    https://school.example.in/art/gallery.html (a) /art/gallery.html (b) https (c) school.example.in (d) /news/today.html
27. 27.True or false: #logo is an element selector. (a) True (b) False
28. 28.💬 How does an HTML comment end? (a) // (b) >> (c) */ (d) -->
29. 29.🧭 Which semantic tag holds a side box of tips? (a) <header> (b) <main> (c) <nav> (d) <aside>
30. 30.📝 What does <br> do? (a) makes text bold (b) makes a list (c) adds a picture (d) starts a new line
31. 31.📋 Which tag goes around each item of a list? (a) <p> (b) <li> (c) <ul> (d) <ol>
32. 32.🖌️ How big is the text, in px?
    p {
      background-color: blue;
      font-size: 12px;
      text-align: left;
      color: purple;
    }
33. 33.♿ What does good colour contrast mean? (a) only red text (b) many bright colours (c) text stands out clearly (d) no colours at all
34. 34.Which of these is not safe to do online? (a) log out on shared PCs (b) tell a trusted adult (c) post your home address (d) use a strong password
35. 35.Which of these is true of <nav>? (a) holds extra side notes (b) holds the logo and title (c) holds a news story (d) helps you move around
36. 36.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or wider (c) 600px or narrower (d) exactly 1000px
37. 37.🔠 Which heading shows the SMALLEST text: <h3>, <h6>, <h5> or <h1>? (a) <h6> (b) <h5> (c) <h3> (d) <h1>
38. 38.🔗 Which words do you click on?
    <a href="quiz.html">School news</a> (a) quiz.html (b) Take the quiz (c) href (d) School news
39. 39.True or false: <input type="date"> lets you tick many. (a) True (b) False
40. 40.Which of these is an empty tag? (a) <p> (b) <img> (c) <li> (d) <ul>

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