Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 574 · 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.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-end (c) center (d) flex-start
2. 2.🌈 In #000000 the red part is the hex number 00. What is it as a normal number?
3. 3.Which of these is a strong password? (a) Mango#Kite29! (b) 123456 (c) qwerty (d) password
4. 4.🎯 What kind of selector is p? (a) a class selector (b) an id selector (c) an element selector
5. 5.🎨 Which tag holds CSS inside the head? (a) <body> (b) <style> (c) <css> (d) <script>
6. 6.📊 How many heading cells (<th>) does this table have?
   <table>
     <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
     <tr><td>Banana</td><td>Mango</td><td>Litchi</td></tr>
     <tr><td>Guava</td><td>Papaya</td><td>Orange</td></tr>
   </table>
7. 7.💬 How many paragraphs show on the page?
   <p>My pets</p>
   <p>I love mangoes.</p>
   <!-- <p>Our school trip</p> -->
8. 8.📝 How many paragraphs does this code make?
   <p>Rain today</p>
   <h2>Fun facts</h2>
   <h2>My pets</h2>
   <p>Rain today</p>
   <p>The red kite</p>
9. 9.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 340px;
     justify-content: space-between;
   }
   Inside are 3 boxes, each 60px wide (no margins).
10. 10.🔠 Which heading shows the SMALLEST text: <h1>, <h6>, <h3> or <h2>? (a) <h3> (b) <h1> (c) <h6> (d) <h2>
11. 11.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) exactly 1000px (d) 600px or narrower
12. 12.True or false: “use headings in order” makes the page harder to use. (a) False (b) True
13. 13.True or false: <title> goes in the head. (a) False (b) True
14. 14.🔠 Which heading shows the SMALLEST text: <h4>, <h2>, <h5> or <h1>? (a) <h4> (b) <h2> (c) <h1> (d) <h5>
15. 15.💬 Which text will NOT show on the page?
    <p>My best friend</p>
    <p>The red kite</p>
    <p>My pets</p>
    <!-- <p>I love mangoes.</p> --> (a) My pets (b) The red kite (c) My best friend (d) I love mangoes.
16. 16.🧩 Which language counts down a timer? (a) CSS (b) JavaScript (c) HTML
17. 17.What is <input type="email"> for? (a) lets you tick many (b) is for an email address (c) hides what you type (d) takes only numbers
18. 18.🎯 Which element does the selector p style? (a) <p class="red"> (b) <li id="main"> (c) <h1> (d) <h2 class="red">
19. 19.🌗 Is pink on red easy or hard to read? (a) easy to read (b) hard to read
20. 20.Which of these is not safe to do online? (a) log out on shared PCs (b) put secrets in comments (c) use a strong password (d) check for https first
21. 21.🖼️ Which attribute of <img> sets how wide it is? (a) src (b) width (c) alt (d) height
22. 22.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
23. 23.True or false: CSS shows a pop-up message. (a) True (b) False
24. 24.🧭 Is <nav> semantic or not semantic? (a) semantic (b) not semantic
25. 25.📊 Which tag makes one data cell? (a) <table> (b) <tr> (c) <td> (d) <caption>
26. 26.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) center (d) flex-end
27. 27.Which of these goes in the head? (a) <p> (b) <a> (c) <ul> (d) <meta charset="utf-8">
28. 28.Which of these is true of a web browser? (a) colours code to help us (b) answers page requests (c) turns HTML into a page (d) stores a website’s files
29. 29.🔢 To build and share your first web page, what comes right after “add CSS styles”? (a) write the HTML (b) plan what to show (c) test in a browser (d) publish it online
30. 30.📝 Does <br> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
31. 31.🖌️ How big is the text, in px?
    h1 {
      background-color: red;
      color: white;
      font-size: 12px;
      text-align: left;
    }
32. 32.Which of these is an opening tag? (a) </h1> (b) </body> (c) </b> (d) <p>
33. 33.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 12px;
      }
    } (a) Yes (b) No
34. 34.🔍 One closing tag is missing. Which one?
    <h1>Hello, world!
    <strong>My pets</strong>
    <i>Our school trip</i> (a) </strong> (b) </small> (c) </i> (d) </h1>
35. 35.✍️ In color: blue; which part is the value? (a) blue (b) : (c) ; (d) color
36. 36.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
37. 37.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 290px;
      padding: 10px;
      border: 4px solid black;
      margin: 0px;
    }
38. 38.Which of these goes in the head? (a) <title> (b) <ul> (c) <img> (d) <h1>
39. 39.🔠 How many heading levels does HTML have? (a) 4 (b) 10 (c) 3 (d) 6
40. 40.📝 On how many lines does the browser show this paragraph?
    <p>Birds sing<br>Roses are red<br>Kites fly high</p>

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