Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 297 · 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 #001d00 the green part is the hex number 1d. What is it as a normal number?
2. 2.💬 Does the browser show comments on the page? (a) Yes (b) No
3. 3.🖌️ How big is the text, in px?
   h2 {
     background-color: yellow;
     text-align: left;
     color: purple;
     font-size: 40px;
   }
4. 4.💬 How does an HTML comment start? (a) // (b) # (c) /* (d) <!--
5. 5.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or narrower (c) turned off (d) 800px or wider
6. 6.True or false: .box { padding: 8px; } goes in style.css. (a) False (b) True
7. 7.🎨 Which tag connects an outside CSS file? (a) <img> (b) <css> (c) <link> (d) <a>
8. 8.📄 Where does <style> go: in the head or in the body? (a) in the body (b) in the head
9. 9.True or false: the browser shows the page to you. (a) False (b) True
10. 10.📦 In the box model, which part is the gap round content? (a) content (b) border (c) margin (d) padding
11. 11.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="moon.png" alt="The full moon" width="200"> (a) The full moon (b) Our school bus (c) width (d) moon.png
12. 12.🌍 What is the path in this URL?
    http://school.example.in/art/gallery.html (a) http (b) /news/today.html (c) school.example.in (d) /art/gallery.html
13. 13.🧩 Which language shows a pop-up message? (a) HTML (b) JavaScript (c) CSS
14. 14.Which of these is an opening tag? (a) </p> (b) <p> (c) </b> (d) </h1>
15. 15.🔢 On a typical page, from top to bottom, which comes first: “<header>” or “<main>”? (a) <main> (b) <header>
16. 16.⚡ Which tag holds JavaScript in a page? (a) <code> (b) <js> (c) <style> (d) <script>
17. 17.🧭 Which semantic tag holds extra side notes? (a) <main> (b) <footer> (c) <aside> (d) <nav>
18. 18.🔢 On a typical page, from top to bottom, what comes right after “<nav>”? (a) <header> (b) <footer> (c) <main>
19. 19.🚀 Which file should this code go in: .box { padding: 8px; } (a) script.js (b) index.html (c) style.css
20. 20.True or false: in <img>, src tells which image to load. (a) False (b) True
21. 21.🖌️ What colour is behind the letters?
    h2 {
      color: purple;
      font-size: 24px;
      text-align: left;
      background-color: white;
    } (a) orange (b) purple (c) white
22. 22.True or false: <th> holds the whole table. (a) True (b) False
23. 23.🔗 Which words do you click on?
    <a href="maths.html">Visit the site</a> (a) Maths fun (b) href (c) Visit the site (d) maths.html
24. 24.Which of these is true of a web server? (a) turns HTML into a page (b) saves our .html files (c) opens web pages for us (d) hosts websites online
25. 25.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    }
26. 26.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }
27. 27.🔗 Where does this link open?
    <a href="about.html">Take the quiz</a> (a) in the same tab (b) in a new tab
28. 28.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
29. 29.⚖️ What colour is the text of this element?
    <p class="red" id="intro">Hi</p>
    CSS:
    p { color: yellow; }
    .red { color: green; } (a) purple (b) yellow (c) white (d) green
30. 30.🎯 Which element does the selector #main style? (a) <p id="main"> (b) <p id="logo"> (c) <p class="main"> (d) <h1 class="note">
31. 31.🔠 Which heading shows the BIGGEST text: <h4>, <h2>, <h3> or <h1>? (a) <h2> (b) <h3> (c) <h1> (d) <h4>
32. 32.⚡ What does alert() show? (a) a picture (b) a new tab (c) a pop-up box (d) a table
33. 33.♿ What does good colour contrast mean? (a) only red text (b) no colours at all (c) many bright colours (d) text stands out clearly
34. 34.Which colour pair is easy to read? (a) pink on red (b) blue on purple (c) black on white (d) yellow on white
35. 35.🔗 What does target="_blank" do to a link? (a) hides the link (b) opens it in a new tab (c) makes it bold (d) makes it blank
36. 36.🔗 Which words do you click on?
    <a href="news.html">Maths fun</a> (a) Art corner (b) href (c) news.html (d) Maths fun
37. 37.🔗 Where does this link open?
    <a href="news.html">Visit the site</a> (a) in the same tab (b) in a new tab
38. 38.Which of these is true of a code editor? (a) sends pages over the net (b) shows pages from the web (c) is where we type code (d) has an address bar
39. 39.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 30px;
      border: 3px solid black;
      margin: 0px;
    }
40. 40.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Litchi
      <input type="checkbox" name="fruit"> Mango
      <input type="checkbox" name="fruit"> Banana
      <input type="checkbox" name="fruit"> Papaya
      <input type="checkbox" name="fruit"> Guava
    </form>

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