Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 612 · 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.📦 In the box model, which part is the gap round content? (a) content (b) border (c) margin (d) padding
2. 2.📦 In the box model, which part is a solid or dotted edge? (a) margin (b) border (c) content (d) padding
3. 3.🖼️ Which tag puts a picture on a page? (a) <img> (b) <p> (c) <pic> (d) <a>
4. 4.🔠 Which heading shows the BIGGEST text: <h1>, <h5>, <h3> or <h6>? (a) <h6> (b) <h5> (c) <h1> (d) <h3>
5. 5.🏷️ Is </p> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
6. 6.🖼️ Why do we add alt text to an image? (a) to load it faster (b) to colour it (c) to describe the image (d) to make it bigger
7. 7.Which of these is true of <nav>? (a) is the page’s key part (b) holds one blog post (c) holds the logo and title (d) helps you move around
8. 8.📊 How many cells are in each row?
   <table>
     <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
     <tr><td>Litchi</td><td>Orange</td><td>Guava</td><td>Guava</td></tr>
   </table>
9. 9.⚡ Where does console.log() show its output? (a) on the printer (b) in the address bar (c) in the console (d) on the title bar
10. 10.🖌️ Which CSS property makes letters bigger? (a) text-align (b) font-family (c) font-size (d) color
11. 11.🌍 What is the protocol in this URL?
    https://school.example.in/games/chess.html (a) school.example.in (b) /games/chess.html (c) http (d) https
12. 12.🔍 Which is the odd one out? (a) hosts websites online (b) answers page requests (c) shows pages from the web (d) sends pages over the net
13. 13.True or false: <hr> has a closing tag. (a) False (b) True
14. 14.⚡ What number does this code print?
    let coins = 11;
    coins = coins + 9;
    coins = coins - 16;
    console.log(coins);
15. 15.💬 How many paragraphs show on the page?
    <p>Our school trip</p>
    <!-- <p>The red kite</p> -->
    <p>Hello, world!</p>
16. 16.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 5px;
      border: 1px solid black;
      margin: 10px;
    }
17. 17.🔗 Which words do you click on?
    <a href="contact.html">School news</a> (a) contact.html (b) href (c) School news (d) Take the quiz
18. 18.⚡ What does this code show?
    let name = "Meera";
    alert("Hello, " + name + "!"); (a) Hello, Meera! (b) name (c) Hello, name! (d) Meera
19. 19.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 290px;
      padding: 15px;
      border: 2px solid black;
      margin: 0px;
    }
20. 20.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
21. 21.Which of these goes in the head? (a) <ul> (b) <meta charset="utf-8"> (c) <a> (d) <img>
22. 22.What does justify-content: space-between do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the end (d) packs boxes at the start
23. 23.⚖️ What colour is the text of this element?
    <p class="big" id="intro">Hi</p>
    CSS:
    .big { color: red; }
    p { color: purple; }
    #intro { color: green; } (a) red (b) blue (c) purple (d) green
24. 24.True or false: <td> makes one data cell. (a) True (b) False
25. 25.🔍 Which line is missing its closing tag?
    line 1: <h3>Good morning!</h3>
    line 2: <h1>Cricket is fun.
    line 3: <b>I love mangoes.</b> (a) line 3 (b) line 1 (c) line 2
26. 26.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
27. 27.📝 On how many lines does the browser show this paragraph?
    <p>Roses are red<br>Sky is blue</p>
28. 28.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <h4>Fun facts</h4>
    <p>The red kite</p>
    <p>Hello, world!</p>
    <h4>Good morning!</h4>
29. 29.🔗 Which tag makes a clickable link? (a) <link> (b) <a> (c) <p> (d) <img>
30. 30.🎯 Which element does the selector .box style? (a) <p id="box"> (b) <h1 class="menu"> (c) <p class="star"> (d) <p class="box">
31. 31.✍️ Which property is set to 20px in this rule?
    .box {
      width: 300px;
      font-style: italic;
      font-size: 20px;
      padding: 8px;
    } (a) 20px (b) text-align (c) background-color (d) font-size
32. 32.🔢 In a basic web page file, which comes FIRST? (a) </html> (b) <html> (c) <!DOCTYPE html> (d) <body>
33. 33.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
34. 34.🔠 Which heading shows the BIGGEST text: <h1>, <h3>, <h2> or <h4>? (a) <h3> (b) <h2> (c) <h1> (d) <h4>
35. 35.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the head (b) in the body
36. 36.✍️ What is the selector in this CSS rule?
    li {
      color: red;
      width: 300px;
      background-color: yellow;
      font-size: 20px;
    } (a) li (b) color (c) 300px (d) body
37. 37.⚡ Which JavaScript word writes in the console? (a) alert() (b) let (c) if (d) console.log()
38. 38.✍️ In color: blue; which part is the value? (a) blue (b) color (c) ; (d) :
39. 39.🌈 Which colour is #0000ff? (a) white (b) black (c) red (d) blue
40. 40.🌈 In #004200 the green part is the hex number 42. What is it as a normal number?

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