Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 641 · 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.🖌️ How big is the text, in px?
   p {
     background-color: black;
     color: yellow;
     text-align: right;
     font-size: 16px;
   }
2. 2.📋 Which list tag lists things in any order? (a) <ul> (b) <ol> (c) <li>
3. 3.✍️ Which sign goes between a property and its value? (a) : (b) = (c) ; (d) -
4. 4.🎯 Which element does the selector .note style? (a) <span class="big"> (b) <p class="red"> (c) <span id="note"> (d) <span class="note">
5. 5.🔍 Which is the odd one out? (a) rounds box corners (b) makes a link (c) adds space around boxes (d) changes the text size
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   .box {
     text-align: center;
     font-weight: bold;
     width: 300px;
   }
7. 7.🌈 In #180000 the red part is the hex number 18. What is it as a normal number?
8. 8.📝 Does <input> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
9. 9.📱 The screen is 820px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 8px;
     }
   } (a) No (b) Yes
10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
11. 11.True or false: the server sends the page back. (a) True (b) False
12. 12.💪 Which flexbox property turns on flexbox? (a) justify-content (b) align-items (c) display: flex (d) gap
13. 13.Which of these is a weak password? (a) 111111 (b) Kite_Fl1es@Dawn (c) Chai$Cup_19x (d) Blue@Tiger_74
14. 14.🖌️ Where does the text sit on its line?
    h2 {
      text-align: left;
      color: blue;
      background-color: black;
      font-size: 20px;
    } (a) in the middle (b) on the right (c) on the left
15. 15.⚡ Where does console.log() show its output? (a) on the printer (b) in the console (c) in the address bar (d) on the title bar
16. 16.⚡ What number does this code print?
    let apples = 29;
    apples = apples + 11;
    apples = apples - 7;
    console.log(apples);
17. 17.✍️ How does a CSS comment start? (a) <!-- (b) /* (c) // (d) #
18. 18.🖌️ Which CSS property colours behind the text? (a) text-align (b) color (c) font-weight (d) background-color
19. 19.📊 Which tag makes one table row? (a) <tr> (b) <td> (c) <caption> (d) <th>
20. 20.🔍 One closing tag is missing. Which one?
    <h1>My pets
    <strong>Fun facts</strong>
    <h2>I love mangoes.</h2> (a) </p> (b) </h1> (c) </h2> (d) </strong>
21. 21.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 5; i = i + 4) {
      console.log(i);
    }
22. 22.What does background-color do? (a) centres a heading (b) colours behind the text (c) sets the letter colour (d) picks the font style
23. 23.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <p>Rain today</p>
    <p>The red kite</p>
24. 24.📋 Which list suits a shopping list in any order? (a) <ul> (b) <ol> (c) <br> (d) <hr>
25. 25.✍️ What is the selector in this CSS rule?
    body {
      font-size: 20px;
      font-style: italic;
    } (a) body (b) .box (c) italic (d) font-size
26. 26.💬 Does the browser show comments on the page? (a) No (b) Yes
27. 27.🔗 Where does this link open?
    <a href="games.html">Visit the site</a> (a) in the same tab (b) in a new tab
28. 28.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>Planets</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) Planets (b) index.html (c) I like to read. (d) Class 7 Blog
29. 29.🧭 Who is helped most by semantic tags? (a) nobody (b) only the printer (c) screen-reader users (d) only the server
30. 30.⚡ What does this code show?
    let name = "Kabir";
    console.log("Hello, " + name + "!"); (a) Hello, name! (b) name (c) Hello, Kabir! (d) Kabir
31. 31.🔢 To build and share your first web page, which comes first: “write the HTML” or “add CSS styles”? (a) add CSS styles (b) write the HTML
32. 32.♿ Does this help everyone, or make the page harder to use: add alt text to images? (a) makes it harder (b) helps everyone
33. 33.🌍 Which one scrambles data on its way? (a) the browser (b) HTTPS (c) the URL (d) the server
34. 34.True or false: the border is the line round the box. (a) False (b) True
35. 35.🔠 Which heading shows the SMALLEST text: <h2>, <h1>, <h3> or <h6>? (a) <h1> (b) <h3> (c) <h2> (d) <h6>
36. 36.🌐 Which one saves our .html files? (a) a web browser (b) a web server (c) a code editor
37. 37.🔠 How many heading levels does HTML have? (a) 10 (b) 4 (c) 3 (d) 6
38. 38.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 120px;
      padding: 25px;
      border: 2px solid black;
      margin: 10px;
    }
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
40. 40.✍️ CSS declarations go inside which brackets? (a) ( ) (b) { } (c) < > (d) [ ]

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