Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 812 · 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.🔢 On a typical page, from top to bottom, which comes first: “<header>” or “<nav>”? (a) <header> (b) <nav>
2. 2.🔁 What does this code print?
   let score = 6;
   if (score >= 26) {
     console.log("You win");
   } else {
     console.log("Play again");
   } (a) You win (b) Play again
3. 3.🔍 Which is the odd one out? (a) stores a website’s files (b) answers page requests (c) sends pages over the net (d) opens web pages for us
4. 4.🧩 Which language makes headings and lists? (a) JavaScript (b) CSS (c) HTML
5. 5.🔠 Which heading shows the SMALLEST text: <h1>, <h4>, <h5> or <h6>? (a) <h1> (b) <h5> (c) <h4> (d) <h6>
6. 6.🔠 How many heading levels does HTML have? (a) 3 (b) 4 (c) 10 (d) 6
7. 7.🎯 Which CSS selector matches this element?
   <h1 class="big" id="logo">Hello</h1> (a) h2 (b) #end (c) .big (d) #big
8. 8.📋 Does this list show bullets or numbers?
   <ul>
     <li>Litchi</li>
     <li>Mango</li>
     <li>Jamun</li>
   </ul> (a) numbers (b) bullets
9. 9.🔗 Where does this link open?
   <a href="quiz.html">Contact us</a> (a) in the same tab (b) in a new tab
10. 10.🔁 Which loop repeats code a set number of times? (a) let (b) else (c) if (d) for
11. 11.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 190px;
      padding: 10px;
      border: 3px solid black;
      margin: 0px;
    }
12. 12.What does font-size do? (a) colours behind the text (b) picks the font style (c) makes letters bigger (d) sets the letter colour
13. 13.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) center (c) flex-end (d) flex-start
14. 14.🛡️ Online: is it safe to download from pop-ups? (a) not safe (b) safe
15. 15.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 8; i = i + 2) {
      console.log(i);
    }
16. 16.What does font-family do? (a) picks the font style (b) makes the text bold (c) centres a heading (d) colours behind the text
17. 17.🔠 Which tag is used for the main title on a page? (a) <h6> (b) <br> (c) <p> (d) <h1>
18. 18.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 10px;
      border: 4px solid black;
      margin: 20px;
    }
19. 19.🚀 Which file should this code go in: body { margin: 0; } (a) script.js (b) index.html (c) style.css
20. 20.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 50px wide (no margins).
21. 21.🖼️ How many pixels wide is the picture drawn?
    <img src="map.png" alt="Map of India" width="250">
22. 22.🎯 Which sign starts a class selector? (a) & (b) . (c) @ (d) #
23. 23.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="bus.jpg" alt="Our school bus" width="200"> (a) Our school bus (b) width (c) bus.jpg (d) An old fort
24. 24.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 20px;
      border: 2px solid black;
      margin: 15px;
    }
25. 25.True or false: HTML on its own cannot show paragraphs. (a) False (b) True
26. 26.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
27. 27.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
28. 28.True or false: <table> holds the whole table. (a) True (b) False
29. 29.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    p { color: white; }
    #logo { color: blue; } (a) white (b) black (c) blue (d) purple
30. 30.🔢 When you open a web page, which comes LAST? (a) the browser asks it (b) DNS finds the server (c) the server sends files (d) the browser shows it
31. 31.🏷️ Which is the closing tag for <b>? (a) <b> (b) <b/> (c) </b> (d) <\b>
32. 32.True or false: <meta charset="utf-8"> goes in the head. (a) True (b) False
33. 33.🎯 What kind of selector is li? (a) an id selector (b) a class selector (c) an element selector
34. 34.🔍 Which line is missing its closing tag?
    line 1: <h1>My pets
    line 2: <b>My best friend</b>
    line 3: <em>Fun facts</em> (a) line 2 (b) line 1 (c) line 3
35. 35.True or false: <a> goes in the body. (a) False (b) True
36. 36.🧭 Which semantic tag sits at the bottom? (a) <aside> (b) <footer> (c) <article> (d) <header>
37. 37.🔍 One closing tag is missing. Which one?
    <em>Good morning!
    <strong>My pets</strong>
    <h3>The red kite</h3> (a) </h3> (b) </h1> (c) </em> (d) </strong>
38. 38.🔍 One closing tag is missing. Which one?
    <h3>Good morning!</h3>
    <u>Hello, world!</u>
    <strong>Rain today (a) </h2> (b) </u> (c) </h3> (d) </strong>
39. 39.🔢 When you open a web page, what comes right after “the browser asks it”? (a) DNS finds the server (b) the browser shows it (c) the server sends files (d) you type the URL
40. 40.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 7; i++) {
      total = total + i;
    }
    console.log(total);

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