Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 932 · 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 space across (px) does this box take in all, margin included?
   .box {
     width: 250px;
     padding: 5px;
     border: 2px solid black;
     margin: 10px;
   }
2. 2.🔗 What does target="_blank" do to a link? (a) makes it blank (b) hides the link (c) opens it in a new tab (d) makes it bold
3. 3.🧩 Which language gives the page structure? (a) JavaScript (b) HTML (c) CSS
4. 4.⚖️ What colour is the text of this element?
   <p class="big" id="logo">Hi</p>
   CSS:
   p { color: white; }
   p { color: purple; } (a) white (b) purple (c) green (d) orange
5. 5.True or false: JavaScript adds space around boxes. (a) False (b) True
6. 6.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 20px;
     }
   }
7. 7.💬 Which text will NOT show on the page?
   <p>Rain today</p>
   <p>I love mangoes.</p>
   <!-- <p>Our school trip</p> -->
   <p>The red kite</p> (a) I love mangoes. (b) Rain today (c) Our school trip (d) The red kite
8. 8.True or false: to put secrets in comments is safe. (a) True (b) False
9. 9.⚖️ What colour is the text of this element?
   <h2 class="note" id="main">Hi</h2>
   CSS:
   h2 { color: blue; }
   h2 { color: yellow; } (a) green (b) black (c) blue (d) yellow
10. 10.True or false: <ol> is an unordered list. (a) False (b) True
11. 11.✍️ In color: blue; which part is the value? (a) ; (b) color (c) : (d) blue
12. 12.🔁 Which word runs code only when something is true? (a) if (b) log (c) for (d) let
13. 13.📝 On how many lines does the browser show this paragraph?
    <p>Roses are red<br>Rivers flow<br>Birds sing</p>
14. 14.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <p>Our school trip</p>
    <h3>Our school trip</h3>
    <h4>Good morning!</h4>
15. 15.⚡ Which JavaScript word makes a new variable? (a) alert() (b) let (c) console.log() (d) if
16. 16.📊 Which tag makes one table row? (a) <tr> (b) <table> (c) <td> (d) <th>
17. 17.Which of these is the border? (a) the gap to other boxes (b) the gap round content (c) space inside the border (d) the line round the box
18. 18.⚡ What does this code show?
    let name = "Arjun";
    alert("Hi, " + name + "!"); (a) Hi, name! (b) name (c) Arjun (d) Hi, Arjun!
19. 19.🖌️ What colour is behind the letters?
    p {
      background-color: blue;
      text-align: left;
      font-size: 16px;
      color: yellow;
    } (a) blue (b) yellow (c) red
20. 20.📋 Which list tag shows bullet points? (a) <ol> (b) <ul> (c) <li>
21. 21.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) center (c) space-between (d) flex-end
22. 22.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) exactly 100px (c) turned off (d) 800px or narrower
23. 23.🔤 In “HTML”, what do the letters HT stand for? (a) High Tech (b) HyperText (c) Home Text (d) Hot Tags
24. 24.🔍 One closing tag is missing. Which one?
    <h3>Cricket is fun.</h3>
    <h1>I love mangoes.
    <b>Rain today</b> (a) </b> (b) </h1> (c) </h3> (d) </small>
25. 25.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 460px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
26. 26.📊 In a table, which tag is a row? (a) <tr> (b) <tb> (c) <td> (d) <th>
27. 27.🖼️ Which picture file does the browser load?
    <img src="map.png" alt="Map of India" width="400"> (a) Map of India (b) cake.jpg (c) dog.jpg (d) map.png
28. 28.📝 Does <meta> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
29. 29.🔍 One closing tag is missing. Which one?
    <h1>Good morning!
    <small>My best friend</small>
    <em>Our school trip</em> (a) </em> (b) </p> (c) </small> (d) </h1>
30. 30.💬 How many paragraphs show on the page?
    <p>Our school trip</p>
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>My pets</p> -->
    <!-- <p>Good morning!</p> -->
    <!-- <p>Cricket is fun.</p> -->
31. 31.🔢 To build and share your first web page, which comes first: “plan what to show” or “add CSS styles”? (a) add CSS styles (b) plan what to show
32. 32.🌗 Is blue on purple easy or hard to read? (a) easy to read (b) hard to read
33. 33.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) exactly 1000px (c) 600px or narrower (d) 600px or wider
34. 34.⚖️ What colour is the text of this element?
    <h2 class="star" id="logo">Hi</h2>
    CSS:
    h2 { color: black; }
    h2 { color: red; } (a) purple (b) white (c) black (d) red
35. 35.📋 Which list tag lists things in any order? (a) <ul> (b) <ol> (c) <li>
36. 36.🔗 Which address opens when you click this link?
    <a href="games.html">Art corner</a> (a) contact.html (b) Art corner (c) about.html (d) games.html
37. 37.📋 How many items does this list show?
    <ol>
      <li>Guava</li>
      <li>Jamun</li>
      <li>Papaya</li>
    </ol>
38. 38.True or false: <th> makes one data cell. (a) False (b) True
39. 39.Which of these is an opening tag? (a) </h1> (b) </li> (c) </title> (d) <li>
40. 40.✍️ In color: blue; which part is the property? (a) color (b) : (c) blue (d) ;

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