Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 778 · 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 wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 300px;
     padding: 20px;
     border: 2px solid black;
     margin: 0px;
   }
2. 2.🖼️ How many pixels wide is the picture drawn?
   <img src="fort.jpg" alt="An old fort" width="100">
3. 3.🔠 Which heading shows the SMALLEST text: <h6>, <h3>, <h2> or <h5>? (a) <h6> (b) <h3> (c) <h2> (d) <h5>
4. 4.📝 How many paragraphs does this code make?
   <p>Fun facts</p>
   <p>My best friend</p>
   <p>The red kite</p>
5. 5.📊 How many heading cells (<th>) does this table have?
   <table>
     <tr><th>Name</th><th>Fruit</th></tr>
     <tr><td>Banana</td><td>Banana</td></tr>
   </table>
6. 6.📝 How many paragraphs does this code make?
   <p>My best friend</p>
   <h2>My pets</h2>
   <h2>Hello, world!</h2>
   <p>My best friend</p>
   <p>I love mangoes.</p>
7. 7.🔠 Which tag is the least important heading? (a) <h6> (b) <h3> (c) <h1> (d) <p>
8. 8.🔢 When you open a web page, which comes LAST? (a) the browser shows it (b) the browser asks it (c) you type the URL (d) DNS finds the server
9. 9.📊 In a table, which tag is a row? (a) <tb> (b) <td> (c) <tr> (d) <th>
10. 10.🖌️ Which CSS property makes letters bigger? (a) font-size (b) background-color (c) font-weight (d) text-align
11. 11.📄 Where does <img> go: in the head or in the body? (a) in the body (b) in the head
12. 12.♿ Who uses a screen reader? (a) only teachers (b) only coders (c) only robots (d) people who are blind
13. 13.📊 How many cells are in each row?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Mango</td><td>Banana</td><td>Guava</td></tr>
      <tr><td>Banana</td><td>Grapes</td><td>Papaya</td></tr>
    </table>
14. 14.True or false: <ol> shows 1, 2, 3 numbers. (a) False (b) True
15. 15.🌈 Which colour is rgb(255, 255, 255)? (a) white (b) yellow (c) red (d) blue
16. 16.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
17. 17.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) center (d) flex-end
18. 18.🎯 Which element does the selector span style? (a) <p> (b) <h1 class="box"> (c) <h2 id="logo"> (d) <span class="box">
19. 19.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
20. 20.Which of these is the content? (a) a solid or dotted edge (b) the gap round content (c) the text or picture (d) space outside the border
21. 21.True or false: <ul><li>Art</li></ul> goes in style.css. (a) True (b) False
22. 22.🔁 How many numbers does this code print?
    for (let i = 0; i < 7; i = i + 3) {
      console.log(i);
    }
23. 23.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) gap (c) align-items (d) display: flex
24. 24.Which of these goes in the head? (a) <title> (b) <a> (c) <table> (d) <ul>
25. 25.🖌️ Which CSS property sets the letter colour? (a) background-color (b) font-weight (c) text-align (d) color
26. 26.💪 Which flexbox property picks row or column? (a) align-items (b) display: flex (c) justify-content (d) flex-direction
27. 27.True or false: <p> has a closing tag. (a) False (b) True
28. 28.🏷️ Is <li> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
29. 29.🧩 An opening tag + content + a closing tag together make an ___. (a) attribute (b) editor (c) address (d) element
30. 30.🔠 Which heading shows the SMALLEST text: <h6>, <h3>, <h4> or <h1>? (a) <h6> (b) <h1> (c) <h4> (d) <h3>
31. 31.⚡ Which JavaScript word shows a pop-up box? (a) alert() (b) console.log() (c) for (d) if
32. 32.🌈 Which colour is #00ff00? (a) red (b) magenta (c) bright green (d) cyan
33. 33.🔗 Which attribute holds the address of a link? (a) href (b) id (c) src (d) alt
34. 34.📝 Which tag makes a drop-down list? (a) <li> (b) <ol> (c) <select> (d) <ul>
35. 35.📝 What does <p> make? (a) a link (b) a picture (c) a paragraph (d) a table
36. 36.True or false: to meet an online stranger is not safe. (a) False (b) True
37. 37.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
38. 38.📄 Where does <style> go: in the head or in the body? (a) in the body (b) in the head
39. 39.🖌️ What colour are the letters?
    li {
      text-align: left;
      color: orange;
      font-size: 16px;
      background-color: blue;
    } (a) white (b) blue (c) orange
40. 40.🔢 In a basic web page file, which comes first: “<head>” or “</html>”? (a) <head> (b) </html>

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