Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 155 · 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 justify-content value puts boxes in the middle? (a) flex-end (b) space-between (c) flex-start (d) center
2. 2.📄 Where does the text of <title> appear? (a) nowhere (b) on the browser tab (c) in a big heading (d) at the bottom
3. 3.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) 800px or narrower (c) turned off (d) exactly 100px
4. 4.📋 Which list tag shows bullet points? (a) <li> (b) <ul> (c) <ol>
5. 5.💾 A web page file usually ends with which extension? (a) .png (b) .txt (c) .mp3 (d) .html
6. 6.🛡️ Online: is it safe to meet an online stranger? (a) not safe (b) safe
7. 7.✍️ What value is given to font-weight in this rule?
   body {
     font-weight: bold;
     background-color: yellow;
     margin: 10px;
     padding: 8px;
   } (a) 2px solid (b) font-weight (c) 300px (d) bold
8. 8.True or false: margin is space outside the border. (a) True (b) False
9. 9.📄 Where does <table> go: in the head or in the body? (a) in the head (b) in the body
10. 10.🔁 How many times does this code print “Hi”?
    for (let i = 3; i < 6; i++) {
      console.log("Hi");
    }
11. 11.✍️ What is the selector in this CSS rule?
    .note {
      background-color: yellow;
      font-style: italic;
    } (a) background-color (b) #top (c) italic (d) .note
12. 12.Which of these is margin? (a) the text or picture (b) a solid or dotted edge (c) space outside the border (d) the line round the box
13. 13.✍️ What value is given to font-weight in this rule?
    #top {
      font-style: italic;
      width: 300px;
      background-color: yellow;
      font-weight: bold;
    } (a) font-weight (b) 300px (c) 2px solid (d) bold
14. 14.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) body (b) Mars is red. (c) My Hobbies (d) Welcome!
15. 15.🌍 What do we call the computer that stores a website? (a) a server (b) a mouse (c) a printer (d) a keyboard
16. 16.🔡 Are HTML tag names usually written in small letters? (a) Yes (b) No
17. 17.🔍 Which is the odd one out? (a) sets colours and fonts (b) gives the page structure (c) changes the text size (d) rounds box corners
18. 18.🛡️ Before typing a password on a site, check the address starts with ___. (a) https (b) http (c) www (d) ftp
19. 19.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 4; i++) {
      total = total + i;
    }
    console.log(total);
20. 20.📋 Which list tag is an ordered list? (a) <ul> (b) <ol> (c) <li>
21. 21.🏷️ Is </h1> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
22. 22.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="bus.jpg" alt="Our school bus" width="350"> (a) Our school bus (b) bus.jpg (c) An old fort (d) width
23. 23.🎯 Which element does the selector #end style? (a) <h2 id="end"> (b) <li class="red"> (c) <h2 class="end"> (d) <h2 id="hero">
24. 24.📝 How many paragraphs does this code make?
    <p>The red kite</p>
    <p>My pets</p>
    <p>Hello, world!</p>
    <h2>Rain today</h2>
    <p>My pets</p>
    <h2>Rain today</h2>
25. 25.🖌️ What colour are the letters?
    h2 {
      background-color: yellow;
      color: red;
      text-align: left;
      font-size: 12px;
    } (a) orange (b) yellow (c) red
26. 26.True or false: <article> holds a news story. (a) False (b) True
27. 27.🔍 Which is the odd one out? (a) answers page requests (b) sends pages over the net (c) shows pages from the web (d) hosts websites online
28. 28.Which of these is padding? (a) the gap to other boxes (b) the line round the box (c) the gap round content (d) a solid or dotted edge
29. 29.🖌️ Which CSS property sets the letter colour? (a) font-size (b) font-weight (c) font-family (d) color
30. 30.📄 Can HTML on its own pick a random number? (a) Yes (b) No
31. 31.Which of these is true of <aside>? (a) helps you move around (b) holds a news story (c) sits at the bottom (d) holds a side box of tips
32. 32.🚀 Which file should this code go in: alert("Hi"); (a) style.css (b) index.html (c) script.js
33. 33.🏷️ Which is the closing tag for <u>? (a) <\u> (b) <u> (c) </u> (d) <u/>
34. 34.True or false: margin is the line round the box. (a) False (b) True
35. 35.🔠 Which heading shows the SMALLEST text: <h5>, <h3>, <h2> or <h4>? (a) <h3> (b) <h5> (c) <h4> (d) <h2>
36. 36.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 30px;
      border: 2px solid black;
      margin: 20px;
    }
37. 37.Which of these is an empty tag? (a) <ul> (b) <title> (c) <li> (d) <img>
38. 38.📝 Which tag holds a whole form? (a) <table> (b) <input> (c) <form> (d) <ol>
39. 39.True or false: to type a password on http is not safe. (a) True (b) False
40. 40.🎯 Which CSS selector matches this element?
    <h1 class="note" id="main">Hello</h1> (a) #main (b) .main (c) #note (d) .big

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