Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 598 · 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.🧭 Is <article> semantic or not semantic? (a) semantic (b) not semantic
2. 2.🚀 Where in index.html does the link to style.css go? (a) after </html> (b) inside a <p> (c) in the head (d) in the footer
3. 3.True or false: CSS makes a link. (a) True (b) False
4. 4.💬 Which text will NOT show on the page?
   <!-- <p>My pets</p> -->
   <p>The red kite</p>
   <p>Cricket is fun.</p>
   <p>My best friend</p> (a) My best friend (b) Cricket is fun. (c) My pets (d) The red kite
5. 5.⚖️ What colour is the text of this element?
   <p class="box" id="logo">Hi</p>
   CSS:
   #logo { color: orange; }
   #logo { color: purple; } (a) purple (b) white (c) orange (d) blue
6. 6.⚡ What does this code show?
   let name = "Kabir";
   console.log("Welcome, " + name + "!"); (a) name (b) Welcome, Kabir! (c) Kabir (d) Welcome, name!
7. 7.🏷️ Is <h1> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
8. 8.🎯 Which CSS selector matches this element?
   <h1 class="note" id="hero">Hello</h1> (a) #hero (b) .hero (c) .big (d) #note
9. 9.🔗 Where does this link open?
   <a href="games.html" target="_blank">Visit the site</a> (a) in the same tab (b) in a new tab
10. 10.🖌️ How big is the text, in px?
    li {
      background-color: blue;
      color: purple;
      font-size: 36px;
      text-align: right;
    }
11. 11.📄 What is the first line of an HTML5 page? (a) <html> (b) <body> (c) <!DOCTYPE html> (d) <head>
12. 12.🚀 Which file is best for the colours and fonts? (a) script.js (b) photo.jpg (c) style.css (d) index.html
13. 13.🖌️ What colour are the letters?
    h2 {
      color: black;
      background-color: blue;
      text-align: left;
      font-size: 28px;
    } (a) black (b) white (c) blue
14. 14.🔠 Which heading shows the SMALLEST text: <h1>, <h5>, <h6> or <h4>? (a) <h1> (b) <h6> (c) <h5> (d) <h4>
15. 15.🖌️ Which CSS property centres a heading? (a) background-color (b) color (c) font-size (d) text-align
16. 16.🔁 What does this code print?
    let temp = 46;
    if (temp < 27) {
      console.log("Hot");
    } else {
      console.log("Cool");
    } (a) Hot (b) Cool
17. 17.📊 How many cells are in each row?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Jamun</td><td>Litchi</td><td>Jamun</td></tr>
    </table>
18. 18.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
19. 19.🎯 Which CSS selector matches this element?
    <h1 class="red" id="end">Hello</h1> (a) h1 (b) .end (c) .box (d) h2
20. 20.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 370px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 80px wide (no margins).
21. 21.🛡️ Online: is it safe to put secrets in comments? (a) safe (b) not safe
22. 22.True or false: the border is a solid or dotted edge. (a) True (b) False
23. 23.Which of these is a strong password? (a) Blue@Tiger_74 (b) 123456 (c) abcd1234 (d) password
24. 24.🚀 Which file should this code go in: score = score + 1; (a) index.html (b) script.js (c) style.css
25. 25.✍️ CSS declarations go inside which brackets? (a) < > (b) { } (c) [ ] (d) ( )
26. 26.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
27. 27.🔠 How many <h1> headings should a page usually have? (a) 10 (b) 6 (c) 3 (d) 1
28. 28.📋 How many items does this list show?
    <ul>
      <li>Guava</li>
      <li>Papaya</li>
      <li>Mango</li>
    </ul>
29. 29.🖌️ What colour are the letters?
    h1 {
      text-align: left;
      font-size: 28px;
      color: yellow;
      background-color: blue;
    } (a) yellow (b) blue (c) orange
30. 30.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 120px;
      padding: 20px;
      border: 1px solid black;
      margin: 5px;
    }
31. 31.💪 Which flexbox property picks row or column? (a) display: flex (b) align-items (c) flex-direction (d) justify-content
32. 32.🔗 What does target="_blank" do to a link? (a) hides the link (b) makes it blank (c) opens it in a new tab (d) makes it bold
33. 33.🧭 Who is helped most by semantic tags? (a) screen-reader users (b) nobody (c) only the printer (d) only the server
34. 34.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) share it with friends (b) close it, tell an adult (c) click it twice (d) type the password
35. 35.🔢 To build and share your first web page, which comes first: “plan what to show” or “add CSS styles”? (a) add CSS styles (b) plan what to show
36. 36.📄 Can HTML on its own add pictures to a page? (a) Yes (b) No
37. 37.Which of these is an opening tag? (a) </body> (b) </p> (c) <h1> (d) </title>
38. 38.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Art Gallery</title>
    </head>
    <body>
      <h1>All about me</h1>
      <p>Thanks for visiting.</p>
    </body>
    </html> (a) index.html (b) All about me (c) Art Gallery (d) Thanks for visiting.
39. 39.🖼️ Which picture file does the browser load?
    <img src="kite.png" alt="A red kite" width="150"> (a) map.png (b) cake.jpg (c) A red kite (d) kite.png
40. 40.📋 Does this list show bullets or numbers?
    <ol>
      <li>Papaya</li>
      <li>Banana</li>
    </ol> (a) numbers (b) bullets

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