Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 359 · 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 heading shows the SMALLEST text: <h4>, <h6>, <h1> or <h2>? (a) <h4> (b) <h2> (c) <h6> (d) <h1>
2. 2.🔁 Which loop repeats code a set number of times? (a) else (b) let (c) if (d) for
3. 3.📝 On how many lines does the browser show this paragraph?
   <p>Sky is blue<br>Birds sing<br>Rivers flow</p>
4. 4.True or false: a code editor sends pages over the net. (a) True (b) False
5. 5.♿ Is this heading order correct (no level skipped)?
   <h1> → <h2> → <h2> → <h2> (a) Yes (b) No
6. 6.🔗 Which address opens when you click this link?
   <a href="https://example.com">Contact us</a> (a) Contact us (b) art.html (c) https://example.com (d) maths.html
7. 7.Which colour pair is easy to read? (a) light grey on white (b) pink on red (c) black on white (d) red on green
8. 8.💬 Which text will NOT show on the page?
   <!-- <p>Cricket is fun.</p> -->
   <p>Fun facts</p>
   <p>I love mangoes.</p>
   <p>Rain today</p> (a) Fun facts (b) Cricket is fun. (c) Rain today (d) I love mangoes.
9. 9.True or false: the browser stores the site’s files. (a) False (b) True
10. 10.🎯 Which CSS selector matches this element?
    <div class="big" id="intro">Hello</div> (a) .red (b) .big (c) span (d) #big
11. 11.True or false: to click prize links is safe. (a) False (b) True
12. 12.💬 Does the browser show comments on the page? (a) Yes (b) No
13. 13.What is <input type="submit"> for? (a) sends the form (b) takes only numbers (c) is for one line of words (d) hides what you type
14. 14.Which of these is true of <footer>? (a) holds the menu of links (b) holds one blog post (c) sits at the bottom (d) holds the logo and title
15. 15.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
16. 16.⚖️ What colour is the text of this element?
    <h2 class="menu" id="hero">Hi</h2>
    CSS:
    .menu { color: red; }
    #hero { color: yellow; }
    h2 { color: black; } (a) black (b) white (c) yellow (d) red
17. 17.🔗 Where does this link open?
    <a href="art.html">School news</a> (a) in a new tab (b) in the same tab
18. 18.💬 How does an HTML comment start? (a) /* (b) <!-- (c) // (d) #
19. 19.🔠 Which tag is the least important heading? (a) <p> (b) <h1> (c) <h3> (d) <h6>
20. 20.🌐 Which one colours code to help us? (a) a code editor (b) a web browser (c) a web server
21. 21.🏷️ Is </body> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
22. 22.🔁 How many times does this code print “Hello”?
    for (let i = 1; i <= 5; i++) {
      console.log("Hello");
    }
23. 23.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
24. 24.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 3 (c) 2 (d) 4
25. 25.📱 Responsive design means a page ___. (a) is only for laptops (b) never changes (c) fits every screen (d) has no pictures
26. 26.📝 Which tag makes a big box for many lines of text? (a) <br> (b) <p> (c) <input> (d) <textarea>
27. 27.Which of these is a closing tag? (a) <p> (b) <title> (c) </body> (d) <h1>
28. 28.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) justify-content (c) gap (d) flex-direction
29. 29.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 380px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 80px wide (no margins).
30. 30.🖼️ Which attribute of <img> names the picture file? (a) height (b) alt (c) width (d) src
31. 31.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>Hello, world!</p> -->
    <!-- <p>Rain today</p> -->
    <!-- <p>My pets</p> -->
    <p>Fun facts</p>
32. 32.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) ( ) (d) { }
33. 33.Which of these does JavaScript do? (a) counts down a timer (b) gives the page structure (c) puts a picture on a page (d) adds space around boxes
34. 34.🧭 Is <div> semantic or not semantic? (a) not semantic (b) semantic
35. 35.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="sport"> Hockey
      <input type="checkbox" name="sport"> Chess
      <input type="checkbox" name="sport"> Football
    </form>
36. 36.🛡️ Online: is it safe to use a nickname in games? (a) safe (b) not safe
37. 37.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 150px;
      padding: 10px;
      border: 3px solid black;
      margin: 5px;
    }
38. 38.🔠 Which heading shows the BIGGEST text: <h4>, <h6>, <h5> or <h1>? (a) <h6> (b) <h4> (c) <h5> (d) <h1>
39. 39.🖌️ Which CSS property makes letters bigger? (a) color (b) font-weight (c) background-color (d) font-size
40. 40.🖼️ Which tag puts a picture on a page? (a) <pic> (b) <a> (c) <p> (d) <img>

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