Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 188 · 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 input type lets you tick many? (a) text (b) password (c) number (d) checkbox
2. 2.💪 Which flexbox property spaces boxes along a row? (a) align-items (b) gap (c) flex-direction (d) justify-content
3. 3.Which of these is true of <footer>? (a) holds a side box of tips (b) sits at the very top (c) holds copyright notes (d) helps you move around
4. 4.True or false: a web browser is where we type code. (a) False (b) True
5. 5.🧭 How many <main> parts should a page have? (a) three (b) none (c) ten (d) one
6. 6.🎯 What kind of selector is h1? (a) an id selector (b) a class selector (c) an element selector
7. 7.Which of these is not safe to do online? (a) log out on shared PCs (b) put secrets in comments (c) tell a trusted adult (d) ask before downloading
8. 8.📦 In the box model, which part is the gap round content? (a) padding (b) margin (c) border (d) content
9. 9.🏷️ Every HTML tag starts with which sign? (a) [ (b) ( (c) < (d) {
10. 10.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) red (c) blue (d) black
11. 11.True or false: “skipping heading levels” helps everyone use the page. (a) True (b) False
12. 12.🧩 Which language makes a form box? (a) JavaScript (b) HTML (c) CSS
13. 13.Which of these goes in the head? (a) <h1> (b) <img> (c) <meta charset="utf-8"> (d) <p>
14. 14.🔠 Which heading shows the BIGGEST text: <h5>, <h4>, <h6> or <h2>? (a) <h6> (b) <h5> (c) <h4> (d) <h2>
15. 15.📊 Which tag makes a heading cell? (a) <tr> (b) <th> (c) <table> (d) <caption>
16. 16.📝 On how many lines does the browser show this paragraph?
    <p>Sky is blue<br>Roses are red<br>Kites fly high<br>Rivers flow</p>
17. 17.🏷️ Is </title> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
18. 18.True or false: the content is the line round the box. (a) False (b) True
19. 19.Which colour pair is hard to read? (a) black on white (b) white on black (c) yellow on white (d) white on dark blue
20. 20.True or false: img is an id selector. (a) True (b) False
21. 21.🔠 Which tag is used for the main title on a page? (a) <br> (b) <h6> (c) <p> (d) <h1>
22. 22.📱 What does a media query check? (a) the page title (b) the screen width (c) the battery level (d) the time of day
23. 23.💬 Which text will NOT show on the page?
    <!-- <p>Hello, world!</p> -->
    <p>The red kite</p>
    <p>I love mangoes.</p>
    <p>Cricket is fun.</p> (a) Cricket is fun. (b) I love mangoes. (c) The red kite (d) Hello, world!
24. 24.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="100"> (a) kite.png (b) fort.jpg (c) An old fort (d) tiger.jpg
25. 25.Which of these is true of a web server? (a) sends pages over the net (b) shows line numbers (c) is where we type code (d) colours code to help us
26. 26.📋 Which list tag lists steps in order? (a) <ol> (b) <li> (c) <ul>
27. 27.📄 Can HTML on its own make a form? (a) No (b) Yes
28. 28.🔁 What does this code print?
    let age = 21;
    if (age > 25) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
29. 29.✍️ What is the selector in this CSS rule?
    body {
      background-color: yellow;
      border: 2px solid;
      color: red;
      margin: 10px;
    } (a) background-color (b) body (c) .box (d) 2px solid
30. 30.📊 Which tag makes one data cell? (a) <th> (b) <td> (c) <table> (d) <caption>
31. 31.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 60px wide (no margins).
32. 32.True or false: HTML rounds box corners. (a) True (b) False
33. 33.🛡️ Online: is it safe to type a password on http? (a) not safe (b) safe
34. 34.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="bus.jpg" alt="Our school bus" width="150"> (a) An old fort (b) width (c) bus.jpg (d) Our school bus
35. 35.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="fort.jpg" alt="An old fort" width="100"> (a) fort.jpg (b) A tiger asleep (c) width (d) An old fort
36. 36.⚖️ What colour is the text of this element?
    <h2 class="big" id="hero">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: red; } (a) red (b) purple (c) blue (d) yellow
37. 37.True or false: <p> is an empty tag. (a) True (b) False
38. 38.💪 Which flexbox property lines boxes up across? (a) display: flex (b) align-items (c) gap (d) justify-content
39. 39.💬 How many paragraphs show on the page?
    <!-- <p>Fun facts</p> -->
    <p>Our school trip</p>
    <p>Rain today</p>
    <p>I love mangoes.</p>
    <!-- <p>My pets</p> -->
40. 40.🖌️ What colour are the letters?
    h1 {
      text-align: left;
      font-size: 40px;
      color: blue;
      background-color: green;
    } (a) orange (b) green (c) blue

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