Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 46 · 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.🚀 You change your code. What should you do to see the change? (a) rename the folder (b) save and refresh (c) switch off the PC (d) delete the file
2. 2.🚀 Which program lets you see your web page while you build it? (a) a calculator (b) a photo viewer (c) a web browser (d) a music player
3. 3.Which of these goes in the body? (a) <link rel="stylesheet"> (b) <meta charset="utf-8"> (c) <title> (d) <img>
4. 4.📄 Can HTML on its own add up two numbers? (a) No (b) Yes
5. 5.🧩 An opening tag + content + a closing tag together make an ___. (a) address (b) attribute (c) element (d) editor
6. 6.Which of these does CSS do? (a) reacts to a button click (b) rounds box corners (c) makes a form box (d) counts down a timer
7. 7.📱 Responsive design means a page ___. (a) is only for laptops (b) fits every screen (c) has no pictures (d) never changes
8. 8.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Cricket Club</title>
   </head>
   <body>
     <h1>Welcome!</h1>
     <p>Mars is red.</p>
   </body>
   </html> (a) Cricket Club (b) index.html (c) Mars is red. (d) Welcome!
9. 9.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 110px;
     padding: 15px;
     border: 5px solid black;
     margin: 0px;
   }
10. 10.🌍 What is the protocol in this URL?
    http://school.example.in/games/chess.html (a) school.example.in (b) https (c) http (d) /games/chess.html
11. 11.📋 What number does the browser show next to “Grapes”?
    <ol>
      <li>Jamun</li>
      <li>Mango</li>
      <li>Grapes</li>
      <li>Banana</li>
      <li>Litchi</li>
    </ol>
12. 12.🔁 What does this code print?
    let marks = 26;
    if (marks > 44) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Pass (b) Try again
13. 13.📱 What does a media query check? (a) the battery level (b) the time of day (c) the screen width (d) the page title
14. 14.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      background-color: yellow;
      width: 300px;
      text-align: center;
      font-weight: bold;
    }
15. 15.🧭 Is <main> semantic or not semantic? (a) semantic (b) not semantic
16. 16.Which of these goes in the head? (a) <table> (b) <h1> (c) <style> (d) <a>
17. 17.💬 Which text will NOT show on the page?
    <p>My pets</p>
    <p>I love mangoes.</p>
    <!-- <p>The red kite</p> --> (a) My pets (b) I love mangoes. (c) The red kite
18. 18.🏷️ Is <title> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
19. 19.🎨 Which attribute adds CSS inside one tag? (a) href (b) style (c) src (d) alt
20. 20.⚖️ What colour is the text of this element?
    <p class="box" id="hero">Hi</p>
    CSS:
    .box { color: orange; }
    .box { color: green; } (a) green (b) white (c) orange (d) red
21. 21.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      background-color: yellow;
      width: 300px;
    }
22. 22.🚀 Which file should this code go in: alert(score); (a) style.css (b) index.html (c) script.js
23. 23.♿ What does good colour contrast mean? (a) only red text (b) many bright colours (c) text stands out clearly (d) no colours at all
24. 24.📋 Does this list show bullets or numbers?
    <ul>
      <li>Guava</li>
      <li>Papaya</li>
      <li>Mango</li>
    </ul> (a) numbers (b) bullets
25. 25.🖼️ Which picture file does the browser load?
    <img src="cake.jpg" alt="Birthday cake" width="350"> (a) moon.png (b) dog.jpg (c) cake.jpg (d) Birthday cake
26. 26.✍️ Which sign goes between a property and its value? (a) = (b) : (c) - (d) ;
27. 27.🖼️ Which picture file does the browser load?
    <img src="moon.png" alt="The full moon" width="100"> (a) moon.png (b) bus.jpg (c) The full moon (d) fort.jpg
28. 28.🔗 Which address opens when you click this link?
    <a href="quiz.html">Take the quiz</a> (a) quiz.html (b) Take the quiz (c) games.html (d) about.html
29. 29.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) space-between (c) center (d) flex-start
30. 30.🔠 How many headings are in this code?
    <h1>The red kite</h1>
    <h2>Rain today</h2>
    <h4>My best friend</h4>
    <p>Our school trip</p>
    <h3>My pets</h3>
31. 31.True or false: JavaScript gives the page structure. (a) True (b) False
32. 32.🖌️ How big is the text, in px?
    h1 {
      color: black;
      font-size: 20px;
      text-align: left;
      background-color: red;
    }
33. 33.🔗 Which words do you click on?
    <a href="about.html">Play games</a> (a) About us (b) about.html (c) href (d) Play games
34. 34.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
35. 35.🔗 Where does this link open?
    <a href="games.html">Art corner</a> (a) in the same tab (b) in a new tab
36. 36.True or false: HTML on its own can add pictures to a page. (a) False (b) True
37. 37.🔠 Which heading shows the BIGGEST text: <h6>, <h3>, <h1> or <h2>? (a) <h2> (b) <h1> (c) <h3> (d) <h6>
38. 38.🔠 Which heading shows the BIGGEST text: <h3>, <h1>, <h4> or <h5>? (a) <h5> (b) <h3> (c) <h1> (d) <h4>
39. 39.Which of these is the content? (a) the gap round content (b) a solid or dotted edge (c) space outside the border (d) the text or picture
40. 40.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 3; i++) {
      total = total + 9;
    }
    console.log(total);

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