Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 593 · 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.📝 Which input type sends the form? (a) date (b) text (c) email (d) submit
2. 2.📊 Where do <td> cells go? (a) inside a <li> (b) inside a <p> (c) inside a <tr> (d) inside the <head>
3. 3.⚡ What number does this code print?
   let a = 16;
   let b = 11;
   console.log(a - b);
4. 4.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 10; i++) {
     total = total + i;
   }
   console.log(total);
5. 5.📊 How many cells does this table have in all?
   <table>
     <tr><th>Name</th><th>Fruit</th></tr>
     <tr><td>Jamun</td><td>Mango</td></tr>
     <tr><td>Mango</td><td>Mango</td></tr>
     <tr><td>Orange</td><td>Papaya</td></tr>
   </table>
6. 6.📋 How many items does this list show?
   <ul>
     <li>Papaya</li>
     <li>Guava</li>
     <li>Litchi</li>
     <li>Jamun</li>
   </ul>
7. 7.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 110px;
     padding: 10px;
     border: 2px solid black;
     margin: 10px;
   }
8. 8.⚖️ What colour is the text of this element?
   <p class="menu" id="main">Hi</p>
   CSS:
   .menu { color: yellow; }
   #main { color: purple; }
   p { color: green; } (a) red (b) purple (c) green (d) yellow
9. 9.📱 What does a media query check? (a) the page title (b) the time of day (c) the battery level (d) the screen width
10. 10.🖌️ Where does the text sit on its line?
    h2 {
      background-color: purple;
      font-size: 16px;
      color: orange;
      text-align: left;
    } (a) on the right (b) in the middle (c) on the left
11. 11.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 5; i++) {
      total = total + 6;
    }
    console.log(total);
12. 12.📊 Which tag makes one table row? (a) <th> (b) <tr> (c) <table> (d) <caption>
13. 13.🌈 Which colour is #000000? (a) magenta (b) bright green (c) white (d) black
14. 14.🖼️ Which attribute of <img> sets how tall it is? (a) width (b) alt (c) height (d) src
15. 15.What does font-weight do? (a) makes the text bold (b) picks the font style (c) makes letters bigger (d) colours behind the text
16. 16.What does background-color do? (a) makes letters bigger (b) colours behind the text (c) centres a heading (d) sets the letter colour
17. 17.🔍 Which line is missing its closing tag?
    line 1: <i>Rain today</i>
    line 2: <u>Good morning!</u>
    line 3: <h3>Fun facts (a) line 3 (b) line 2 (c) line 1
18. 18.🔗 Which code links to about.html? (a) <link about.html> (b) <a src="about.html"> (c) <a href="about.html"> (d) <a alt="about.html">
19. 19.True or false: console.log(5 + 2); goes in index.html. (a) True (b) False
20. 20.💬 Which text will NOT show on the page?
    <p>My best friend</p>
    <p>Good morning!</p>
    <!-- <p>I love mangoes.</p> --> (a) Good morning! (b) My best friend (c) I love mangoes.
21. 21.🎯 Which element does the selector .big style? (a) <h1 class="big"> (b) <h2 class="box"> (c) <h1 id="big"> (d) <h1 class="red">
22. 22.📝 On how many lines does the browser show this paragraph?
    <p>Rivers flow<br>Stars shine<br>Kites fly high<br>Birds sing<br>Sky is blue</p>
23. 23.🔗 Where does this link open?
    <a href="games.html" target="_blank">Contact us</a> (a) in a new tab (b) in the same tab
24. 24.✍️ What value is given to margin in this rule?
    .note {
      margin: 10px;
      color: red;
      background-color: yellow;
    } (a) margin (b) 8px (c) bold (d) 10px
25. 25.⚡ Which tag holds JavaScript in a page? (a) <script> (b) <code> (c) <js> (d) <style>
26. 26.📝 How many paragraphs does this code make?
    <p>The red kite</p>
    <h2>Rain today</h2>
    <p>Rain today</p>
    <h2>I love mangoes.</h2>
27. 27.📝 How many paragraphs does this code make?
    <p>Our school trip</p>
    <p>Rain today</p>
    <p>Fun facts</p>
28. 28.🔍 Which line is missing its closing tag?
    line 1: <h1>Cricket is fun.
    line 2: <u>Rain today</u>
    line 3: <strong>Hello, world!</strong> (a) line 3 (b) line 1 (c) line 2
29. 29.🧭 How many <main> parts should a page have? (a) three (b) none (c) ten (d) one
30. 30.📋 Which list tag lists steps in order? (a) <ul> (b) <li> (c) <ol>
31. 31.Which of these is margin? (a) the line round the box (b) space inside the border (c) space outside the border (d) a solid or dotted edge
32. 32.🔠 Which heading shows the BIGGEST text: <h5>, <h2>, <h4> or <h1>? (a) <h5> (b) <h4> (c) <h1> (d) <h2>
33. 33.🔗 Which tag makes a clickable link? (a) <a> (b) <link> (c) <p> (d) <img>
34. 34.📦 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: 15px;
    }
35. 35.Which of these is true of <main>? (a) helps you move around (b) holds the logo and title (c) is the page’s key part (d) sits at the bottom
36. 36.⚡ Which JavaScript word runs code when true? (a) if (b) let (c) alert() (d) console.log()
37. 37.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
38. 38.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="dog.jpg" alt="A happy dog" width="300"> (a) dog.jpg (b) A happy dog (c) width (d) The full moon
39. 39.True or false: <p> has a closing tag. (a) False (b) True
40. 40.🎯 Which element does the selector .red style? (a) <h2 id="red"> (b) <h2 class="red"> (c) <li class="star"> (d) <h2 class="box">

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