Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 688 · 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 of these is not safe to do online? (a) use a nickname in games (b) ask before downloading (c) click prize links (d) think before you post
2. 2.💬 Which text will NOT show on the page?
   <p>My best friend</p>
   <!-- <p>My pets</p> -->
   <p>I love mangoes.</p>
   <p>Rain today</p> (a) Rain today (b) I love mangoes. (c) My pets (d) My best friend
3. 3.🎯 What kind of selector is p? (a) an id selector (b) an element selector (c) a class selector
4. 4.🌍 Which one stores the site’s files? (a) the browser (b) HTTPS (c) the URL (d) the server
5. 5.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 10px;
     }
   }
6. 6.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Space Facts</title>
   </head>
   <body>
     <h1>My drawings</h1>
     <p>I like to read.</p>
   </body>
   </html> (a) Space Facts (b) My drawings (c) index.html (d) I like to read.
7. 7.🌍 What does a web address (URL) tell the browser? (a) how old you are (b) the page colour (c) where the page is (d) your password
8. 8.What is <input type="email"> for? (a) is for an email address (b) is for one line of words (c) lets you tick many (d) lets you pick only one
9. 9.💬 How many paragraphs show on the page?
   <!-- <p>My pets</p> -->
   <p>I love mangoes.</p>
   <p>Cricket is fun.</p>
10. 10.🎯 Which sign starts a class selector? (a) @ (b) . (c) # (d) &
11. 11.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 5px;
      border: 1px solid black;
      margin: 0px;
    }
12. 12.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 5; i++) {
      total = total + i;
    }
    console.log(total);
13. 13.True or false: .star is an element selector. (a) True (b) False
14. 14.🖌️ What colour are the letters?
    p {
      font-size: 28px;
      color: purple;
      text-align: center;
      background-color: blue;
    } (a) yellow (b) purple (c) blue
15. 15.⚖️ What colour is the text of this element?
    <h2 class="big" id="end">Hi</h2>
    CSS:
    .big { color: green; }
    .big { color: blue; } (a) yellow (b) black (c) blue (d) green
16. 16.Which of these does JavaScript do? (a) makes a form box (b) lays out the page (c) puts a picture on a page (d) checks a quiz answer
17. 17.🔠 Which tag is the least important heading? (a) <h1> (b) <h3> (c) <p> (d) <h6>
18. 18.📝 How many paragraphs does this code make?
    <p>Hello, world!</p>
    <p>Fun facts</p>
    <p>Our school trip</p>
    <p>Rain today</p>
    <h2>My best friend</h2>
19. 19.📄 Where does <link rel="stylesheet"> go: in the head or in the body? (a) in the head (b) in the body
20. 20.True or false: #main is an id selector. (a) True (b) False
21. 21.True or false: HTML on its own cannot run a game loop. (a) True (b) False
22. 22.🖌️ Which CSS property sets the letter colour? (a) text-align (b) font-size (c) background-color (d) color
23. 23.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 11; i = i + 4) {
      console.log(i);
    }
24. 24.🔁 How many times does this code print “Hello”?
    for (let i = 3; i <= 6; i++) {
      console.log("Hello");
    }
25. 25.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    }
26. 26.📄 Where does <title> go: in the head or in the body? (a) in the body (b) in the head
27. 27.📦 In the box model, which part is a solid or dotted edge? (a) border (b) margin (c) content (d) padding
28. 28.⚡ Which JavaScript word writes in the console? (a) alert() (b) console.log() (c) let (d) if
29. 29.🌈 Which colour of light is strongest in rgb(196, 59, 67)? (a) red (b) green (c) blue
30. 30.🔗 Which address opens when you click this link?
    <a href="games.html">Art corner</a> (a) contact.html (b) Art corner (c) games.html (d) about.html
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      padding: 8px;
      width: 300px;
    }
32. 32.🖌️ What colour is behind the letters?
    li {
      background-color: white;
      color: red;
      text-align: center;
      font-size: 40px;
    } (a) purple (b) white (c) red
33. 33.🔠 Which heading shows the SMALLEST text: <h2>, <h4>, <h5> or <h3>? (a) <h2> (b) <h5> (c) <h4> (d) <h3>
34. 34.📝 Which input type picks a day? (a) email (b) password (c) submit (d) date
35. 35.🔗 Which words do you click on?
    <a href="art.html">About us</a> (a) art.html (b) href (c) About us (d) Contact us
36. 36.Which of these is a strong password? (a) abcd1234 (b) password (c) 123456 (d) Kite_Fl1es@Dawn
37. 37.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    }
38. 38.🖼️ How many pixels wide is the picture drawn?
    <img src="kite.png" alt="A red kite" width="300">
39. 39.🔢 In a basic web page file, which comes first: “</head>” or “<head>”? (a) <head> (b) </head>
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 60px wide (no margins).

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