Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 721 · 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 #00d300 the green part is the hex number d3. What is it as a normal number?
2. 2.🎯 Which element does the selector li style? (a) <li class="note"> (b) <div> (c) <p id="main"> (d) <span class="note">
3. 3.🖼️ Which tag puts a picture on a page? (a) <img> (b) <a> (c) <pic> (d) <p>
4. 4.True or false: <main> holds extra side notes. (a) True (b) False
5. 5.🏷️ Is </p> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
6. 6.🔡 Are HTML tag names usually written in small letters? (a) Yes (b) No
7. 7.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 18px;
     }
   } (a) No (b) Yes
8. 8.🚀 Which file should this code go in: #top { color: blue; } (a) script.js (b) style.css (c) index.html
9. 9.🔠 Which heading shows the BIGGEST text: <h2>, <h4>, <h3> or <h1>? (a) <h2> (b) <h1> (c) <h4> (d) <h3>
10. 10.✍️ Which property is set to 8px in this rule?
    p {
      font-size: 20px;
      text-align: center;
      padding: 8px;
      border: 2px solid;
    } (a) 8px (b) border (c) padding (d) font-weight
11. 11.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as 5 spaces (b) as a dot (c) as one space (d) as a new line
12. 12.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or narrower (c) 800px or wider (d) exactly 100px
13. 13.🖼️ Which attribute of <img> is read by screen readers? (a) alt (b) width (c) height (d) src
14. 14.🎯 Which CSS selector matches this element?
    <h1 class="big" id="end">Hello</h1> (a) .end (b) h1 (c) .red (d) h2
15. 15.True or false: <header> helps you move around. (a) False (b) True
16. 16.📋 What number does the browser show next to “Orange”?
    <ol start="3">
      <li>Mango</li>
      <li>Guava</li>
      <li>Orange</li>
      <li>Papaya</li>
    </ol>
17. 17.📋 Which list shows the steps of a recipe best? (a) <hr> (b) <ul> (c) <ol> (d) <br>
18. 18.🎯 What kind of selector is p? (a) an element selector (b) an id selector (c) a class selector
19. 19.True or false: “images with no alt” makes the page harder to use. (a) True (b) False
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 30px;
      border: 3px solid black;
      margin: 5px;
    }
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 380px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 100px wide (no margins).
22. 22.💬 How many paragraphs show on the page?
    <p>Fun facts</p>
    <!-- <p>Cricket is fun.</p> -->
    <p>My best friend</p>
23. 23.🔠 How many headings are in this code?
    <h1>Rain today</h1>
    <h2>I love mangoes.</h2>
    <h3>My best friend</h3>
24. 24.⚡ Where does console.log() show its output? (a) on the title bar (b) in the address bar (c) on the printer (d) in the console
25. 25.🔢 On a typical page, from top to bottom, what comes right after “<nav>”? (a) <footer> (b) <main> (c) <header>
26. 26.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    } (a) No (b) Yes
27. 27.⚖️ What colour is the text of this element?
    <p class="box" id="hero">Hi</p>
    CSS:
    .box { color: green; }
    p { color: red; }
    #hero { color: white; } (a) green (b) red (c) white (d) blue
28. 28.🏷️ Is <p> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
29. 29.🔗 Which address opens when you click this link?
    <a href="https://example.com">Take the quiz</a> (a) maths.html (b) Take the quiz (c) art.html (d) https://example.com
30. 30.🔍 One closing tag is missing. Which one?
    <small>Cricket is fun.
    <h1>Fun facts</h1>
    <strong>The red kite</strong> (a) </h3> (b) </h1> (c) </strong> (d) </small>
31. 31.📝 On how many lines does the browser show this paragraph?
    <p>Kites fly high<br>Rivers flow<br>Sky is blue<br>Roses are red</p>
32. 32.♿ What does good colour contrast mean? (a) text stands out clearly (b) many bright colours (c) no colours at all (d) only red text
33. 33.Which of these goes in the body? (a) <link rel="stylesheet"> (b) <title> (c) <meta charset="utf-8"> (d) <p>
34. 34.🔗 Which tag makes a clickable link? (a) <a> (b) <link> (c) <p> (d) <img>
35. 35.🔗 Where does this link open?
    <a href="contact.html" target="_blank">Contact us</a> (a) in the same tab (b) in a new tab
36. 36.🔠 Which heading shows the SMALLEST text: <h4>, <h1>, <h2> or <h5>? (a) <h5> (b) <h2> (c) <h1> (d) <h4>
37. 37.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Art Gallery</title>
    </head>
    <body>
      <h1>All about me</h1>
      <p>Try this poha.</p>
    </body>
    </html> (a) Art Gallery (b) Try this poha. (c) body (d) All about me
38. 38.🧩 Which language shows a pop-up message? (a) CSS (b) JavaScript (c) HTML
39. 39.🔗 Which address opens when you click this link?
    <a href="art.html">Art corner</a> (a) Art corner (b) quiz.html (c) art.html (d) news.html
40. 40.🧭 Who is helped most by semantic tags? (a) nobody (b) screen-reader users (c) only the printer (d) only the server

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