← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 183 · 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.🔢 On a typical page, from top to bottom, what comes right after “<header>”? (a) <footer> (b) <main> (c) <nav>
  2. 2.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 14px;
      }
    }
  3. 3.📝 How many paragraphs does this code make?
    <p>Fun facts</p>
    <p>My pets</p>
    <p>I love mangoes.</p>
    <p>My pets</p>
    <p>The red kite</p>
    <h2>The red kite</h2>
  4. 4.True or false: <ul> is one item of a list. (a) False (b) True
  5. 5.Which of these is margin? (a) space inside the border (b) space outside the border (c) the gap round content (d) a solid or dotted edge
  6. 6.🌗 Is light grey on white easy or hard to read? (a) easy to read (b) hard to read
  7. 7.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
  8. 8.True or false: h1 is an id selector. (a) False (b) True
  9. 9.📝 Which tag makes a big box for many lines of text? (a) <textarea> (b) <p> (c) <input> (d) <br>
  10. 10.🔁 How many times does this code print “Hi”?
    for (let i = 2; i <= 7; i++) {
      console.log("Hi");
    }
  11. 11.Which of these does HTML do? (a) puts a picture on a page (b) changes the text size (c) changes the page live (d) adds space around boxes
  12. 12.💬 How many paragraphs show on the page?
    <!-- <p>Rain today</p> -->
    <p>Hello, world!</p>
    <p>I love mangoes.</p>
    <!-- <p>The red kite</p> -->
  13. 13.🔍 One closing tag is missing. Which one?
    <strong>The red kite</strong>
    <h3>My best friend
    <i>I love mangoes.</i>
    (a) </strong> (b) </i> (c) </h3> (d) </small>
  14. 14.🚀 Which file should this code go in: <img src="cat.png"> (a) style.css (b) script.js (c) index.html
  15. 15.🏷️ Which is the closing tag for <em>? (a) <\em> (b) <em> (c) </em> (d) <em/>
  16. 16.Which of these is an empty tag? (a) <title> (b) <ul> (c) <input> (d) <li>
  17. 17.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <p>Good morning!</p>
    <p>My pets</p>
    <p>Hello, world!</p>
  18. 18.🔢 When you open a web page, which comes first: “the browser asks it” or “DNS finds the server”? (a) DNS finds the server (b) the browser asks it
  19. 19.🌐 Which one opens web pages for us? (a) a code editor (b) a web server (c) a web browser
  20. 20.💬 How many paragraphs show on the page?
    <p>Hello, world!</p>
    <!-- <p>My pets</p> -->
    <p>My best friend</p>
  21. 21.🔠 Which heading shows the SMALLEST text: <h4>, <h3>, <h6> or <h1>? (a) <h1> (b) <h3> (c) <h6> (d) <h4>
  22. 22.🖌️ How big is the text, in px?
    h2 {
      text-align: center;
      color: green;
      font-size: 12px;
      background-color: white;
    }
  23. 23.🔍 Which is the odd one out? (a) saves our .html files (b) colours code to help us (c) shows pages from the web (d) shows line numbers
  24. 24.🛡️ Online: is it safe to put secrets in comments? (a) safe (b) not safe
  25. 25.📦 In the box model, which part is the gap to other boxes? (a) margin (b) content (c) border (d) padding
  26. 26.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) never changes (d) fits every screen
  27. 27.📋 What number does the browser show next to “Jamun”?
    <ol>
      <li>Guava</li>
      <li>Jamun</li>
      <li>Mango</li>
    </ol>
  28. 28.True or false: let score = 0; goes in style.css. (a) True (b) False
  29. 29.Which of these does JavaScript do? (a) checks a quiz answer (b) makes headings and lists (c) gives the page structure (d) adds space around boxes
  30. 30.True or false: the border is the gap round content. (a) False (b) True
  31. 31.📝 Which input type hides what you type? (a) radio (b) date (c) password (d) email
  32. 32.🔗 Which tag makes a clickable link? (a) <link> (b) <a> (c) <p> (d) <img>
  33. 33.True or false: a web server answers page requests. (a) False (b) True
  34. 34.✍️ What is the selector in this CSS rule?
    #top {
      font-size: 20px;
      width: 300px;
    }
    (a) li (b) font-size (c) #top (d) 300px
  35. 35.🔍 Which is the odd one out? (a) opens web pages for us (b) turns HTML into a page (c) has an address bar (d) is where we type code
  36. 36.🛡️ Is it safe to use the same password on every site? (a) Yes (b) No
  37. 37.🌍 What is the domain name in this URL?
    https://learn.example.com/about.html
    (a) /about.html (b) learn.example.com (c) https (d) www.example.com
  38. 38.🎯 Can many elements share the same class? (a) No (b) Yes
  39. 39.True or false: a web server shows pages from the web. (a) False (b) True
  40. 40.🔗 Which words do you click on?
    <a href="about.html">Visit the site</a>
    (a) Maths fun (b) href (c) Visit the site (d) about.html

Answer key

  1. <nav>
  2. 14
  3. 5
  4. False
  5. space outside the border
  6. hard to read
  7. 10
  8. False
  9. <textarea>
  10. 6
  11. puts a picture on a page
  12. 2
  13. </h3>
  14. index.html
  15. </em>
  16. <input>
  17. 1
  18. DNS finds the server
  19. a web browser
  20. 2
  21. <h6>
  22. 12
  23. shows pages from the web
  24. not safe
  25. margin
  26. fits every screen
  27. 2
  28. False
  29. checks a quiz answer
  30. False
  31. password
  32. <a>
  33. True
  34. #top
  35. is where we type code
  36. No
  37. learn.example.com
  38. Yes
  39. False
  40. Visit the site

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