Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 322 · 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 colour is #0000ff? (a) white (b) cyan (c) blue (d) black
2. 2.🔠 Are headings shown in bold by default? (a) No (b) Yes
3. 3.🔢 When you open a web page, what comes right after “the server sends files”? (a) the browser shows it (b) you type the URL (c) DNS finds the server (d) the browser asks it
4. 4.🔠 Which heading shows the SMALLEST text: <h2>, <h5>, <h6> or <h1>? (a) <h6> (b) <h2> (c) <h1> (d) <h5>
5. 5.🔁 What does this code print?
   let score = 12;
   if (score > 33) {
     console.log("You win");
   } else {
     console.log("Play again");
   } (a) Play again (b) You win
6. 6.🌈 Which colour is rgb(0, 0, 255)? (a) cyan (b) blue (c) white (d) bright green
7. 7.True or false: a web server opens web pages for us. (a) False (b) True
8. 8.🔗 Which attribute holds the address of a link? (a) src (b) id (c) alt (d) href
9. 9.⚡ What does this code print? (Look at the quotes!)
   let x = "4";
   let y = 3;
   console.log(x + y); (a) Error (b) 7 (c) 43
10. 10.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>All about me</h1>
      <p>Thanks for visiting.</p>
    </body>
    </html> (a) Thanks for visiting. (b) body (c) All about me (d) My Hobbies
11. 11.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) turned off (d) 800px or wider
12. 12.📝 On how many lines does the browser show this paragraph?
    <p>Rivers flow<br>Stars shine<br>Sky is blue<br>Birds sing</p>
13. 13.🏷️ Is <h1> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
14. 14.🖼️ Which attribute of <img> tells which image to load? (a) height (b) alt (c) src (d) width
15. 15.💬 Why do coders write comments? (a) to add colour (b) to show pictures (c) to make links (d) to leave notes
16. 16.Which of these is true of a code editor? (a) opens web pages for us (b) hosts websites online (c) has an address bar (d) is where we type code
17. 17.Which colour pair is easy to read? (a) red on green (b) pink on red (c) white on dark blue (d) blue on purple
18. 18.📋 Which list tag shows 1, 2, 3 numbers? (a) <ol> (b) <ul> (c) <li>
19. 19.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    }
20. 20.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) index.html (b) I like to read. (c) My Hobbies (d) Welcome!
21. 21.♿ Who uses a screen reader? (a) only teachers (b) people who are blind (c) only robots (d) only coders
22. 22.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
23. 23.📦 In the box model, which part is the text or picture? (a) margin (b) padding (c) content (d) border
24. 24.True or false: “link text “click here”” helps everyone use the page. (a) True (b) False
25. 25.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 30px;
      }
    }
26. 26.Which colour pair is hard to read? (a) yellow on white (b) yellow on black (c) dark grey on white (d) black on white
27. 27.🔢 To build and share your first web page, what comes right after “write the HTML”? (a) publish it online (b) test in a browser (c) plan what to show (d) add CSS styles
28. 28.🔁 What does this code print?
    let temp = 10;
    if (temp > 15) {
      console.log("Hot");
    } else {
      console.log("Cool");
    } (a) Cool (b) Hot
29. 29.📋 Which list tag is one item of a list? (a) <ul> (b) <li> (c) <ol>
30. 30.♿ Does this help everyone, or make the page harder to use: tiny grey text? (a) makes it harder (b) helps everyone
31. 31.True or false: <input type="number"> picks a day. (a) True (b) False
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      width: 300px;
      color: red;
      font-size: 20px;
      font-weight: bold;
    }
33. 33.What does font-weight do? (a) makes letters bigger (b) makes the text bold (c) sets the letter colour (d) centres a heading
34. 34.True or false: p { color: red; } goes in index.html. (a) True (b) False
35. 35.🌈 Which colour of light is strongest in rgb(172, 57, 137)? (a) red (b) green (c) blue
36. 36.🧩 Which language checks a quiz answer? (a) HTML (b) JavaScript (c) CSS
37. 37.🔠 How many headings are in this code?
    <h1>Good morning!</h1>
    <h2>Our school trip</h2>
    <p>Hello, world!</p>
    <h4>I love mangoes.</h4>
38. 38.🎨 Which attribute adds CSS inside one tag? (a) src (b) alt (c) style (d) href
39. 39.📋 Which list tag is an ordered list? (a) <li> (b) <ul> (c) <ol>
40. 40.🔁 What does this code print?
    let marks = 20;
    if (marks > 17) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Try again (b) Pass

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