Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 791 · 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.✍️ CSS declarations go inside which brackets? (a) [ ] (b) < > (c) { } (d) ( )
2. 2.True or false: in <img>, alt shows if the image fails. (a) True (b) False
3. 3.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 10; i++) {
     total = total + i;
   }
   console.log(total);
4. 4.🌐 Which one hosts websites online? (a) a code editor (b) a web browser (c) a web server
5. 5.⚡ What does this code print? (Look at the quotes!)
   let x = "3";
   let y = 7;
   console.log(x + y); (a) 37 (b) 10 (c) Error
6. 6.True or false: a code editor saves our .html files. (a) False (b) True
7. 7.🔢 To build and share your first web page, what comes right after “test in a browser”? (a) add CSS styles (b) write the HTML (c) publish it online (d) plan what to show
8. 8.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 230px;
     padding: 20px;
     border: 3px solid black;
     margin: 10px;
   }
9. 9.True or false: <input type="number"> lets you tick many. (a) True (b) False
10. 10.🖌️ What colour is behind the letters?
    h2 {
      font-size: 36px;
      color: purple;
      text-align: left;
      background-color: white;
    } (a) white (b) purple (c) green
11. 11.💬 How does an HTML comment start? (a) <!-- (b) // (c) # (d) /*
12. 12.🎯 How many elements on a page should have the same id? (a) 5 (b) 2 (c) any number (d) 1
13. 13.📋 Does this list show bullets or numbers?
    <ul>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Mango</li>
    </ul> (a) bullets (b) numbers
14. 14.🔍 One closing tag is missing. Which one?
    <h1>Good morning!
    <em>I love mangoes.</em>
    <i>My best friend</i> (a) </i> (b) </h2> (c) </em> (d) </h1>
15. 15.🌍 Which one shows the page to you? (a) the browser (b) the URL (c) HTTPS (d) the server
16. 16.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 170px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).
17. 17.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
18. 18.🖌️ How big is the text, in px?
    h1 {
      font-size: 28px;
      background-color: red;
      color: white;
      text-align: left;
    }
19. 19.🔍 Which line is missing its closing tag?
    line 1: <h1>My pets
    line 2: <p>Fun facts</p>
    line 3: <i>Good morning!</i> (a) line 2 (b) line 1 (c) line 3
20. 20.What is <input type="radio"> for? (a) picks a day (b) lets you pick only one (c) hides what you type (d) is for an email address
21. 21.True or false: the border is space inside the border. (a) True (b) False
22. 22.🏷️ Which is the closing tag for <h3>? (a) <h3> (b) </h3> (c) <\h3> (d) <h3/>
23. 23.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      color: red;
      font-size: 20px;
      margin: 10px;
    }
24. 24.📝 What does <br> do? (a) adds a picture (b) makes text bold (c) makes a list (d) starts a new line
25. 25.True or false: <nav> holds a side box of tips. (a) True (b) False
26. 26.📊 Which tag gives the table a title? (a) <td> (b) <th> (c) <tr> (d) <caption>
27. 27.Which of these is an empty tag? (a) <h1> (b) <li> (c) <meta> (d) <title>
28. 28.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="350"> (a) tiger.jpg (b) fort.jpg (c) An old fort (d) kite.png
29. 29.🖼️ Which picture file does the browser load?
    <img src="tiger.jpg" alt="A tiger asleep" width="50"> (a) A tiger asleep (b) map.png (c) tiger.jpg (d) kite.png
30. 30.✍️ What is the selector in this CSS rule?
    h1 {
      padding: 8px;
      font-style: italic;
      color: red;
      border: 2px solid;
    } (a) h1 (b) italic (c) p (d) padding
31. 31.🖌️ What colour is behind the letters?
    h2 {
      font-size: 16px;
      color: blue;
      text-align: right;
      background-color: green;
    } (a) orange (b) green (c) blue
32. 32.🔤 In “HTML”, what does the L stand for? (a) Laptop (b) Line (c) Link (d) Language
33. 33.📝 Does <p> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
34. 34.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the head (b) in the body
35. 35.📋 Which list shows the steps of a recipe best? (a) <br> (b) <hr> (c) <ul> (d) <ol>
36. 36.🎨 What does CSS stand for? (a) Creative Sheet System (b) Cascading Style Sheets (c) Computer Style Sheets (d) Colourful Site Styles
37. 37.🏷️ Which is the closing tag for <h1>? (a) </h1> (b) <h1/> (c) <\h1> (d) <h1>
38. 38.📄 Which part holds everything you see on the page? (a) the title (b) the doctype (c) the head (d) the body
39. 39.True or false: score = score + 1; goes in script.js. (a) False (b) True
40. 40.🚀 Which file should this code go in: score = score + 1; (a) style.css (b) script.js (c) index.html

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