Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 888 · 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 of these is a weak password? (a) Chai$Cup_19x (b) Mango#Kite29! (c) Rain#Drop_42! (d) abcd1234
2. 2.Which of these is an empty tag? (a) <p> (b) <img> (c) <h1> (d) <li>
3. 3.📝 How many <input> tags are in this form?
   <form>
     <input type="password">
     <input type="email">
     <input type="submit" value="Send">
   </form>
4. 4.⚖️ What colour is the text of this element?
   <p class="red" id="hero">Hi</p>
   CSS:
   p { color: red; }
   p { color: purple; } (a) yellow (b) purple (c) red (d) blue
5. 5.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 8; i++) {
     total = total + i;
   }
   console.log(total);
6. 6.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 260px;
     justify-content: center;
   }
   Inside are 3 boxes, each 40px wide (no margins).
7. 7.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 250px;
     padding: 5px;
     border: 4px solid black;
     margin: 0px;
   }
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   li {
     border: 2px solid;
   }
9. 9.📊 Which tag makes one data cell? (a) <tr> (b) <td> (c) <caption> (d) <table>
10. 10.🔍 Which is the odd one out? (a) makes a form box (b) puts a picture on a page (c) makes headings and lists (d) rounds box corners
11. 11.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="colour"> Green
      <input type="checkbox" name="colour"> Orange
      <input type="checkbox" name="colour"> Pink
      <input type="checkbox" name="colour"> Red
    </form>
12. 12.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
13. 13.🔢 When you open a web page, what comes right after “you type the URL”? (a) the browser shows it (b) DNS finds the server (c) the browser asks it (d) the server sends files
14. 14.📝 Does <p> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
15. 15.🔢 On a typical page, from top to bottom, which comes first: “<main>” or “<footer>”? (a) <main> (b) <footer>
16. 16.⚡ What number does this code print?
    let a = 5;
    let b = 10;
    console.log(a * b);
17. 17.Which of these is an empty tag? (a) <title> (b) <h1> (c) <li> (d) <br>
18. 18.Which of these does HTML do? (a) counts down a timer (b) gives the page structure (c) changes the text size (d) shows a pop-up message
19. 19.🖌️ How big is the text, in px?
    h1 {
      font-size: 36px;
      text-align: left;
      background-color: purple;
      color: orange;
    }
20. 20.✍️ What is the selector in this CSS rule?
    body {
      font-size: 20px;
      background-color: yellow;
      padding: 8px;
    } (a) .box (b) body (c) yellow (d) font-size
21. 21.✍️ What value is given to font-size in this rule?
    h2 {
      font-size: 20px;
      border: 2px solid;
    } (a) yellow (b) center (c) font-size (d) 20px
22. 22.🔍 Which is the odd one out? (a) opens web pages for us (b) shows pages from the web (c) turns HTML into a page (d) sends pages over the net
23. 23.True or false: p is an id selector. (a) False (b) True
24. 24.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) flex-end (c) space-between (d) center
25. 25.⚡ Which JavaScript word writes in the console? (a) if (b) alert() (c) console.log() (d) let
26. 26.🔗 Which attribute holds the address of a link? (a) alt (b) id (c) href (d) src
27. 27.🌈 Which colour is rgb(255, 255, 0)? (a) red (b) yellow (c) bright green (d) white
28. 28.🖌️ What colour are the letters?
    p {
      background-color: blue;
      text-align: left;
      font-size: 40px;
      color: purple;
    } (a) purple (b) blue (c) red
29. 29.True or false: HTML on its own can pick a random number. (a) False (b) True
30. 30.📄 Can HTML on its own count button clicks? (a) No (b) Yes
31. 31.Which colour pair is easy to read? (a) yellow on white (b) yellow on black (c) light grey on white (d) pink on red
32. 32.🎯 What kind of selector is .card? (a) a class selector (b) an element selector (c) an id selector
33. 33.True or false: <p>Hello!</p> goes in style.css. (a) True (b) False
34. 34.✍️ Which property is set to 300px in this rule?
    h1 {
      font-size: 20px;
      margin: 10px;
      width: 300px;
    } (a) font-style (b) width (c) color (d) 300px
35. 35.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 15px;
      border: 5px solid black;
      margin: 10px;
    }
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 180px;
      padding: 20px;
      border: 5px solid black;
      margin: 10px;
    }
37. 37.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 6; i = i + 2) {
      console.log(i);
    }
38. 38.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    }
39. 39.♿ A part of the page is under a <h3> heading. Which tag should its sub-heading use? (a) <h5> (b) <h1> (c) <h4> (d) <h6>
40. 40.🔠 Which heading shows the BIGGEST text: <h2>, <h5>, <h6> or <h3>? (a) <h3> (b) <h6> (c) <h2> (d) <h5>

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