Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 912 · 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.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 340px;
     justify-content: space-between;
   }
   Inside are 3 boxes, each 100px wide (no margins).
2. 2.🔗 Which address opens when you click this link?
   <a href="news.html">About us</a> (a) quiz.html (b) games.html (c) About us (d) news.html
3. 3.🖌️ Where does the text sit on its line?
   h2 {
     background-color: white;
     text-align: left;
     color: orange;
     font-size: 16px;
   } (a) on the right (b) on the left (c) in the middle
4. 4.⚖️ What colour is the text of this element?
   <h1 class="note" id="logo">Hi</h1>
   CSS:
   h1 { color: purple; }
   .note { color: blue; } (a) yellow (b) blue (c) purple (d) black
5. 5.🖼️ Which attribute of <img> tells which image to load? (a) alt (b) width (c) src (d) height
6. 6.🌈 Which colour is rgb(0, 255, 255)? (a) white (b) black (c) cyan (d) red
7. 7.🖼️ Which picture file does the browser load?
   <img src="map.png" alt="Map of India" width="400"> (a) dog.jpg (b) map.png (c) Map of India (d) cake.jpg
8. 8.🔠 How many headings are in this code?
   <h1>Cricket is fun.</h1>
   <p>Our school trip</p>
   <p>Our school trip</p>
9. 9.⚖️ What colour is the text of this element?
   <h1 class="red" id="main">Hi</h1>
   CSS:
   .red { color: orange; }
   .red { color: purple; } (a) purple (b) orange (c) green (d) white
10. 10.🧩 An opening tag + content + a closing tag together make an ___. (a) attribute (b) element (c) address (d) editor
11. 11.🔗 Which address opens when you click this link?
    <a href="games.html">Play games</a> (a) Play games (b) contact.html (c) games.html (d) about.html
12. 12.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Art Gallery</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) Art Gallery (b) Welcome! (c) body (d) I like to read.
13. 13.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 8; i = i + 2) {
      console.log(i);
    }
14. 14.🌈 Which colour of light is strongest in rgb(47, 54, 202)? (a) green (b) red (c) blue
15. 15.True or false: <main> is the page’s key part. (a) False (b) True
16. 16.📝 Does <ul> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
17. 17.🔠 Which heading shows the BIGGEST text: <h1>, <h6>, <h2> or <h5>? (a) <h6> (b) <h1> (c) <h2> (d) <h5>
18. 18.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="250"> (a) fort.jpg (b) tiger.jpg (c) kite.png (d) An old fort
19. 19.True or false: <li> is an empty tag. (a) True (b) False
20. 20.🔢 To build and share your first web page, which comes LAST? (a) write the HTML (b) publish it online (c) add CSS styles (d) plan what to show
21. 21.True or false: <li> lists things in any order. (a) False (b) True
22. 22.⚡ What does this code print? (Look at the quotes!)
    let x = "4";
    let y = 4;
    console.log(x + y); (a) Error (b) 44 (c) 8
23. 23.🧩 Which language gives the page structure? (a) JavaScript (b) CSS (c) HTML
24. 24.🔠 Which heading shows the SMALLEST text: <h2>, <h4>, <h3> or <h6>? (a) <h2> (b) <h3> (c) <h4> (d) <h6>
25. 25.🌈 In #190000 the red part is the hex number 19. What is it as a normal number?
26. 26.🚀 Which file should this code go in: <p>Hello!</p> (a) style.css (b) script.js (c) index.html
27. 27.🔒 Is the connection to this address scrambled (encrypted)?
    http://www.example.net/maths/tables.html (a) No (b) Yes
28. 28.🏷️ Is <h1> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
29. 29.What is <input type="checkbox"> for? (a) hides what you type (b) is for one line of words (c) lets you pick only one (d) lets you tick many
30. 30.🔁 What does this code print?
    let age = 21;
    if (age < 10) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) child (b) teen
31. 31.True or false: HTML gives the page structure. (a) True (b) False
32. 32.🎯 How many elements on a page should have the same id? (a) any number (b) 1 (c) 2 (d) 5
33. 33.True or false: .menu is a class selector. (a) False (b) True
34. 34.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 3; i++) {
      total = total + 3;
    }
    console.log(total);
35. 35.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 8; i++) {
      total = total + 8;
    }
    console.log(total);
36. 36.🔠 Which heading shows the BIGGEST text: <h3>, <h1>, <h6> or <h2>? (a) <h3> (b) <h6> (c) <h1> (d) <h2>
37. 37.💪 Which flexbox property picks row or column? (a) gap (b) align-items (c) display: flex (d) flex-direction
38. 38.🔗 Which address opens when you click this link?
    <a href="news.html">Maths fun</a> (a) games.html (b) quiz.html (c) Maths fun (d) news.html
39. 39.✍️ What value is given to background-color in this rule?
    body {
      margin: 10px;
      width: 300px;
      background-color: yellow;
    } (a) 10px (b) background-color (c) 8px (d) yellow
40. 40.True or false: <h1>My Site</h1> goes in index.html. (a) False (b) True

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