Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 62 · 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.📝 On how many lines does the browser show this paragraph?
   <p>Rivers flow<br>Kites fly high</p>
2. 2.🔁 What is the LAST number this code prints?
   for (let i = 0; i < 7; i = i + 4) {
     console.log(i);
   }
3. 3.📦 In the box model, which part is the gap to other boxes? (a) margin (b) content (c) border (d) padding
4. 4.🌈 Which colour of light is strongest in rgb(182, 98, 7)? (a) red (b) green (c) blue
5. 5.⚖️ What colour is the text of this element?
   <h2 class="note" id="hero">Hi</h2>
   CSS:
   .note { color: purple; }
   .note { color: yellow; } (a) purple (b) yellow (c) blue (d) black
6. 6.🚀 Should file names have spaces, like my page.html? (a) No (b) Yes
7. 7.📋 Which tag goes around each item of a list? (a) <p> (b) <ol> (c) <li> (d) <ul>
8. 8.💬 How does an HTML comment start? (a) <!-- (b) # (c) /* (d) //
9. 9.💬 How many paragraphs show on the page?
   <p>My best friend</p>
   <!-- <p>Fun facts</p> -->
   <p>Good morning!</p>
   <!-- <p>Cricket is fun.</p> -->
   <p>My pets</p>
10. 10.🔗 Which tag makes a clickable link? (a) <link> (b) <a> (c) <img> (d) <p>
11. 11.💬 Which text will NOT show on the page?
    <p>Rain today</p>
    <!-- <p>My best friend</p> -->
    <p>I love mangoes.</p> (a) Rain today (b) I love mangoes. (c) My best friend
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      font-size: 20px;
      font-style: italic;
      width: 300px;
    }
13. 13.🖌️ Where does the text sit on its line?
    li {
      background-color: black;
      color: yellow;
      font-size: 20px;
      text-align: right;
    } (a) in the middle (b) on the left (c) on the right
14. 14.⚡ What does this code print? (Look at the quotes!)
    let x = "8";
    let y = 4;
    console.log(x + y); (a) 12 (b) Error (c) 84
15. 15.📋 How many items does this list show?
    <ul>
      <li>Guava</li>
      <li>Mango</li>
      <li>Jamun</li>
      <li>Papaya</li>
      <li>Grapes</li>
    </ul>
16. 16.🔍 Which is the odd one out? (a) has an address bar (b) colours code to help us (c) shows pages from the web (d) turns HTML into a page
17. 17.📝 What does <hr> draw? (a) a line across the page (b) a picture (c) a table (d) a link
18. 18.⚡ Where does console.log() show its output? (a) in the address bar (b) on the title bar (c) in the console (d) on the printer
19. 19.🌍 What is the domain name in this URL?
    http://www.example.com/index.html (a) /index.html (b) http (c) kids.example.org (d) www.example.com
20. 20.🌍 What finds the server for a domain name like example.com? (a) alt (b) HTML (c) CSS (d) DNS
21. 21.🔐 Is S0lar!Pen#8 a strong or a weak password? (a) weak (b) strong
22. 22.♿ Does this help everyone, or make the page harder to use: write clear link text? (a) makes it harder (b) helps everyone
23. 23.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) the first one (d) neither
24. 24.🖌️ What colour are the letters?
    li {
      background-color: purple;
      font-size: 12px;
      color: green;
      text-align: center;
    } (a) yellow (b) green (c) purple
25. 25.True or false: “link text “click here”” helps everyone use the page. (a) False (b) True
26. 26.What does justify-content: flex-start do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the end (d) packs boxes at the start
27. 27.Which of these goes in the body? (a) <table> (b) <title> (c) <meta charset="utf-8"> (d) <link rel="stylesheet">
28. 28.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
29. 29.🔠 Which tag is used for the main title on a page? (a) <p> (b) <br> (c) <h6> (d) <h1>
30. 30.🔁 Which word runs code only when something is true? (a) let (b) for (c) log (d) if
31. 31.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    }
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-style: italic;
    }
33. 33.📊 In a table, which tag is a row? (a) <tb> (b) <tr> (c) <th> (d) <td>
34. 34.🔠 Are headings shown in bold by default? (a) Yes (b) No
35. 35.🔠 Which heading shows the SMALLEST text: <h1>, <h6>, <h4> or <h5>? (a) <h5> (b) <h6> (c) <h4> (d) <h1>
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 25px;
      border: 1px solid black;
      margin: 5px;
    }
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: 280px;
      padding: 25px;
      border: 1px solid black;
      margin: 20px;
    }
38. 38.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) center (c) flex-start (d) space-between
39. 39.✍️ What is the selector in this CSS rule?
    #top {
      font-weight: bold;
      font-style: italic;
      text-align: center;
    } (a) li (b) font-weight (c) #top (d) italic
40. 40.True or false: a web browser turns HTML into a page. (a) False (b) True

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