Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 738 · 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.🔡 Are HTML tag names usually written in small letters? (a) No (b) Yes
2. 2.📋 How many items does this list show?
   <ul>
     <li>Litchi</li>
     <li>Papaya</li>
   </ul>
3. 3.🖌️ Which CSS property makes the text bold? (a) color (b) font-weight (c) font-size (d) font-family
4. 4.📱 What does a media query check? (a) the page title (b) the time of day (c) the screen width (d) the battery level
5. 5.📝 On how many lines does the browser show this paragraph?
   <p>Birds sing<br>Kites fly high<br>Rivers flow</p>
6. 6.🧩 Which language makes a link? (a) JavaScript (b) HTML (c) CSS
7. 7.📝 Does <ul> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
8. 8.🧩 Which language gives the page structure? (a) CSS (b) JavaScript (c) HTML
9. 9.True or false: HTML adds space around boxes. (a) False (b) True
10. 10.📝 Which tag gives a form box a name you can click? (a) <hr> (b) <label> (c) <h1> (d) <title>
11. 11.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 25px;
      border: 4px solid black;
      margin: 20px;
    }
12. 12.🔐 Is password a strong or a weak password? (a) strong (b) weak
13. 13.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="map.png" alt="Map of India" width="100"> (a) Map of India (b) Birthday cake (c) map.png (d) width
14. 14.⚖️ What colour is the text of this element?
    <h1 class="red" id="intro">Hi</h1>
    CSS:
    h1 { color: blue; }
    #intro { color: red; } (a) green (b) blue (c) white (d) red
15. 15.🎯 What kind of selector is #hero? (a) an id selector (b) a class selector (c) an element selector
16. 16.✍️ Which property is set to 300px in this rule?
    body {
      width: 300px;
      font-size: 20px;
      background-color: yellow;
    } (a) 300px (b) color (c) width (d) font-style
17. 17.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 280px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 60px wide (no margins).
18. 18.🖌️ What colour is behind the letters?
    p {
      background-color: blue;
      font-size: 12px;
      color: red;
      text-align: left;
    } (a) black (b) red (c) blue
19. 19.🔠 How many headings are in this code?
    <h1>Cricket is fun.</h1>
    <h2>Rain today</h2>
    <p>Rain today</p>
    <h4>My pets</h4>
    <h4>Fun facts</h4>
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 200px;
      padding: 20px;
      border: 3px solid black;
      margin: 20px;
    }
21. 21.🔗 Which words do you click on?
    <a href="about.html">Play games</a> (a) about.html (b) href (c) About us (d) Play games
22. 22.📊 Which tag makes one table row? (a) <tr> (b) <td> (c) <th> (d) <caption>
23. 23.🌍 What do we call the computer that stores a website? (a) a printer (b) a mouse (c) a keyboard (d) a server
24. 24.📝 On how many lines does the browser show this paragraph?
    <p>Roses are red<br>Sky is blue<br>Kites fly high<br>Rivers flow<br>Birds sing</p>
25. 25.True or false: a web browser hosts websites online. (a) False (b) True
26. 26.🔗 Where does this link open?
    <a href="news.html" target="_blank">Contact us</a> (a) in the same tab (b) in a new tab
27. 27.📝 How many paragraphs does this code make?
    <p>Cricket is fun.</p>
    <h2>My pets</h2>
    <h2>The red kite</h2>
28. 28.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
29. 29.💪 Which flexbox property turns on flexbox? (a) gap (b) justify-content (c) flex-direction (d) display: flex
30. 30.📊 How many cells are in each row?
    <table>
      <tr><td>Banana</td><td>Jamun</td><td>Jamun</td><td>Jamun</td></tr>
      <tr><td>Mango</td><td>Banana</td><td>Mango</td><td>Papaya</td></tr>
      <tr><td>Guava</td><td>Grapes</td><td>Jamun</td><td>Grapes</td></tr>
    </table>
31. 31.🔗 Where does this link open?
    <a href="about.html">Contact us</a> (a) in the same tab (b) in a new tab
32. 32.⚡ What does this code print? (Look at the quotes!)
    let x = "5";
    let y = 3;
    console.log(x + y); (a) Error (b) 8 (c) 53
33. 33.🧭 Why use <nav> instead of <div> for a menu? (a) it tells its meaning (b) it makes text red (c) it loads faster (d) it adds pictures
34. 34.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 3 (b) 6 (c) 4 (d) 2
35. 35.🖌️ How big is the text, in px?
    h1 {
      text-align: left;
      background-color: orange;
      font-size: 20px;
      color: red;
    }
36. 36.🔗 Which address opens when you click this link?
    <a href="maths.html">About us</a> (a) art.html (b) news.html (c) maths.html (d) About us
37. 37.🔗 Which words do you click on?
    <a href="news.html">Play games</a> (a) news.html (b) Play games (c) About us (d) href
38. 38.True or false: margin is space outside the border. (a) False (b) True
39. 39.🎯 Which sign starts an id selector? (a) . (b) @ (c) & (d) #
40. 40.🖌️ Which CSS property makes letters bigger? (a) text-align (b) font-family (c) font-size (d) background-color

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