Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 475 · 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 CSS property centres a heading? (a) font-weight (b) font-family (c) color (d) text-align
2. 2.⚖️ What colour is the text of this element?
   <p class="note" id="end">Hi</p>
   CSS:
   p { color: white; }
   p { color: orange; } (a) yellow (b) blue (c) orange (d) white
3. 3.Which of these does HTML do? (a) changes the text size (b) makes headings and lists (c) adds space around boxes (d) lays out the page
4. 4.True or false: <h1> has a closing tag. (a) False (b) True
5. 5.Which of these is not safe to do online? (a) think before you post (b) use a nickname in games (c) log out on shared PCs (d) click prize links
6. 6.True or false: <a href="a.html">Go</a> goes in style.css. (a) False (b) True
7. 7.💬 Which text will NOT show on the page?
   <!-- <p>Fun facts</p> -->
   <p>The red kite</p>
   <p>My best friend</p>
   <p>Hello, world!</p> (a) Hello, world! (b) My best friend (c) Fun facts (d) The red kite
8. 8.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
9. 9.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
10. 10.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="fruit"> Mango
      <input type="radio" name="fruit"> Litchi
      <input type="radio" name="fruit"> Papaya
    </form>
11. 11.🌍 What is the domain name in this URL?
    http://www.example.com/about.html (a) /about.html (b) http (c) www.example.com (d) kids.example.org
12. 12.True or false: a web browser shows line numbers. (a) True (b) False
13. 13.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
14. 14.🖼️ Which attribute of <img> describes the picture? (a) width (b) src (c) height (d) alt
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).
16. 16.⚡ What does this code print? (Look at the quotes!)
    let x = "8";
    let y = 2;
    console.log(x + y); (a) 10 (b) Error (c) 82
17. 17.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 20px;
      }
    }
18. 18.📦 In the box model, which part is space inside the border? (a) content (b) margin (c) border (d) padding
19. 19.🧭 Which semantic tag holds copyright notes? (a) <nav> (b) <main> (c) <article> (d) <footer>
20. 20.⚡ What number does this code print?
    let a = 10;
    let b = 16;
    console.log(a + b);
21. 21.🎯 Which element does the selector .menu style? (a) <p class="big"> (b) <span class="note"> (c) <span id="menu"> (d) <span class="menu">
22. 22.🔍 One closing tag is missing. Which one?
    <h3>Fun facts
    <h2>I love mangoes.</h2>
    <strong>Good morning!</strong> (a) </i> (b) </strong> (c) </h3> (d) </h2>
23. 23.💬 How does an HTML comment start? (a) // (b) /* (c) <!-- (d) #
24. 24.📦 In the box model, which part is the gap round content? (a) border (b) padding (c) content (d) margin
25. 25.🌈 Which colour of light is strongest in rgb(207, 44, 102)? (a) blue (b) red (c) green
26. 26.🌐 Which one has an address bar? (a) a web server (b) a code editor (c) a web browser
27. 27.🚀 Which file should this code go in: .box { padding: 8px; } (a) index.html (b) style.css (c) script.js
28. 28.True or false: <p>Hello!</p> goes in index.html. (a) True (b) False
29. 29.True or false: <tr> gives the table a title. (a) True (b) False
30. 30.⚡ Which JavaScript word runs code when true? (a) alert() (b) if (c) console.log() (d) for
31. 31.True or false: the content is the text or picture. (a) True (b) False
32. 32.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 90px;
      padding: 25px;
      border: 4px solid black;
      margin: 20px;
    }
33. 33.📝 On how many lines does the browser show this paragraph?
    <p>Birds sing<br>Roses are red<br>Stars shine<br>Kites fly high<br>Rivers flow</p>
34. 34.🔍 One closing tag is missing. Which one?
    <small>Hello, world!
    <h1>Good morning!</h1>
    <i>My best friend</i> (a) </em> (b) </h1> (c) </small> (d) </i>
35. 35.📋 What number does the browser show next to “Litchi”?
    <ol start="4">
      <li>Mango</li>
      <li>Litchi</li>
      <li>Guava</li>
      <li>Banana</li>
      <li>Jamun</li>
      <li>Orange</li>
    </ol>
36. 36.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="fort.jpg" alt="An old fort" width="150"> (a) width (b) A tiger asleep (c) An old fort (d) fort.jpg
37. 37.⚖️ What colour is the text of this element?
    <h1 class="big" id="hero">Hi</h1>
    CSS:
    .big { color: yellow; }
    #hero { color: purple; }
    h1 { color: black; } (a) black (b) green (c) yellow (d) purple
38. 38.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <p>My pets</p>
    <p>Our school trip</p>
    <!-- <p>Rain today</p> -->
    <!-- <p>Hello, world!</p> -->
39. 39.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
40. 40.🧭 How many <main> parts should a page have? (a) ten (b) three (c) one (d) none

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