Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 939 · 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.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 320px;
     justify-content: center;
   }
   Inside are 2 boxes, each 100px wide (no margins).
2. 2.True or false: the border is the line round the box. (a) False (b) True
3. 3.🔍 Which is the odd one out? (a) sends pages over the net (b) stores a website’s files (c) opens web pages for us (d) answers page requests
4. 4.🚀 Which file should this code go in: alert(score); (a) script.js (b) style.css (c) index.html
5. 5.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or wider (c) turned off (d) 800px or narrower
6. 6.⚖️ What colour is the text of this element?
   <h2 class="red" id="top">Hi</h2>
   CSS:
   #top { color: purple; }
   #top { color: blue; } (a) purple (b) blue (c) green (d) white
7. 7.🔗 Where does this link open?
   <a href="news.html">Contact us</a> (a) in a new tab (b) in the same tab
8. 8.True or false: <input type="number"> is for an email address. (a) True (b) False
9. 9.⚖️ What colour is the text of this element?
   <h2 class="note" id="top">Hi</h2>
   CSS:
   #top { color: orange; }
   h2 { color: red; } (a) black (b) blue (c) orange (d) red
10. 10.🔁 When does the else part run? (a) when if is true (b) when if is false (c) always (d) never
11. 11.True or false: <ul><li>Art</li></ul> goes in style.css. (a) False (b) True
12. 12.📋 Which list tag is one item of a list? (a) <ol> (b) <li> (c) <ul>
13. 13.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 16px;
      }
    }
14. 14.🔠 Which heading shows the SMALLEST text: <h6>, <h2>, <h5> or <h4>? (a) <h6> (b) <h4> (c) <h5> (d) <h2>
15. 15.📄 Where does <p> go: in the head or in the body? (a) in the body (b) in the head
16. 16.🔁 How many times does this code print “Hello”?
    for (let i = 3; i < 10; i++) {
      console.log("Hello");
    }
17. 17.Which of these is true of <header>? (a) helps you move around (b) holds a side box of tips (c) holds the logo and title (d) holds one blog post
18. 18.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 20px;
      border: 2px solid black;
      margin: 20px;
    }
19. 19.⚡ Which word makes a new variable? (a) give (b) make (c) put (d) let
20. 20.True or false: HTML on its own can run a game loop. (a) False (b) True
21. 21.📦 In the box model, which part is the line round the box? (a) margin (b) content (c) padding (d) border
22. 22.🖌️ Where does the text sit on its line?
    li {
      text-align: left;
      color: yellow;
      background-color: black;
      font-size: 36px;
    } (a) on the left (b) in the middle (c) on the right
23. 23.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      padding: 8px;
      text-align: center;
      font-weight: bold;
    }
24. 24.Which of these is a strong password? (a) 111111 (b) password (c) 123456 (d) Kite_Fl1es@Dawn
25. 25.📝 Does <input> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
26. 26.🔍 Which line is missing its closing tag?
    line 1: <small>The red kite
    line 2: <b>Good morning!</b>
    line 3: <h1>Fun facts</h1> (a) line 2 (b) line 1 (c) line 3
27. 27.Which of these is a closing tag? (a) <b> (b) <h1> (c) </body> (d) <p>
28. 28.🔐 Is password a strong or a weak password? (a) strong (b) weak
29. 29.🌍 What is the protocol in this URL?
    https://www.example.com/games/chess.html (a) www.example.com (b) http (c) https (d) /games/chess.html
30. 30.Which of these is true of a web browser? (a) colours code to help us (b) sends pages over the net (c) shows line numbers (d) shows pages from the web
31. 31.🎯 Which CSS selector matches this element?
    <li class="note" id="end">Hello</li> (a) #hero (b) .note (c) .end (d) .big
32. 32.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Orange</td><td>Papaya</td><td>Orange</td><td>Litchi</td></tr>
      <tr><td>Jamun</td><td>Papaya</td><td>Grapes</td><td>Mango</td></tr>
    </table>
33. 33.🔗 Which address opens when you click this link?
    <a href="about.html">Visit the site</a> (a) contact.html (b) https://example.com (c) about.html (d) Visit the site
34. 34.💪 Which flexbox property turns on flexbox? (a) display: flex (b) justify-content (c) align-items (d) gap
35. 35.🔠 Which heading shows the SMALLEST text: <h4>, <h3>, <h5> or <h6>? (a) <h5> (b) <h4> (c) <h6> (d) <h3>
36. 36.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 140px;
      padding: 15px;
      border: 4px solid black;
      margin: 15px;
    }
37. 37.🔠 Which heading shows the SMALLEST text: <h1>, <h5>, <h6> or <h4>? (a) <h1> (b) <h5> (c) <h4> (d) <h6>
38. 38.True or false: .note is a class selector. (a) False (b) True
39. 39.🔍 Which is the odd one out? (a) gives the page structure (b) makes headings and lists (c) shows a pop-up message (d) makes a form box
40. 40.✍️ What value is given to margin in this rule?
    #top {
      border: 2px solid;
      font-weight: bold;
      margin: 10px;
    } (a) 8px (b) 10px (c) margin (d) bold

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