Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 978 · 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 colour is #ffffff? (a) yellow (b) red (c) cyan (d) white
2. 2.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
3. 3.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 120px;
     padding: 25px;
     border: 3px solid black;
     margin: 10px;
   }
4. 4.🎨 One CSS file can style how many pages? (a) no pages (b) only one image (c) only one word (d) many pages
5. 5.True or false: <caption> makes one table row. (a) False (b) True
6. 6.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 140px;
     padding: 20px;
     border: 4px solid black;
     margin: 0px;
   }
7. 7.🎯 Which CSS selector matches this element?
   <div class="big" id="end">Hello</div> (a) #big (b) #hero (c) .end (d) div
8. 8.🎯 What kind of selector is .note? (a) a class selector (b) an element selector (c) an id selector
9. 9.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 14px;
     }
   }
10. 10.🏷️ Is </title> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
11. 11.🔍 Which line is missing its closing tag?
    line 1: <h3>Cricket is fun.</h3>
    line 2: <h1>I love mangoes.</h1>
    line 3: <u>Hello, world! (a) line 1 (b) line 2 (c) line 3
12. 12.🔢 In a basic web page file, which comes first: “</html>” or “<html>”? (a) <html> (b) </html>
13. 13.True or false: in <img>, alt describes the picture. (a) True (b) False
14. 14.🔠 How many headings are in this code?
    <h1>The red kite</h1>
    <p>Our school trip</p>
    <h2>Fun facts</h2>
    <p>The red kite</p>
    <h3>Good morning!</h3>
15. 15.🌐 Which one sends pages over the net? (a) a web browser (b) a code editor (c) a web server
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 10px;
      border: 1px solid black;
      margin: 0px;
    }
17. 17.True or false: padding is space inside the border. (a) False (b) True
18. 18.True or false: HTML on its own cannot keep a high score. (a) False (b) True
19. 19.🔗 What does HyperText mean? (a) text in colour (b) secret text (c) very big text (d) text with links
20. 20.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
21. 21.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 12px;
      }
    }
22. 22.📝 Which tag makes a drop-down list? (a) <ul> (b) <li> (c) <ol> (d) <select>
23. 23.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
24. 24.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 3 (b) 2 (c) 4 (d) 6
25. 25.📊 How many cells are in each row?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Guava</td><td>Litchi</td><td>Guava</td><td>Orange</td></tr>
      <tr><td>Litchi</td><td>Jamun</td><td>Jamun</td><td>Orange</td></tr>
    </table>
26. 26.🧩 Which language changes the text size? (a) HTML (b) CSS (c) JavaScript
27. 27.🏷️ Every HTML tag starts with which sign? (a) { (b) ( (c) [ (d) <
28. 28.True or false: in <img>, src tells which image to load. (a) True (b) False
29. 29.True or false: .big is a class selector. (a) False (b) True
30. 30.🎯 How many elements on a page should have the same id? (a) any number (b) 5 (c) 1 (d) 2
31. 31.Which of these is an empty tag? (a) <title> (b) <br> (c) <p> (d) <h1>
32. 32.⚖️ What colour is the text of this element?
    <p class="star" id="hero">Hi</p>
    CSS:
    .star { color: orange; }
    .star { color: purple; } (a) red (b) orange (c) green (d) purple
33. 33.🖼️ Why do we add alt text to an image? (a) to load it faster (b) to make it bigger (c) to colour it (d) to describe the image
34. 34.🌍 What do we call the computer that stores a website? (a) a keyboard (b) a server (c) a printer (d) a mouse
35. 35.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 9; i++) {
      total = total + 5;
    }
    console.log(total);
36. 36.💬 Which text will NOT show on the page?
    <!-- <p>Good morning!</p> -->
    <p>I love mangoes.</p>
    <p>The red kite</p> (a) I love mangoes. (b) Good morning! (c) The red kite
37. 37.True or false: margin is the gap to other boxes. (a) True (b) False
38. 38.✍️ Which property is set to red in this rule?
    h2 {
      color: red;
      text-align: center;
      margin: 10px;
    } (a) red (b) color (c) text-align (d) font-size
39. 39.✍️ What value is given to border in this rule?
    .note {
      border: 2px solid;
      text-align: center;
      font-size: 20px;
    } (a) border (b) italic (c) 300px (d) 2px solid
40. 40.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }

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