Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 65 · 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.📄 What is the first line of an HTML5 page? (a) <body> (b) <!DOCTYPE html> (c) <html> (d) <head>
2. 2.🖼️ Which attribute of <img> names the picture file? (a) src (b) width (c) alt (d) height
3. 3.💬 Why do coders write comments? (a) to make links (b) to leave notes (c) to add colour (d) to show pictures
4. 4.What does color do? (a) picks the font style (b) centres a heading (c) colours behind the text (d) sets the letter colour
5. 5.📝 At most, how many of these can be chosen at the same time?
   <form>
     <input type="checkbox" name="sport"> Kabaddi
     <input type="checkbox" name="sport"> Hockey
     <input type="checkbox" name="sport"> Cricket
     <input type="checkbox" name="sport"> Chess
   </form>
6. 6.True or false: the URL is the page’s address. (a) False (b) True
7. 7.🚀 Should file names have spaces, like my page.html? (a) No (b) Yes
8. 8.🌈 In #210000 the red part is the hex number 21. What is it as a normal number?
9. 9.🧭 Is <footer> semantic or not semantic? (a) not semantic (b) semantic
10. 10.🔐 Is Mango#Kite29! a strong or a weak password? (a) weak (b) strong
11. 11.🖼️ Does <img> need a closing tag? (a) Yes (b) No
12. 12.🌈 In #4e0000 the red part is the hex number 4e. What is it as a normal number?
13. 13.🧭 Is <article> semantic or not semantic? (a) semantic (b) not semantic
14. 14.🖼️ How many pixels wide is the picture drawn?
    <img src="cake.jpg" alt="Birthday cake" width="300">
15. 15.🖌️ Which CSS property makes the text bold? (a) font-weight (b) font-family (c) font-size (d) color
16. 16.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
17. 17.📄 Can HTML on its own make a form? (a) No (b) Yes
18. 18.⚡ What does this code print? (Look at the quotes!)
    let x = "6";
    let y = 3;
    console.log(x + y); (a) 63 (b) Error (c) 9
19. 19.✍️ Which property is set to center in this rule?
    .box {
      text-align: center;
      background-color: yellow;
    } (a) center (b) margin (c) background-color (d) text-align
20. 20.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <p>Good morning!</p>
    <h3>Rain today</h3>
    <p>Rain today</p>
    <h2>My pets</h2>
21. 21.🔢 To build and share your first web page, which comes LAST? (a) test in a browser (b) add CSS styles (c) plan what to show (d) publish it online
22. 22.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
23. 23.📋 Does this list show bullets or numbers?
    <ol>
      <li>Mango</li>
      <li>Orange</li>
      <li>Litchi</li>
    </ol> (a) bullets (b) numbers
24. 24.📦 In the box model, which part is the gap round content? (a) border (b) margin (c) content (d) padding
25. 25.🌐 Which one stores a website’s files? (a) a web server (b) a web browser (c) a code editor
26. 26.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Grapes</td><td>Mango</td><td>Litchi</td><td>Papaya</td></tr>
    </table>
27. 27.🚀 Which file should this code go in: <img src="cat.png"> (a) index.html (b) script.js (c) style.css
28. 28.What does background-color do? (a) colours behind the text (b) sets the letter colour (c) makes the text bold (d) centres a heading
29. 29.📄 Can HTML on its own make links to pages? (a) No (b) Yes
30. 30.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as a new line (b) as a dot (c) as one space (d) as 5 spaces
31. 31.True or false: HTML on its own cannot count button clicks. (a) True (b) False
32. 32.True or false: to put secrets in comments is not safe. (a) False (b) True
33. 33.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) ( ) (d) { }
34. 34.💾 A web page file usually ends with which extension? (a) .mp3 (b) .html (c) .png (d) .txt
35. 35.🚀 Which file should this code go in: .box { padding: 8px; } (a) style.css (b) index.html (c) script.js
36. 36.True or false: <article> sits at the very top. (a) False (b) True
37. 37.🔁 What does this code print?
    let age = 4;
    if (age > 6) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
38. 38.🖼️ Which picture file does the browser load?
    <img src="moon.png" alt="The full moon" width="400"> (a) moon.png (b) fort.jpg (c) bus.jpg (d) The full moon
39. 39.🔠 Which heading shows the SMALLEST text: <h6>, <h5>, <h2> or <h4>? (a) <h6> (b) <h4> (c) <h5> (d) <h2>
40. 40.📊 Are <th> cells shown bold and centred by default? (a) Yes (b) No

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