Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 872 · 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 tag goes around each item of a list? (a) <ul> (b) <p> (c) <li> (d) <ol>
2. 2.🔁 When does the else part run? (a) when if is true (b) never (c) always (d) when if is false
3. 3.✍️ Which property is set to italic in this rule?
   #top {
     color: red;
     background-color: yellow;
     font-style: italic;
     margin: 10px;
   } (a) font-style (b) italic (c) color (d) font-size
4. 4.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 10px;
     }
   } (a) No (b) Yes
5. 5.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 220px;
     padding: 5px;
     border: 1px solid black;
     margin: 0px;
   }
6. 6.🔠 Which heading shows the SMALLEST text: <h5>, <h3>, <h1> or <h2>? (a) <h5> (b) <h3> (c) <h2> (d) <h1>
7. 7.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 18px;
     }
   } (a) Yes (b) No
8. 8.🚀 Which file should this code go in: h1 { font-size: 32px; } (a) script.js (b) style.css (c) index.html
9. 9.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-start (c) space-between (d) flex-end
10. 10.🌈 In #df0000 the red part is the hex number df. What is it as a normal number?
11. 11.🧩 Which language gives the page structure? (a) JavaScript (b) HTML (c) CSS
12. 12.✍️ What value is given to background-color in this rule?
    .box {
      background-color: yellow;
      padding: 8px;
    } (a) 8px (b) 10px (c) background-color (d) yellow
13. 13.🚀 Which file should this code go in: #top { color: blue; } (a) style.css (b) script.js (c) index.html
14. 14.True or false: <ul> is an ordered list. (a) True (b) False
15. 15.💬 How does an HTML comment start? (a) /* (b) <!-- (c) # (d) //
16. 16.🖼️ Does <img> need a closing tag? (a) Yes (b) No
17. 17.What is <input type="submit"> for? (a) picks a day (b) sends the form (c) is for an email address (d) lets you tick many
18. 18.🔍 Which is the odd one out? (a) shows pages from the web (b) opens web pages for us (c) has an address bar (d) colours code to help us
19. 19.🔠 How many headings are in this code?
    <h1>My best friend</h1>
    <h3>Rain today</h3>
    <h3>Our school trip</h3>
    <p>I love mangoes.</p>
    <p>Cricket is fun.</p>
20. 20.🧭 Is <nav> semantic or not semantic? (a) semantic (b) not semantic
21. 21.🖌️ How big is the text, in px?
    h2 {
      background-color: red;
      font-size: 20px;
      text-align: center;
      color: purple;
    }
22. 22.🌍 What is the domain name in this URL?
    http://kids.example.org/games/chess.html (a) http (b) /games/chess.html (c) school.example.in (d) kids.example.org
23. 23.✍️ Which property is set to 300px in this rule?
    h1 {
      color: red;
      width: 300px;
    } (a) color (b) 300px (c) width (d) font-style
24. 24.🖌️ How big is the text, in px?
    h1 {
      font-size: 28px;
      text-align: left;
      color: purple;
      background-color: red;
    }
25. 25.🎯 What kind of selector is img? (a) an element selector (b) a class selector (c) an id selector
26. 26.What is <input type="radio"> for? (a) is for an email address (b) is for one line of words (c) lets you tick many (d) lets you pick only one
27. 27.📝 What does <br> do? (a) makes text bold (b) makes a list (c) adds a picture (d) starts a new line
28. 28.True or false: margin is space outside the border. (a) False (b) True
29. 29.⚡ A JavaScript file usually ends with which extension? (a) .html (b) .jpg (c) .css (d) .js
30. 30.True or false: <header> holds one blog post. (a) True (b) False
31. 31.📝 Does <br> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
32. 32.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the first one (c) neither (d) the shorter one
33. 33.🔍 One closing tag is missing. Which one?
    <h2>My best friend
    <strong>Rain today</strong>
    <i>Cricket is fun.</i> (a) </h2> (b) </b> (c) </strong> (d) </i>
34. 34.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) fits every screen (d) never changes
35. 35.📋 Which list tag lists things in any order? (a) <ul> (b) <li> (c) <ol>
36. 36.📊 In a table, which tag is a row? (a) <tr> (b) <th> (c) <tb> (d) <td>
37. 37.🏷️ Which is the closing tag for <i>? (a) </i> (b) <i/> (c) <\i> (d) <i>
38. 38.📄 Where does <link rel="stylesheet"> go: in the head or in the body? (a) in the body (b) in the head
39. 39.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the title tag (c) the br tag (d) the hr tag
40. 40.🚀 Which file should this code go in: .box { padding: 8px; } (a) style.css (b) script.js (c) index.html

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