Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 633 · 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 CSS property colours behind the text? (a) font-family (b) color (c) text-align (d) background-color
2. 2.True or false: <input type="text"> picks a day. (a) True (b) False
3. 3.🔁 What is the LAST number this code prints?
   for (let i = 0; i < 19; i = i + 3) {
     console.log(i);
   }
4. 4.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Art Gallery</title>
   </head>
   <body>
     <h1>Planets</h1>
     <p>We won by 5 runs.</p>
   </body>
   </html> (a) index.html (b) Planets (c) We won by 5 runs. (d) Art Gallery
5. 5.📝 How many <input> tags are in this form?
   <form>
     <input type="email">
     <input type="date">
     <input type="submit" value="Send">
   </form>
6. 6.📄 Which part holds everything you see on the page? (a) the title (b) the body (c) the head (d) the doctype
7. 7.🔍 Which is the odd one out? (a) reacts to a button click (b) checks a quiz answer (c) sets colours and fonts (d) changes the page live
8. 8.🖌️ What colour is behind the letters?
   h2 {
     text-align: left;
     font-size: 32px;
     color: red;
     background-color: purple;
   } (a) red (b) yellow (c) purple
9. 9.📄 What is the big heading shown on this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Class 7 Blog</title>
   </head>
   <body>
     <h1>Easy snacks</h1>
     <p>Try this poha.</p>
   </body>
   </html> (a) body (b) Try this poha. (c) Class 7 Blog (d) Easy snacks
10. 10.Which of these is true of a web browser? (a) sends pages over the net (b) opens web pages for us (c) hosts websites online (d) saves our .html files
11. 11.✍️ What value is given to color in this rule?
    h2 {
      color: red;
      font-size: 20px;
    } (a) 20px (b) center (c) color (d) red
12. 12.🔠 How many headings are in this code?
    <h1>Our school trip</h1>
    <h2>Hello, world!</h2>
    <h4>Cricket is fun.</h4>
    <p>Hello, world!</p>
13. 13.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
14. 14.🔗 Which code links to about.html? (a) <a src="about.html"> (b) <a href="about.html"> (c) <link about.html> (d) <a alt="about.html">
15. 15.🔗 Where does this link open?
    <a href="games.html" target="_blank">About us</a> (a) in the same tab (b) in a new tab
16. 16.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 8; i++) {
      total = total + 2;
    }
    console.log(total);
17. 17.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 3 (c) 6 (d) 2
18. 18.🔠 Which heading shows the SMALLEST text: <h5>, <h1>, <h3> or <h6>? (a) <h1> (b) <h3> (c) <h5> (d) <h6>
19. 19.🔠 How many headings are in this code?
    <h1>Cricket is fun.</h1>
    <p>Our school trip</p>
    <p>My best friend</p>
    <h4>The red kite</h4>
20. 20.📦 In the box model, which part is a solid or dotted edge? (a) content (b) padding (c) margin (d) border
21. 21.🔢 To build and share your first web page, which comes first: “add CSS styles” or “plan what to show”? (a) add CSS styles (b) plan what to show
22. 22.🌍 What is the path in this URL?
    https://www.example.com/index.html (a) https (b) /art/gallery.html (c) www.example.com (d) /index.html
23. 23.📊 In a table, which tag is a row? (a) <tb> (b) <td> (c) <th> (d) <tr>
24. 24.📝 Does <li> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
25. 25.📝 What does a password box show instead of letters? (a) emojis (b) capital letters (c) numbers (d) dots
26. 26.🖼️ Which attribute of <img> tells which image to load? (a) width (b) alt (c) height (d) src
27. 27.📋 How many items does this list show?
    <ol>
      <li>Orange</li>
      <li>Mango</li>
    </ol>
28. 28.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 250px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 50px wide (no margins).
29. 29.⚡ What does this code print? (Look at the quotes!)
    let x = "2";
    let y = 7;
    console.log(x + y); (a) 27 (b) Error (c) 9
30. 30.🔠 How many headings are in this code?
    <h1>Our school trip</h1>
    <p>The red kite</p>
    <p>Good morning!</p>
31. 31.True or false: <aside> holds a side box of tips. (a) False (b) True
32. 32.Which of these is true of a web server? (a) turns HTML into a page (b) saves our .html files (c) has an address bar (d) sends pages over the net
33. 33.✍️ Which property is set to red in this rule?
    .box {
      font-weight: bold;
      padding: 8px;
      color: red;
      font-style: italic;
    } (a) color (b) red (c) text-align (d) font-size
34. 34.🌍 Which one stores the site’s files? (a) the browser (b) HTTPS (c) the server (d) the URL
35. 35.🌈 Which colour is rgb(255, 255, 0)? (a) magenta (b) cyan (c) blue (d) yellow
36. 36.🌐 Which one stores a website’s files? (a) a web browser (b) a code editor (c) a web server
37. 37.🧩 An opening tag + content + a closing tag together make an ___. (a) address (b) editor (c) element (d) attribute
38. 38.🌍 What does a web address (URL) tell the browser? (a) how old you are (b) the page colour (c) your password (d) where the page is
39. 39.True or false: JavaScript shows a pop-up message. (a) False (b) True
40. 40.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 300px;
      padding: 20px;
      border: 2px solid black;
      margin: 10px;
    }

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