Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 170 · 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.True or false: <li> is one item of a list. (a) True (b) False
2. 2.True or false: JavaScript counts down a timer. (a) False (b) True
3. 3.📦 In the box model, which part is space outside the border? (a) padding (b) border (c) content (d) margin
4. 4.🔁 How many numbers does this code print?
   for (let i = 0; i < 13; i = i + 4) {
     console.log(i);
   }
5. 5.True or false: <ul> goes inside ul or ol. (a) True (b) False
6. 6.🌍 What is the protocol in this URL?
   https://school.example.in/games/chess.html (a) https (b) school.example.in (c) /games/chess.html (d) http
7. 7.True or false: padding is the gap round content. (a) True (b) False
8. 8.True or false: <h1> goes in the head. (a) True (b) False
9. 9.True or false: score = score + 1; goes in script.js. (a) False (b) True
10. 10.What does font-family do? (a) sets the letter colour (b) makes letters bigger (c) centres a heading (d) picks the font style
11. 11.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
12. 12.🖼️ Which picture file does the browser load?
    <img src="tiger.jpg" alt="A tiger asleep" width="400"> (a) tiger.jpg (b) map.png (c) kite.png (d) A tiger asleep
13. 13.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 200px;
      padding: 20px;
      border: 2px solid black;
      margin: 5px;
    }
14. 14.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) helps everyone (b) makes it harder
15. 15.🛡️ Is it safe to use the same password on every site? (a) No (b) Yes
16. 16.True or false: .big is an id selector. (a) False (b) True
17. 17.🎯 Which CSS selector matches this element?
    <span class="note" id="logo">Hello</span> (a) #note (b) #end (c) span (d) .logo
18. 18.True or false: <ol> shows bullet points. (a) False (b) True
19. 19.⚡ What number does this code print?
    let score = 27;
    score = score + 12;
    score = score - 13;
    console.log(score);
20. 20.🔁 What does i++ do? (a) doubles i (b) prints i (c) takes 1 from i (d) adds 1 to i
21. 21.🌈 In #0000c6 the blue part is the hex number c6. What is it as a normal number?
22. 22.📝 What does <hr> draw? (a) a line across the page (b) a table (c) a link (d) a picture
23. 23.📝 Does <br> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
24. 24.🔗 Which address opens when you click this link?
    <a href="news.html">About us</a> (a) news.html (b) About us (c) games.html (d) quiz.html
25. 25.📋 Which tag goes around each item of a list? (a) <ol> (b) <li> (c) <ul> (d) <p>
26. 26.✍️ What is the selector in this CSS rule?
    .note {
      border: 2px solid;
      text-align: center;
      font-style: italic;
      font-weight: bold;
    } (a) .note (b) #top (c) center (d) border
27. 27.🌍 What is the domain name in this URL?
    https://www.example.com/index.html (a) kids.example.org (b) www.example.com (c) /index.html (d) https
28. 28.🌍 Which one asks for a web page? (a) the server (b) the URL (c) HTTPS (d) the browser
29. 29.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 10px;
      border: 4px solid black;
      margin: 20px;
    }
30. 30.📄 Where does <title> go: in the head or in the body? (a) in the head (b) in the body
31. 31.🖼️ How many pixels wide is the picture drawn?
    <img src="map.png" alt="Map of India" width="300">
32. 32.🔢 In a basic web page file, which comes first: “</html>” or “<head>”? (a) <head> (b) </html>
33. 33.📝 On how many lines does the browser show this paragraph?
    <p>Kites fly high<br>Roses are red<br>Rivers flow<br>Birds sing</p>
34. 34.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Art Gallery</title>
    </head>
    <body>
      <h1>All about me</h1>
      <p>We won by 5 runs.</p>
    </body>
    </html> (a) All about me (b) Art Gallery (c) We won by 5 runs. (d) body
35. 35.🔠 How many headings are in this code?
    <h1>The red kite</h1>
    <h2>Fun facts</h2>
    <h3>The red kite</h3>
    <h4>My best friend</h4>
36. 36.🔗 Which words do you click on?
    <a href="maths.html">School news</a> (a) maths.html (b) Take the quiz (c) href (d) School news
37. 37.🚀 Which file should this code go in: <ul><li>Art</li></ul> (a) style.css (b) index.html (c) script.js
38. 38.Which of these is the content? (a) the gap to other boxes (b) a solid or dotted edge (c) space outside the border (d) the text or picture
39. 39.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 10; i = i + 2) {
      console.log(i);
    }
40. 40.🔍 One closing tag is missing. Which one?
    <h2>I love mangoes.</h2>
    <em>Our school trip
    <small>The red kite</small> (a) </small> (b) </h3> (c) </h2> (d) </em>

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