Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 272 · 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 a basic web page file, which comes LAST? (a) <head> (b) <!DOCTYPE html> (c) </html> (d) <html>
2. 2.True or false: padding is a solid or dotted edge. (a) True (b) False
3. 3.📋 How many items does this list show?
   <ol>
     <li>Papaya</li>
     <li>Guava</li>
     <li>Orange</li>
     <li>Litchi</li>
   </ol>
4. 4.🖼️ Which tag puts a picture on a page? (a) <a> (b) <img> (c) <pic> (d) <p>
5. 5.True or false: JavaScript changes the text size. (a) False (b) True
6. 6.🔗 Where does this link open?
   <a href="news.html" target="_blank">Maths fun</a> (a) in the same tab (b) in a new tab
7. 7.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 14px;
     }
   }
8. 8.🧭 Is <main> semantic or not semantic? (a) semantic (b) not semantic
9. 9.📋 Which list tag shows 1, 2, 3 numbers? (a) <li> (b) <ul> (c) <ol>
10. 10.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 280px;
      padding: 25px;
      border: 1px solid black;
      margin: 10px;
    }
11. 11.✍️ In color: blue; which part is the value? (a) blue (b) : (c) color (d) ;
12. 12.🌈 Which colour of light is strongest in rgb(124, 176, 95)? (a) green (b) red (c) blue
13. 13.True or false: <main> holds the main content. (a) True (b) False
14. 14.🏷️ Every HTML tag starts with which sign? (a) { (b) [ (c) < (d) (
15. 15.⚡ Which tag holds JavaScript in a page? (a) <style> (b) <script> (c) <code> (d) <js>
16. 16.♿ What does good colour contrast mean? (a) many bright colours (b) only red text (c) text stands out clearly (d) no colours at all
17. 17.True or false: <table> holds the whole table. (a) False (b) True
18. 18.What does font-weight do? (a) makes the text bold (b) sets the letter colour (c) makes letters bigger (d) picks the font style
19. 19.♿ A part of the page is under a <h1> heading. Which tag should its sub-heading use? (a) <h6> (b) <h2> (c) <h3> (d) <h1>
20. 20.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
21. 21.🖼️ How many pixels wide is the picture drawn?
    <img src="dog.jpg" alt="A happy dog" width="50">
22. 22.True or false: in <img>, width sets how tall it is. (a) True (b) False
23. 23.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
24. 24.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }
25. 25.🔢 When you open a web page, which comes FIRST? (a) the browser asks it (b) you type the URL (c) the browser shows it (d) DNS finds the server
26. 26.🔁 Which loop repeats code a set number of times? (a) for (b) else (c) let (d) if
27. 27.📋 How many items does this list show?
    <ol>
      <li>Jamun</li>
      <li>Grapes</li>
      <li>Guava</li>
      <li>Litchi</li>
      <li>Orange</li>
      <li>Mango</li>
    </ol>
28. 28.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) Welcome! (b) Mars is red. (c) My Hobbies (d) index.html
29. 29.Which of these is true of <article>? (a) holds one blog post (b) holds the menu of links (c) sits at the bottom (d) holds the main content
30. 30.True or false: the server scrambles data on its way. (a) True (b) False
31. 31.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 320px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
32. 32.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 10px;
      border: 4px solid black;
      margin: 5px;
    }
33. 33.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <p>Fun facts</p>
    <p>Good morning!</p>
34. 34.True or false: <meta> is an empty tag. (a) False (b) True
35. 35.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as a dot (b) as 5 spaces (c) as one space (d) as a new line
36. 36.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Papaya
      <input type="checkbox" name="fruit"> Banana
      <input type="checkbox" name="fruit"> Mango
    </form>
37. 37.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>Easy snacks</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) index.html (b) Easy snacks (c) Class 7 Blog (d) Mars is red.
38. 38.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
39. 39.🔠 Which heading shows the BIGGEST text: <h1>, <h3>, <h4> or <h5>? (a) <h4> (b) <h3> (c) <h5> (d) <h1>
40. 40.🔠 How many heading levels does HTML have? (a) 4 (b) 6 (c) 3 (d) 10

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