Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 589 · 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 much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 160px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 60px wide (no margins).
2. 2.🔍 Which line is missing its closing tag?
   line 1: <i>I love mangoes.
   line 2: <em>Good morning!</em>
   line 3: <u>The red kite</u> (a) line 1 (b) line 2 (c) line 3
3. 3.💬 How many paragraphs show on the page?
   <!-- <p>Hello, world!</p> -->
   <p>Good morning!</p>
   <p>The red kite</p>
4. 4.📝 Which input type picks a day? (a) email (b) date (c) text (d) checkbox
5. 5.🔒 Is the connection to this address scrambled (encrypted)?
   http://kids.example.org/art/gallery.html (a) No (b) Yes
6. 6.True or false: <li> shows 1, 2, 3 numbers. (a) False (b) True
7. 7.📄 Where does the text of <title> appear? (a) in a big heading (b) at the bottom (c) nowhere (d) on the browser tab
8. 8.Which of these is true of <article>? (a) holds one blog post (b) holds the logo and title (c) holds the menu of links (d) holds the main content
9. 9.Which of these is an empty tag? (a) <p> (b) <b> (c) <h1> (d) <meta>
10. 10.📄 Which part holds everything you see on the page? (a) the body (b) the doctype (c) the head (d) the title
11. 11.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    p { color: purple; }
    #logo { color: yellow; }
    .big { color: green; } (a) purple (b) green (c) yellow (d) blue
12. 12.⚡ What does this code print? (Look at the quotes!)
    let x = "7";
    let y = 5;
    console.log(x + y); (a) 75 (b) Error (c) 12
13. 13.⚡ What number does this code print?
    let a = 38;
    let b = 16;
    console.log(a + b);
14. 14.♿ Is this heading order correct (no level skipped)?
    <h1> → <h1> → <h3> → <h4> (a) Yes (b) No
15. 15.📄 Can HTML on its own add up two numbers? (a) Yes (b) No
16. 16.True or false: to think before you post is not safe. (a) False (b) True
17. 17.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Banana</td><td>Jamun</td><td>Jamun</td></tr>
    </table>
18. 18.💬 Which text will NOT show on the page?
    <p>I love mangoes.</p>
    <!-- <p>Hello, world!</p> -->
    <p>Good morning!</p> (a) Hello, world! (b) I love mangoes. (c) Good morning!
19. 19.🌍 Which one sends the page back? (a) the browser (b) HTTPS (c) the server (d) the URL
20. 20.🔠 How many headings are in this code?
    <h1>Hello, world!</h1>
    <h4>Hello, world!</h4>
    <h4>Fun facts</h4>
    <p>My pets</p>
    <p>Rain today</p>
21. 21.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Litchi</td><td>Orange</td><td>Jamun</td><td>Banana</td></tr>
    </table>
22. 22.🧭 Is <main> semantic or not semantic? (a) semantic (b) not semantic
23. 23.🌍 What is the domain name in this URL?
    https://www.example.com/art/gallery.html (a) /art/gallery.html (b) https (c) kids.example.org (d) www.example.com
24. 24.📄 Where does <ul> go: in the head or in the body? (a) in the head (b) in the body
25. 25.⚖️ 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
26. 26.🚀 Which program lets you see your web page while you build it? (a) a calculator (b) a web browser (c) a photo viewer (d) a music player
27. 27.🔢 To build and share your first web page, which comes first: “test in a browser” or “plan what to show”? (a) test in a browser (b) plan what to show
28. 28.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 4; i++) {
      total = total + 3;
    }
    console.log(total);
29. 29.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
30. 30.💬 How many paragraphs show on the page?
    <p>Rain today</p>
    <p>My pets</p>
    <p>My best friend</p>
    <!-- <p>Our school trip</p> -->
31. 31.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    h2 { color: purple; }
    .big { color: yellow; }
    #top { color: black; } (a) black (b) blue (c) purple (d) yellow
32. 32.Which of these is an opening tag? (a) <b> (b) </h1> (c) </p> (d) </li>
33. 33.📄 Where does <p> go: in the head or in the body? (a) in the head (b) in the body
34. 34.🎯 Which element does the selector #end style? (a) <span class="end"> (b) <span id="end"> (c) <span id="hero"> (d) <p class="red">
35. 35.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 12px;
      }
    }
36. 36.⚡ What number does this code print?
    let books = 23;
    books = books + 7;
    books = books - 4;
    console.log(books);
37. 37.🔠 Are headings shown in bold by default? (a) No (b) Yes
38. 38.📝 How many <input> tags are in this form?
    <form>
      <input type="text">
      <input type="email">
      <input type="password">
      <input type="submit" value="Send">
    </form>
39. 39.📋 Which list shows the steps of a recipe best? (a) <ul> (b) <ol> (c) <hr> (d) <br>
40. 40.🔗 Which attribute holds the address of a link? (a) src (b) alt (c) id (d) href

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