Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 903 · 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.🧩 An opening tag + content + a closing tag together make an ___. (a) address (b) editor (c) attribute (d) element
2. 2.🌐 Which one shows pages from the web? (a) a web server (b) a code editor (c) a web browser
3. 3.True or false: CSS makes a link. (a) False (b) True
4. 4.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 280px;
     justify-content: center;
   }
   Inside are 2 boxes, each 60px wide (no margins).
5. 5.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) red (c) blue (d) white
6. 6.💬 Which text will NOT show on the page?
   <p>My best friend</p>
   <p>My pets</p>
   <p>Rain today</p>
   <!-- <p>Our school trip</p> --> (a) Our school trip (b) Rain today (c) My best friend (d) My pets
7. 7.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) 600px or narrower (d) exactly 1000px
8. 8.True or false: HTTPS scrambles data on its way. (a) False (b) True
9. 9.⚖️ What colour is the text of this element?
   <h1 class="red" id="main">Hi</h1>
   CSS:
   h1 { color: yellow; }
   #main { color: green; } (a) black (b) green (c) yellow (d) orange
10. 10.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="fruit"> Guava
      <input type="radio" name="fruit"> Banana
      <input type="radio" name="fruit"> Litchi
      <input type="radio" name="fruit"> Papaya
    </form>
11. 11.🌍 What is the domain name in this URL?
    https://www.example.com/about.html (a) /about.html (b) kids.example.org (c) www.example.com (d) https
12. 12.🚀 Which file should this code go in: <img src="cat.png"> (a) style.css (b) script.js (c) index.html
13. 13.📋 Which list shows the steps of a recipe best? (a) <hr> (b) <br> (c) <ul> (d) <ol>
14. 14.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 30px;
      }
    } (a) No (b) Yes
15. 15.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Cascading Style Sheets (c) Creative Sheet System (d) Colourful Site Styles
16. 16.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or wider (c) exactly 100px (d) 800px or narrower
17. 17.🌍 Which program shows a web page to us? (a) a music player (b) a web browser (c) a paint program (d) a calculator
18. 18.📄 Where does <link rel="stylesheet"> go: in the head or in the body? (a) in the head (b) in the body
19. 19.🔠 Which heading shows the SMALLEST text: <h1>, <h5>, <h4> or <h2>? (a) <h5> (b) <h1> (c) <h2> (d) <h4>
20. 20.💬 How does an HTML comment start? (a) /* (b) // (c) <!-- (d) #
21. 21.🔠 Which heading shows the SMALLEST text: <h1>, <h2>, <h3> or <h6>? (a) <h1> (b) <h2> (c) <h6> (d) <h3>
22. 22.💬 Which text will NOT show on the page?
    <!-- <p>Our school trip</p> -->
    <p>My pets</p>
    <p>The red kite</p>
    <p>Good morning!</p> (a) The red kite (b) Good morning! (c) My pets (d) Our school trip
23. 23.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as a dot (b) as a new line (c) as 5 spaces (d) as one space
24. 24.🔠 Which heading shows the BIGGEST text: <h1>, <h6>, <h2> or <h3>? (a) <h1> (b) <h6> (c) <h3> (d) <h2>
25. 25.📋 How many items does this list show?
    <ul>
      <li>Banana</li>
      <li>Papaya</li>
    </ul>
26. 26.🖌️ What colour is behind the letters?
    li {
      color: blue;
      font-size: 40px;
      text-align: right;
      background-color: red;
    } (a) red (b) orange (c) blue
27. 27.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) < > (d) { }
28. 28.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    h1 { color: orange; }
    .menu { color: black; }
    #logo { color: yellow; } (a) orange (b) blue (c) black (d) yellow
29. 29.What does justify-content: space-between do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
30. 30.🔁 How many numbers does this code print?
    for (let i = 0; i < 7; i = i + 3) {
      console.log(i);
    }
31. 31.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
32. 32.True or false: <nav> helps you move around. (a) True (b) False
33. 33.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>My best friend</p> -->
    <p>Hello, world!</p>
34. 34.🌈 Which colour is #ff0000? (a) bright green (b) black (c) yellow (d) red
35. 35.💬 Which text will NOT show on the page?
    <!-- <p>I love mangoes.</p> -->
    <p>Hello, world!</p>
    <p>Cricket is fun.</p> (a) I love mangoes. (b) Cricket is fun. (c) Hello, world!
36. 36.♿ What does good colour contrast mean? (a) only red text (b) many bright colours (c) no colours at all (d) text stands out clearly
37. 37.📋 How many items does this list show?
    <ol>
      <li>Grapes</li>
      <li>Papaya</li>
    </ol>
38. 38.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
39. 39.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) J (c) F (d) Z
40. 40.🔠 Which heading shows the BIGGEST text: <h6>, <h2>, <h5> or <h3>? (a) <h2> (b) <h5> (c) <h3> (d) <h6>

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