Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 636 · 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.🖌️ What colour are the letters?
   li {
     text-align: right;
     background-color: black;
     font-size: 16px;
     color: green;
   } (a) blue (b) black (c) green
2. 2.True or false: alert(score); goes in script.js. (a) False (b) True
3. 3.🔗 Which address opens when you click this link?
   <a href="news.html">Maths fun</a> (a) games.html (b) news.html (c) quiz.html (d) Maths fun
4. 4.True or false: a code editor colours code to help us. (a) True (b) False
5. 5.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Cascading Style Sheets (c) Creative Sheet System (d) Computer Style Sheets
6. 6.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 180px;
     padding: 20px;
     border: 3px solid black;
     margin: 0px;
   }
7. 7.🌍 What does a web address (URL) tell the browser? (a) where the page is (b) your password (c) how old you are (d) the page colour
8. 8.💬 How many paragraphs show on the page?
   <!-- <p>Fun facts</p> -->
   <p>Our school trip</p>
   <p>I love mangoes.</p>
   <!-- <p>Good morning!</p> -->
   <!-- <p>My pets</p> -->
9. 9.📝 How many <input> tags are in this form?
   <form>
     <input type="checkbox">
     <input type="password">
     <input type="text">
     <input type="date">
     <input type="email">
     <input type="submit" value="Send">
   </form>
10. 10.What does justify-content: center do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
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: 150px;
      padding: 20px;
      border: 3px solid black;
      margin: 10px;
    }
12. 12.💬 Why do coders write comments? (a) to make links (b) to show pictures (c) to add colour (d) to leave notes
13. 13.📋 Does this list show bullets or numbers?
    <ul>
      <li>Litchi</li>
      <li>Grapes</li>
      <li>Mango</li>
    </ul> (a) bullets (b) numbers
14. 14.🖌️ Which CSS property makes letters bigger? (a) color (b) font-weight (c) background-color (d) font-size
15. 15.💬 Which text will NOT show on the page?
    <!-- <p>My pets</p> -->
    <p>I love mangoes.</p>
    <p>Fun facts</p> (a) My pets (b) I love mangoes. (c) Fun facts
16. 16.📝 Which input type picks a day? (a) submit (b) date (c) text (d) checkbox
17. 17.True or false: the browser stores the site’s files. (a) False (b) True
18. 18.🎯 Which sign starts a class selector? (a) & (b) # (c) . (d) @
19. 19.📝 Does <title> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
20. 20.🔢 In a basic web page file, which comes LAST? (a) <!DOCTYPE html> (b) </html> (c) <head> (d) <body>
21. 21.🎯 What kind of selector is .menu? (a) an id selector (b) an element selector (c) a class selector
22. 22.⚡ What does this code show?
    let name = "Aman";
    alert("Well done, " + name + "!"); (a) Aman (b) name (c) Well done, Aman! (d) Well done, name!
23. 23.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) black (c) red (d) green
24. 24.🔠 Which tag is the least important heading? (a) <h6> (b) <p> (c) <h3> (d) <h1>
25. 25.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    }
26. 26.True or false: in <img>, width tells which image to load. (a) False (b) True
27. 27.Which colour pair is easy to read? (a) blue on purple (b) pink on red (c) white on dark blue (d) red on green
28. 28.🌍 Which one sends the page back? (a) the URL (b) the browser (c) HTTPS (d) the server
29. 29.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the later one (d) the shorter one
30. 30.🔠 Which heading shows the BIGGEST text: <h2>, <h1>, <h3> or <h6>? (a) <h2> (b) <h3> (c) <h1> (d) <h6>
31. 31.⚡ Where does console.log() show its output? (a) on the printer (b) in the address bar (c) in the console (d) on the title bar
32. 32.🏷️ Every HTML tag starts with which sign? (a) ( (b) < (c) [ (d) {
33. 33.🖼️ How many pixels wide is the picture drawn?
    <img src="kite.png" alt="A red kite" width="400">
34. 34.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      font-style: italic;
      border: 2px solid;
      color: red;
      background-color: yellow;
    }
35. 35.🧭 Which semantic tag is the page’s key part? (a) <article> (b) <footer> (c) <main> (d) <header>
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      color: red;
      margin: 10px;
    }
37. 37.✍️ What is the selector in this CSS rule?
    #top {
      padding: 8px;
      font-size: 20px;
    } (a) #top (b) li (c) 20px (d) padding
38. 38.⚡ What number does this code print?
    let a = 26;
    let b = 28;
    console.log(a + b);
39. 39.Which of these is not safe to do online? (a) keep passwords secret (b) put secrets in comments (c) tell a trusted adult (d) use a nickname in games
40. 40.True or false: <ul> goes in the body. (a) False (b) True

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