← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 157 · 40 questions
TalentJR

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.

NameDateTime takenScore ___ / 40
  1. 1.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    }
  2. 2.True or false: <ol> is an ordered list. (a) True (b) False
  3. 3.📋 What number does the browser show next to “Papaya”?
    <ol start="4">
      <li>Banana</li>
      <li>Orange</li>
      <li>Papaya</li>
      <li>Jamun</li>
    </ol>
  4. 4.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 270px;
      padding: 10px;
      border: 4px solid black;
      margin: 0px;
    }
  5. 5.📋 Which tag goes around each item of a list? (a) <ol> (b) <p> (c) <ul> (d) <li>
  6. 6.📄 Where does <a> go: in the head or in the body? (a) in the body (b) in the head
  7. 7.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 6; i++) {
      total = total + 9;
    }
    console.log(total);
  8. 8.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
  9. 9.⚖️ What colour is the text of this element?
    <p class="menu" id="main">Hi</p>
    CSS:
    #main { color: red; }
    #main { color: purple; }     (a) white (b) purple (c) black (d) red
  10. 10.Which of these is a weak password? (a) Rain#Drop_42! (b) abcd1234 (c) Mango#Kite29! (d) Chai$Cup_19x
  11. 11.⚖️ What colour is the text of this element?
    <p class="red" id="hero">Hi</p>
    CSS:
    p { color: orange; }
    #hero { color: green; }
    .red { color: blue; }     (a) orange (b) red (c) green (d) blue
  12. 12.💪 Which flexbox property sets space between boxes? (a) gap (b) display: flex (c) flex-direction (d) align-items
  13. 13.📝 Which input type is for an email address? (a) email (b) text (c) date (d) submit
  14. 14.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 30px;
      border: 5px solid black;
      margin: 0px;
    }
  15. 15.📝 Which tag makes a drop-down list? (a) <ol> (b) <select> (c) <li> (d) <ul>
  16. 16.♿ A part of the page is under a <h1> heading. Which tag should its sub-heading use? (a) <h5> (b) <h4> (c) <h6> (d) <h2>
  17. 17.✍️ How does a CSS comment start? (a) <!-- (b) // (c) /* (d) #
  18. 18.📛 In <a href="x.html">, what is href? (a) a closing tag (b) a comment (c) an attribute (d) an element name
  19. 19.🔒 Is the connection to this address scrambled (encrypted)?
    http://www.example.net/games/chess.html     (a) Yes (b) No
  20. 20.📝 Does <img> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
  21. 21.🖌️ How big is the text, in px?
    h2 {
      color: white;
      background-color: red;
      font-size: 16px;
      text-align: right;
    }
  22. 22.🌍 What do we call the computer that stores a website? (a) a keyboard (b) a mouse (c) a server (d) a printer
  23. 23.🔢 In a basic web page file, which comes first: “<head>” or “<body>”? (a) <head> (b) <body>
  24. 24.True or false: <br> has a closing tag. (a) False (b) True
  25. 25.What is <input type="email"> for? (a) lets you tick many (b) lets you pick only one (c) is for one line of words (d) is for an email address
  26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      color: red;
      width: 300px;
      font-style: italic;
    }
  27. 27.🔍 Which is the odd one out? (a) puts a picture on a page (b) checks a quiz answer (c) makes a form box (d) gives the page structure
  28. 28.🔍 Which is the odd one out? (a) has an address bar (b) opens web pages for us (c) shows pages from the web (d) colours code to help us
  29. 29.True or false: HTML on its own cannot show paragraphs. (a) True (b) False
  30. 30.📝 How many paragraphs does this code make?
    <p>Rain today</p>
    <p>Hello, world!</p>
    <p>The red kite</p>
    <p>Hello, world!</p>
    <h2>My pets</h2>
  31. 31.True or false: margin is space outside the border. (a) False (b) True
  32. 32.🔠 Which heading shows the BIGGEST text: <h2>, <h1>, <h6> or <h3>? (a) <h1> (b) <h6> (c) <h3> (d) <h2>
  33. 33.🔗 Which words do you click on?
    <a href="contact.html">Visit the site</a>     (a) Maths fun (b) href (c) Visit the site (d) contact.html
  34. 34.Which of these is an opening tag? (a) </h1> (b) <li> (c) </p> (d) </title>
  35. 35.🏷️ Is </h1> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
  36. 36.📝 How many paragraphs does this code make?
    <p>Rain today</p>
    <h2>Our school trip</h2>
    <p>I love mangoes.</p>
  37. 37.True or false: alert("Hi"); goes in index.html. (a) False (b) True
  38. 38.🔢 On a typical page, from top to bottom, which comes first: “<footer>” or “<nav>”? (a) <nav> (b) <footer>
  39. 39.📊 In a table, which tag is a row? (a) <tr> (b) <tb> (c) <th> (d) <td>
  40. 40.📝 Does <br> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag

Answer key

  1. 18
  2. True
  3. 6
  4. 298
  5. <li>
  6. in the body
  7. 54
  8. 12
  9. purple
  10. abcd1234
  11. green
  12. gap
  13. email
  14. 310
  15. <select>
  16. <h2>
  17. /*
  18. an attribute
  19. No
  20. an empty tag
  21. 16
  22. a server
  23. <head>
  24. False
  25. is for an email address
  26. 3
  27. checks a quiz answer
  28. colours code to help us
  29. False
  30. 4
  31. True
  32. <h1>
  33. Visit the site
  34. <li>
  35. a closing tag
  36. 2
  37. False
  38. <nav>
  39. <tr>
  40. an empty tag

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