Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 642 · 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 of these does JavaScript do? (a) changes the page live (b) gives the page structure (c) adds space around boxes (d) rounds box corners
2. 2.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the body (b) in the head
3. 3.🌈 Which colour is #00ff00? (a) red (b) magenta (c) bright green (d) blue
4. 4.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
5. 5.Which of these does HTML do? (a) rounds box corners (b) gives the page structure (c) shows a pop-up message (d) sets colours and fonts
6. 6.⚡ What does this code print? (Look at the quotes!)
   let x = "6";
   let y = 2;
   console.log(x + y); (a) 8 (b) 62 (c) Error
7. 7.🧩 Which language makes a form box? (a) CSS (b) HTML (c) JavaScript
8. 8.⚡ Which JavaScript word shows a pop-up box? (a) if (b) alert() (c) console.log() (d) let
9. 9.🧩 Which language makes headings and lists? (a) JavaScript (b) HTML (c) CSS
10. 10.⚡ What number does this code print?
    let books = 29;
    books = books + 14;
    books = books - 10;
    console.log(books);
11. 11.Which of these is true of <nav>? (a) holds one blog post (b) holds a side box of tips (c) is the page’s key part (d) helps you move around
12. 12.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 5px;
      border: 2px solid black;
      margin: 15px;
    }
13. 13.True or false: “label every form box” helps everyone use the page. (a) False (b) True
14. 14.🔗 What does target="_blank" do to a link? (a) makes it bold (b) makes it blank (c) hides the link (d) opens it in a new tab
15. 15.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    }
16. 16.📋 Which list suits a shopping list in any order? (a) <ul> (b) <br> (c) <ol> (d) <hr>
17. 17.🎯 What kind of selector is p? (a) a class selector (b) an id selector (c) an element selector
18. 18.📊 How many cells are in each row?
    <table>
      <tr><td>Papaya</td><td>Jamun</td></tr>
      <tr><td>Jamun</td><td>Jamun</td></tr>
      <tr><td>Litchi</td><td>Jamun</td></tr>
    </table>
19. 19.💬 How many paragraphs show on the page?
    <p>My pets</p>
    <!-- <p>Fun facts</p> -->
    <p>Cricket is fun.</p>
    <!-- <p>Good morning!</p> -->
    <!-- <p>Our school trip</p> -->
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 30px;
      border: 2px solid black;
      margin: 10px;
    }
21. 21.💬 How does an HTML comment start? (a) # (b) <!-- (c) // (d) /*
22. 22.📋 How many items does this list show?
    <ol>
      <li>Litchi</li>
      <li>Grapes</li>
    </ol>
23. 23.🌍 Which one is the page’s address? (a) the server (b) HTTPS (c) the URL (d) the browser
24. 24.🔍 Which is the odd one out? (a) makes headings and lists (b) makes a form box (c) makes a link (d) sets colours and fonts
25. 25.📛 In <a href="x.html">, what is href? (a) an element name (b) an attribute (c) a closing tag (d) a comment
26. 26.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 9; i++) {
      total = total + 4;
    }
    console.log(total);
27. 27.⚡ What number does this code print?
    let score = 27;
    score = score + 5;
    score = score - 7;
    console.log(score);
28. 28.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 230px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).
29. 29.True or false: a web browser stores a website’s files. (a) False (b) True
30. 30.📋 What number does the browser show next to “Orange”?
    <ol>
      <li>Guava</li>
      <li>Orange</li>
      <li>Grapes</li>
    </ol>
31. 31.🎯 Which element does the selector p style? (a) <h1> (b) <h2 class="note"> (c) <p class="note"> (d) <li id="end">
32. 32.🎯 Can many elements share the same class? (a) Yes (b) No
33. 33.🔠 Which heading shows the BIGGEST text: <h2>, <h6>, <h1> or <h3>? (a) <h1> (b) <h3> (c) <h6> (d) <h2>
34. 34.📝 How many paragraphs does this code make?
    <p>I love mangoes.</p>
    <h2>Our school trip</h2>
    <h2>Rain today</h2>
    <p>Our school trip</p>
35. 35.📝 Does <title> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
36. 36.🔢 In a basic web page file, which comes FIRST? (a) <body> (b) <!DOCTYPE html> (c) <html> (d) <head>
37. 37.🏷️ Is <h1> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
38. 38.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 50px wide (no margins).
39. 39.⚡ What does alert() show? (a) a new tab (b) a picture (c) a pop-up box (d) a table
40. 40.True or false: HTML adds space around boxes. (a) False (b) True

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