Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 480 · 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 equal gaps, none at ends? (a) space-between (b) flex-end (c) flex-start (d) center
2. 2.⚡ What does JavaScript add to a web page? (a) the page title (b) the domain name (c) only colours (d) actions and changes
3. 3.🧭 Is <div> semantic or not semantic? (a) semantic (b) not semantic
4. 4.⚖️ What colour is the text of this element?
   <h1 class="menu" id="hero">Hi</h1>
   CSS:
   #hero { color: black; }
   #hero { color: blue; } (a) black (b) blue (c) yellow (d) green
5. 5.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 22px;
     }
   } (a) No (b) Yes
6. 6.🌍 What do we call the computer that stores a website? (a) a server (b) a keyboard (c) a printer (d) a mouse
7. 7.True or false: <ol> is an ordered list. (a) False (b) True
8. 8.💪 Which flexbox property lines boxes up across? (a) display: flex (b) flex-direction (c) justify-content (d) align-items
9. 9.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-end (c) flex-start (d) space-between
10. 10.🔗 Which words do you click on?
    <a href="quiz.html">Art corner</a> (a) quiz.html (b) Art corner (c) School news (d) href
11. 11.✍️ What is the selector in this CSS rule?
    .note {
      font-style: italic;
      font-weight: bold;
      font-size: 20px;
    } (a) bold (b) font-style (c) .note (d) #top
12. 12.Which of these is an opening tag? (a) </li> (b) </p> (c) </b> (d) <body>
13. 13.🔢 To build and share your first web page, which comes first: “plan what to show” or “add CSS styles”? (a) plan what to show (b) add CSS styles
14. 14.True or false: <style> goes in the body. (a) False (b) True
15. 15.✍️ What is the selector in this CSS rule?
    h1 {
      font-size: 20px;
      border: 2px solid;
    } (a) font-size (b) h1 (c) p (d) 2px solid
16. 16.🖼️ Which picture file does the browser load?
    <img src="tiger.jpg" alt="A tiger asleep" width="150"> (a) A tiger asleep (b) tiger.jpg (c) map.png (d) kite.png
17. 17.What does justify-content: center do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end
18. 18.⚖️ What colour is the text of this element?
    <p class="big" id="main">Hi</p>
    CSS:
    p { color: yellow; }
    #main { color: red; }
    .big { color: white; } (a) yellow (b) black (c) red (d) white
19. 19.Which of these is an opening tag? (a) </title> (b) </b> (c) <h1> (d) </body>
20. 20.🌍 Which one is the page’s address? (a) HTTPS (b) the browser (c) the URL (d) the server
21. 21.True or false: #end is an element selector. (a) False (b) True
22. 22.🔍 Which is the odd one out? (a) saves our .html files (b) is where we type code (c) shows pages from the web (d) colours code to help us
23. 23.🌈 Which hex code is magenta? (a) #ffff00 (b) #ff00ff (c) #0000ff (d) #000000
24. 24.What does font-weight do? (a) centres a heading (b) colours behind the text (c) sets the letter colour (d) makes the text bold
25. 25.True or false: “colour as the only clue” makes the page harder to use. (a) True (b) False
26. 26.⚡ What does alert() show? (a) a new tab (b) a table (c) a picture (d) a pop-up box
27. 27.True or false: <ol> lists steps in order. (a) True (b) False
28. 28.📋 How many items does this list show?
    <ol>
      <li>Papaya</li>
      <li>Litchi</li>
      <li>Mango</li>
      <li>Orange</li>
    </ol>
29. 29.🔢 To build and share your first web page, which comes LAST? (a) test in a browser (b) publish it online (c) write the HTML (d) plan what to show
30. 30.🔢 In a basic web page file, which comes first: “</body>” or “<!DOCTYPE html>”? (a) <!DOCTYPE html> (b) </body>
31. 31.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Litchi</td><td>Guava</td></tr>
      <tr><td>Jamun</td><td>Banana</td></tr>
      <tr><td>Guava</td><td>Mango</td></tr>
    </table>
32. 32.💬 How many paragraphs show on the page?
    <p>Cricket is fun.</p>
    <!-- <p>Rain today</p> -->
    <!-- <p>Our school trip</p> -->
33. 33.✍️ Which sign goes between a property and its value? (a) - (b) = (c) ; (d) :
34. 34.True or false: <th> makes a heading cell. (a) False (b) True
35. 35.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 12; i = i + 4) {
      console.log(i);
    }
36. 36.Which of these is true of <article>? (a) holds a side box of tips (b) helps you move around (c) holds one blog post (d) holds the main content
37. 37.🌈 Which hex code is black? (a) #ffff00 (b) #00ffff (c) #000000 (d) #00ff00
38. 38.🧩 Which language checks a quiz answer? (a) HTML (b) JavaScript (c) CSS
39. 39.🔢 To build and share your first web page, which comes FIRST? (a) test in a browser (b) add CSS styles (c) write the HTML (d) plan what to show
40. 40.True or false: <h1>My Site</h1> goes in index.html. (a) False (b) True

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