Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 16 · 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.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 12px;
     }
   }
2. 2.🔗 Where does this link open?
   <a href="games.html">Maths fun</a> (a) in a new tab (b) in the same tab
3. 3.Which of these has a closing tag? (a) <meta> (b) <p> (c) <img> (d) <input>
4. 4.📝 On how many lines does the browser show this paragraph?
   <p>Sky is blue<br>Birds sing</p>
5. 5.⚡ What does JavaScript add to a web page? (a) only colours (b) actions and changes (c) the domain name (d) the page title
6. 6.🎯 Which CSS selector matches this element?
   <p class="star" id="main">Hello</p> (a) .main (b) #star (c) h1 (d) p
7. 7.🚀 Which tag loads script.js into a page? (a) <script src="script.js"> (b) <link script.js> (c) <js src="script.js"> (d) <a href="script.js">
8. 8.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 200px;
     padding: 30px;
     border: 1px solid black;
     margin: 0px;
   }
9. 9.🔡 Are HTML tag names usually written in small letters? (a) Yes (b) No
10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 50px wide (no margins).
11. 11.🔠 Which heading shows the SMALLEST text: <h2>, <h6>, <h3> or <h5>? (a) <h6> (b) <h3> (c) <h2> (d) <h5>
12. 12.True or false: <ul> goes in the head. (a) True (b) False
13. 13.🖼️ Which picture file does the browser load?
    <img src="kite.png" alt="A red kite" width="300"> (a) map.png (b) cake.jpg (c) kite.png (d) A red kite
14. 14.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 170px;
      padding: 20px;
      border: 3px solid black;
      margin: 20px;
    }
15. 15.Which of these does JavaScript do? (a) gives the page structure (b) changes the text size (c) makes headings and lists (d) checks a quiz answer
16. 16.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) black (c) red (d) green
17. 17.🖼️ Which attribute of <img> describes the picture? (a) height (b) alt (c) src (d) width
18. 18.⚡ What does this code print? (Look at the quotes!)
    let x = "8";
    let y = 4;
    console.log(x + y); (a) 84 (b) Error (c) 12
19. 19.🔁 How many times does this code print “Hi”?
    for (let i = 1; i < 4; i++) {
      console.log("Hi");
    }
20. 20.Which of these is an opening tag? (a) </p> (b) </body> (c) <p> (d) </title>
21. 21.🎯 How many elements on a page should have the same id? (a) 5 (b) 1 (c) 2 (d) any number
22. 22.Which of these goes in the body? (a) <title> (b) <p> (c) <style> (d) <link rel="stylesheet">
23. 23.🔠 Are headings shown in bold by default? (a) Yes (b) No
24. 24.🔁 What does this code print?
    let marks = 1;
    if (marks >= 34) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Try again (b) Pass
25. 25.True or false: to check for https first is not safe. (a) True (b) False
26. 26.🔗 Which words do you click on?
    <a href="https://example.com">Art corner</a> (a) href (b) https://example.com (c) Art corner (d) School news
27. 27.🚀 Which file should this code go in: <ul><li>Art</li></ul> (a) style.css (b) index.html (c) script.js
28. 28.True or false: <br> is an empty tag. (a) True (b) False
29. 29.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 3; i++) {
      total = total + 5;
    }
    console.log(total);
30. 30.📦 In the box model, which part is the text or picture? (a) padding (b) margin (c) border (d) content
31. 31.⚖️ What colour is the text of this element?
    <h1 class="big" id="top">Hi</h1>
    CSS:
    #top { color: white; }
    h1 { color: orange; } (a) yellow (b) white (c) orange (d) blue
32. 32.🛡️ Online: is it safe to post your home address? (a) safe (b) not safe
33. 33.🖼️ How many pixels wide is the picture drawn?
    <img src="bus.jpg" alt="Our school bus" width="400">
34. 34.📝 How many paragraphs does this code make?
    <p>Fun facts</p>
    <h2>Our school trip</h2>
    <h2>Our school trip</h2>
    <h2>Cricket is fun.</h2>
    <h2>The red kite</h2>
35. 35.🔍 Which is the odd one out? (a) makes headings and lists (b) gives the page structure (c) puts a picture on a page (d) rounds box corners
36. 36.🔠 Which heading shows the BIGGEST text: <h3>, <h2>, <h5> or <h6>? (a) <h6> (b) <h2> (c) <h5> (d) <h3>
37. 37.⚖️ What colour is the text of this element?
    <h2 class="star" id="main">Hi</h2>
    CSS:
    .star { color: black; }
    .star { color: blue; } (a) green (b) blue (c) black (d) orange
38. 38.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 530px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
39. 39.🌗 Is dark grey on white easy or hard to read? (a) hard to read (b) easy to read
40. 40.Which of these is true of a code editor? (a) opens web pages for us (b) hosts websites online (c) is where we type code (d) shows pages from the web

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