Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 171 · 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 before the first box?
   .row {
     display: flex;
     width: 280px;
     justify-content: center;
   }
   Inside are 4 boxes, each 60px wide (no margins).
2. 2.🔍 Which line is missing its closing tag?
   line 1: <small>The red kite
   line 2: <b>My best friend</b>
   line 3: <strong>Our school trip</strong> (a) line 2 (b) line 1 (c) line 3
3. 3.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 320px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 80px wide (no margins).
4. 4.💬 How many paragraphs show on the page?
   <!-- <p>Hello, world!</p> -->
   <p>My best friend</p>
   <p>I love mangoes.</p>
   <p>Rain today</p>
   <p>Good morning!</p>
5. 5.🌐 Which one colours code to help us? (a) a web server (b) a code editor (c) a web browser
6. 6.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 12px;
     }
   }
7. 7.♿ Does this help everyone, or make the page harder to use: use headings in order? (a) helps everyone (b) makes it harder
8. 8.🖌️ What colour are the letters?
   p {
     color: purple;
     font-size: 28px;
     background-color: red;
     text-align: left;
   } (a) red (b) blue (c) purple
9. 9.📋 Which list tag shows 1, 2, 3 numbers? (a) <li> (b) <ul> (c) <ol>
10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 310px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 100px wide (no margins).
11. 11.True or false: a code editor is where we type code. (a) True (b) False
12. 12.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 60px;
      padding: 5px;
      border: 4px solid black;
      margin: 0px;
    }
13. 13.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Space Facts</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>Try this poha.</p>
    </body>
    </html> (a) Space Facts (b) Try this poha. (c) Welcome! (d) index.html
14. 14.🏷️ Which is the closing tag for <b>? (a) <b> (b) <\b> (c) <b/> (d) </b>
15. 15.True or false: console.log(5 + 2); goes in script.js. (a) False (b) True
16. 16.🔢 To build and share your first web page, which comes first: “plan what to show” or “publish it online”? (a) publish it online (b) plan what to show
17. 17.🔠 Which heading shows the BIGGEST text: <h1>, <h3>, <h6> or <h5>? (a) <h6> (b) <h1> (c) <h3> (d) <h5>
18. 18.📝 How many paragraphs does this code make?
    <p>Good morning!</p>
    <p>Our school trip</p>
    <p>Hello, world!</p>
    <p>My pets</p>
    <p>My pets</p>
    <p>I love mangoes.</p>
19. 19.True or false: <ul> is an ordered list. (a) False (b) True
20. 20.⚡ Which JavaScript word runs code when true? (a) if (b) console.log() (c) let (d) alert()
21. 21.🚀 Which tag loads script.js into a page? (a) <a href="script.js"> (b) <js src="script.js"> (c) <script src="script.js"> (d) <link script.js>
22. 22.🔗 Where does this link open?
    <a href="quiz.html">School news</a> (a) in a new tab (b) in the same tab
23. 23.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="cake.jpg" alt="Birthday cake" width="200"> (a) width (b) A happy dog (c) Birthday cake (d) cake.jpg
24. 24.📊 Which tag gives the table a title? (a) <caption> (b) <th> (c) <table> (d) <td>
25. 25.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 20px;
      border: 2px solid black;
      margin: 5px;
    }
26. 26.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) the later one (d) neither
27. 27.True or false: in <img>, src names the picture file. (a) True (b) False
28. 28.♿ Does this help everyone, or make the page harder to use: write clear link text? (a) makes it harder (b) helps everyone
29. 29.🖼️ Which picture file does the browser load?
    <img src="map.png" alt="Map of India" width="100"> (a) Map of India (b) map.png (c) dog.jpg (d) cake.jpg
30. 30.🔁 What does this code print?
    let marks = 28;
    if (marks < 35) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Pass (b) Try again
31. 31.📝 Does <li> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
32. 32.📝 Which input type picks a day? (a) radio (b) date (c) checkbox (d) submit
33. 33.🔁 What does this code print?
    let age = 43;
    if (age > 43) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
34. 34.📋 Does this list show bullets or numbers?
    <ul>
      <li>Litchi</li>
      <li>Mango</li>
      <li>Guava</li>
    </ul> (a) numbers (b) bullets
35. 35.🖼️ How many pixels wide is the picture drawn?
    <img src="kite.png" alt="A red kite" width="350">
36. 36.📊 How many cells are in each row?
    <table>
      <tr><td>Litchi</td><td>Orange</td><td>Mango</td></tr>
      <tr><td>Litchi</td><td>Mango</td><td>Litchi</td></tr>
    </table>
37. 37.🏷️ Which is the closing tag for <p>? (a) </p> (b) <\p> (c) <p/> (d) <p>
38. 38.Which of these has a closing tag? (a) <b> (b) <br> (c) <input> (d) <meta>
39. 39.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 7; i++) {
      total = total + i;
    }
    console.log(total);
40. 40.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 4; i++) {
      total = total + 6;
    }
    console.log(total);

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