Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 485 · 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 heading shows the SMALLEST text: <h2>, <h5>, <h4> or <h1>? (a) <h4> (b) <h5> (c) <h2> (d) <h1>
2. 2.What is <input type="checkbox"> for? (a) lets you tick many (b) hides what you type (c) picks a day (d) is for an email address
3. 3.Which of these is margin? (a) the text or picture (b) space inside the border (c) the line round the box (d) the gap to other boxes
4. 4.⚡ What does this code print? (Look at the quotes!)
   let x = "5";
   let y = 1;
   console.log(x + y); (a) 51 (b) Error (c) 6
5. 5.🔠 Which heading shows the SMALLEST text: <h3>, <h2>, <h1> or <h6>? (a) <h2> (b) <h1> (c) <h3> (d) <h6>
6. 6.🔢 To build and share your first web page, which comes first: “test in a browser” or “add CSS styles”? (a) add CSS styles (b) test in a browser
7. 7.True or false: alert("Hi"); goes in script.js. (a) True (b) False
8. 8.🌗 Is yellow on black easy or hard to read? (a) hard to read (b) easy to read
9. 9.✍️ How many declarations (property: value pairs) are in this rule?
   #top {
     font-size: 20px;
   }
10. 10.📦 In the box model, which part is the gap to other boxes? (a) border (b) content (c) padding (d) margin
11. 11.⚡ Which word makes a new variable? (a) make (b) give (c) put (d) let
12. 12.🔗 What does target="_blank" do to a link? (a) makes it bold (b) opens it in a new tab (c) hides the link (d) makes it blank
13. 13.💪 Which flexbox property turns on flexbox? (a) align-items (b) display: flex (c) flex-direction (d) justify-content
14. 14.🖼️ Why do we add alt text to an image? (a) to make it bigger (b) to colour it (c) to load it faster (d) to describe the image
15. 15.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
16. 16.🔗 Which address opens when you click this link?
    <a href="games.html">Take the quiz</a> (a) about.html (b) Take the quiz (c) contact.html (d) games.html
17. 17.True or false: #top { color: blue; } goes in style.css. (a) False (b) True
18. 18.📝 How many <input> tags are in this form?
    <form>
      <input type="number">
      <input type="password">
      <input type="text">
      <input type="date">
      <input type="email">
      <input type="submit" value="Send">
    </form>
19. 19.💬 How does an HTML comment end? (a) // (b) >> (c) */ (d) -->
20. 20.🖼️ Does <img> need a closing tag? (a) No (b) Yes
21. 21.🖌️ Where does the text sit on its line?
    li {
      font-size: 28px;
      text-align: left;
      color: yellow;
      background-color: red;
    } (a) on the right (b) on the left (c) in the middle
22. 22.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
23. 23.True or false: <input type="password"> hides what you type. (a) False (b) True
24. 24.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
25. 25.📄 Where does the text of <title> appear? (a) on the browser tab (b) nowhere (c) in a big heading (d) at the bottom
26. 26.🔐 Is qwerty a strong or a weak password? (a) weak (b) strong
27. 27.📄 Where does <h1> go: in the head or in the body? (a) in the body (b) in the head
28. 28.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <h2>Good morning!</h2>
    <p>Hello, world!</p>
29. 29.🔁 How many times does this code print “Welcome”?
    for (let i = 3; i < 5; i++) {
      console.log("Welcome");
    }
30. 30.🏷️ Which is the closing tag for <strong>? (a) <strong/> (b) <\strong> (c) <strong> (d) </strong>
31. 31.🧩 An opening tag + content + a closing tag together make an ___. (a) editor (b) attribute (c) address (d) element
32. 32.🖌️ What colour are the letters?
    li {
      text-align: right;
      background-color: green;
      color: black;
      font-size: 20px;
    } (a) green (b) orange (c) black
33. 33.📋 Which list tag is an unordered list? (a) <li> (b) <ol> (c) <ul>
34. 34.💬 Which text will NOT show on the page?
    <!-- <p>Cricket is fun.</p> -->
    <p>The red kite</p>
    <p>Rain today</p>
    <p>Fun facts</p> (a) Rain today (b) Fun facts (c) The red kite (d) Cricket is fun.
35. 35.Which of these is the content? (a) the text or picture (b) the line round the box (c) space inside the border (d) the gap to other boxes
36. 36.🔠 How many headings are in this code?
    <h1>Fun facts</h1>
    <p>My best friend</p>
    <p>My pets</p>
37. 37.📝 What does a password box show instead of letters? (a) emojis (b) capital letters (c) numbers (d) dots
38. 38.🔍 One closing tag is missing. Which one?
    <u>Good morning!
    <p>My pets</p>
    <h3>Cricket is fun.</h3> (a) </u> (b) </i> (c) </p> (d) </h3>
39. 39.Which of these goes in the head? (a) <table> (b) <h1> (c) <meta charset="utf-8"> (d) <a>
40. 40.Which of these does JavaScript do? (a) changes the text size (b) makes headings and lists (c) sets colours and fonts (d) reacts to a button click

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