Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 430 · 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 language adds space around boxes? (a) JavaScript (b) HTML (c) CSS
2. 2.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 70px;
     padding: 30px;
     border: 1px solid black;
     margin: 0px;
   }
3. 3.🔠 How many headings are in this code?
   <h1>I love mangoes.</h1>
   <h4>My best friend</h4>
   <h2>Our school trip</h2>
   <p>Rain today</p>
   <h2>Fun facts</h2>
4. 4.Which of these is an opening tag? (a) </b> (b) </body> (c) <title> (d) </h1>
5. 5.📝 How many paragraphs does this code make?
   <p>Good morning!</p>
   <p>Hello, world!</p>
   <p>I love mangoes.</p>
   <h2>My best friend</h2>
6. 6.Which of these is safe to do online? (a) put secrets in comments (b) share your password (c) think before you post (d) meet an online stranger
7. 7.True or false: .box { padding: 8px; } goes in index.html. (a) False (b) True
8. 8.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 200px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 40px wide (no margins).
9. 9.Which of these is true of a web browser? (a) saves our .html files (b) opens web pages for us (c) is where we type code (d) shows line numbers
10. 10.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 180px;
      padding: 25px;
      border: 1px solid black;
      margin: 15px;
    }
11. 11.True or false: padding is space inside the border. (a) False (b) True
12. 12.🔁 What does this code print?
    let age = 5;
    if (age >= 45) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
13. 13.True or false: HTML shows a pop-up message. (a) False (b) True
14. 14.True or false: JavaScript checks a quiz answer. (a) False (b) True
15. 15.📋 Which list suits a shopping list in any order? (a) <br> (b) <ul> (c) <hr> (d) <ol>
16. 16.Which of these is an empty tag? (a) <title> (b) <li> (c) <input> (d) <ul>
17. 17.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 60px wide (no margins).
18. 18.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    .note { color: orange; }
    #top { color: blue; }
    p { color: white; } (a) white (b) orange (c) blue (d) purple
19. 19.⚡ Which tag holds JavaScript in a page? (a) <js> (b) <script> (c) <code> (d) <style>
20. 20.🔁 How many times does this code print “Welcome”?
    for (let i = 1; i < 9; i++) {
      console.log("Welcome");
    }
21. 21.🎯 Which sign starts an id selector? (a) . (b) @ (c) & (d) #
22. 22.True or false: <p>Hello!</p> goes in style.css. (a) False (b) True
23. 23.🧭 Which semantic tag holds copyright notes? (a) <footer> (b) <article> (c) <header> (d) <nav>
24. 24.🔠 Which tag is used for the main title on a page? (a) <br> (b) <h1> (c) <h6> (d) <p>
25. 25.True or false: <input type="radio"> is for an email address. (a) False (b) True
26. 26.🌈 Which hex code is bright green? (a) #00ff00 (b) #000000 (c) #ff00ff (d) #ff0000
27. 27.🖼️ Which attribute of <img> sets how tall it is? (a) alt (b) width (c) height (d) src
28. 28.True or false: <ul> shows bullet points. (a) True (b) False
29. 29.📄 Where does <ul> go: in the head or in the body? (a) in the head (b) in the body
30. 30.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 180px;
      padding: 10px;
      border: 4px solid black;
      margin: 0px;
    }
31. 31.⚡ Which JavaScript word shows a pop-up box? (a) alert() (b) let (c) if (d) console.log()
32. 32.True or false: <p> has a closing tag. (a) True (b) False
33. 33.🌈 Which colour is #ff0000? (a) white (b) red (c) magenta (d) black
34. 34.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 30px;
      border: 2px solid black;
      margin: 20px;
    }
35. 35.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Litchi
      <input type="checkbox" name="fruit"> Guava
      <input type="checkbox" name="fruit"> Banana
      <input type="checkbox" name="fruit"> Mango
    </form>
36. 36.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Litchi</td><td>Guava</td></tr>
    </table>
37. 37.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
38. 38.True or false: <aside> holds a side box of tips. (a) True (b) False
39. 39.🏷️ Every HTML tag starts with which sign? (a) [ (b) ( (c) < (d) {
40. 40.🎯 What kind of selector is .menu? (a) a class selector (b) an element selector (c) an id selector

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