← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 689 · 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.🎯 Which CSS selector matches this element?
    <h1 class="star" id="end">Hello</h1>     (a) #end (b) #hero (c) #star (d) .end
  2. 2.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) { } (d) [ ]
  3. 3.🔗 Which address opens when you click this link?
    <a href="quiz.html">About us</a>     (a) about.html (b) quiz.html (c) games.html (d) About us
  4. 4.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="tiger.jpg" alt="A tiger asleep" width="100">     (a) width (b) A red kite (c) tiger.jpg (d) A tiger asleep
  5. 5.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 6px;
      }
    }
  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 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
  8. 8.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Banana
      <input type="checkbox" name="fruit"> Litchi
      <input type="checkbox" name="fruit"> Papaya
    </form>
  9. 9.True or false: a web server hosts websites online. (a) False (b) True
  10. 10.🔒 Is the connection to this address scrambled (encrypted)?
    http://www.example.com/news/today.html     (a) No (b) Yes
  11. 11.📄 Where does <h1> go: in the head or in the body? (a) in the head (b) in the body
  12. 12.True or false: <img src="cat.png"> goes in style.css. (a) True (b) False
  13. 13.🔠 Which heading shows the SMALLEST text: <h1>, <h6>, <h4> or <h5>? (a) <h4> (b) <h1> (c) <h5> (d) <h6>
  14. 14.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
  15. 15.🎯 Which sign starts a class selector? (a) # (b) & (c) . (d) @
  16. 16.Which of these is a strong password? (a) riya2014 (b) iloveyou (c) S0lar!Pen#8 (d) abcd1234
  17. 17.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 4 (c) 2 (d) 3
  18. 18.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 50px;
      padding: 5px;
      border: 2px solid black;
      margin: 0px;
    }
  19. 19.What does font-size do? (a) colours behind the text (b) makes letters bigger (c) makes the text bold (d) picks the font style
  20. 20.Which of these is true of a code editor? (a) is where we type code (b) stores a website’s files (c) shows pages from the web (d) hosts websites online
  21. 21.🔢 On a typical page, from top to bottom, what comes right after “<nav>”? (a) <footer> (b) <main> (c) <header>
  22. 22.💪 Which flexbox property lines boxes up across? (a) justify-content (b) gap (c) flex-direction (d) align-items
  23. 23.True or false: <title> goes in the head. (a) True (b) False
  24. 24.📝 Which tag holds a whole form? (a) <table> (b) <ol> (c) <input> (d) <form>
  25. 25.📦 In the box model, which part is the gap round content? (a) border (b) padding (c) content (d) margin
  26. 26.🏷️ Every HTML tag starts with which sign? (a) < (b) [ (c) ( (d) {
  27. 27.📋 What number does the browser show next to “Grapes”?
    <ol start="3">
      <li>Banana</li>
      <li>Jamun</li>
      <li>Mango</li>
      <li>Grapes</li>
    </ol>
  28. 28.🔠 How many headings are in this code?
    <h1>Good morning!</h1>
    <p>My pets</p>
    <h4>My best friend</h4>
  29. 29.💬 How many paragraphs show on the page?
    <p>Good morning!</p>
    <!-- <p>My best friend</p> -->
    <!-- <p>Rain today</p> -->
  30. 30.🔒 Is the connection to this address scrambled (encrypted)?
    http://learn.example.com/art/gallery.html     (a) Yes (b) No
  31. 31.🧩 Which language reacts to a button click? (a) HTML (b) CSS (c) JavaScript
  32. 32.🏷️ What does a closing tag have that an opening tag does not? (a) a hash # (b) a slash / (c) a dot . (d) a dollar $
  33. 33.💬 How many paragraphs show on the page?
    <!-- <p>Rain today</p> -->
    <p>My best friend</p>
    <p>Our school trip</p>
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>The red kite</p> -->
  34. 34.📦 In the box model, which part is the text or picture? (a) content (b) margin (c) border (d) padding
  35. 35.🚀 Which file is best for code that reacts to clicks? (a) notes.txt (b) script.js (c) index.html (d) style.css
  36. 36.🔠 Which heading shows the SMALLEST text: <h6>, <h3>, <h1> or <h5>? (a) <h3> (b) <h1> (c) <h5> (d) <h6>
  37. 37.🔍 Which line is missing its closing tag?
    line 1: <i>My pets</i>
    line 2: <em>Hello, world!
    line 3: <h3>The red kite</h3>     (a) line 2 (b) line 3 (c) line 1
  38. 38.True or false: in <img>, src tells which image to load. (a) True (b) False
  39. 39.🌈 Which hex code is red? (a) #00ff00 (b) #ff0000 (c) #000000 (d) #00ffff
  40. 40.🔢 In a basic web page file, which comes first: “</head>” or “<html>”? (a) </head> (b) <html>

Answer key

  1. #end
  2. { }
  3. quiz.html
  4. A tiger asleep
  5. 6
  6. hard to read
  7. 8
  8. 3
  9. True
  10. No
  11. in the body
  12. False
  13. <h6>
  14. 16
  15. .
  16. S0lar!Pen#8
  17. 3
  18. 64
  19. makes letters bigger
  20. is where we type code
  21. <main>
  22. align-items
  23. True
  24. <form>
  25. padding
  26. <
  27. 6
  28. 2
  29. 1
  30. No
  31. JavaScript
  32. a slash /
  33. 2
  34. content
  35. script.js
  36. <h6>
  37. line 2
  38. True
  39. #ff0000
  40. <html>

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