Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 631 · 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 selector matches this element?
   <span class="big" id="intro">Hello</span> (a) #big (b) p (c) #intro (d) .intro
2. 2.⚡ What number does this code print?
   let marks = 20;
   marks = marks + 4;
   marks = marks - 3;
   console.log(marks);
3. 3.Which of these has a closing tag? (a) <hr> (b) <p> (c) <br> (d) <img>
4. 4.🚀 Which file should this code go in: alert(score); (a) style.css (b) script.js (c) index.html
5. 5.Which of these is a strong password? (a) qwerty (b) password (c) Mango#Kite29! (d) 111111
6. 6.🎯 What kind of selector is .note? (a) a class selector (b) an element selector (c) an id selector
7. 7.📱 Responsive design means a page ___. (a) is only for laptops (b) never changes (c) has no pictures (d) fits every screen
8. 8.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 20px;
     }
   } (a) Yes (b) No
9. 9.True or false: <img> goes in the head. (a) True (b) False
10. 10.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="map.png" alt="Map of India" width="300"> (a) width (b) Map of India (c) map.png (d) Birthday cake
11. 11.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the viewport meta tag (c) the title tag (d) the br tag
12. 12.🖼️ Does <img> need a closing tag? (a) Yes (b) No
13. 13.🧭 Which semantic tag holds the main content? (a) <article> (b) <main> (c) <aside> (d) <header>
14. 14.📊 How many cells are in each row?
    <table>
      <tr><td>Grapes</td><td>Guava</td><td>Orange</td></tr>
      <tr><td>Litchi</td><td>Jamun</td><td>Papaya</td></tr>
    </table>
15. 15.⚖️ What colour is the text of this element?
    <p class="red" id="end">Hi</p>
    CSS:
    #end { color: purple; }
    p { color: white; }
    .red { color: blue; } (a) black (b) white (c) purple (d) blue
16. 16.🔠 Which heading shows the SMALLEST text: <h1>, <h4>, <h3> or <h6>? (a) <h1> (b) <h6> (c) <h3> (d) <h4>
17. 17.💬 How many paragraphs show on the page?
    <!-- <p>My pets</p> -->
    <p>Hello, world!</p>
    <!-- <p>Rain today</p> -->
    <p>The red kite</p>
18. 18.🌈 In #006600 the green part is the hex number 66. What is it as a normal number?
19. 19.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    #intro { color: green; }
    h1 { color: black; }
    .note { color: blue; } (a) purple (b) green (c) blue (d) black
20. 20.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    } (a) Yes (b) No
21. 21.💬 How does an HTML comment end? (a) // (b) >> (c) */ (d) -->
22. 22.🔢 When you open a web page, which comes first: “DNS finds the server” or “the browser shows it”? (a) the browser shows it (b) DNS finds the server
23. 23.📝 Does <h1> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
24. 24.True or false: in <img>, alt is read by screen readers. (a) False (b) True
25. 25.📄 Can HTML on its own make tables? (a) Yes (b) No
26. 26.🔢 When you open a web page, what comes right after “the server sends files”? (a) you type the URL (b) the browser asks it (c) the browser shows it (d) DNS finds the server
27. 27.🔗 Which address opens when you click this link?
    <a href="news.html">School news</a> (a) games.html (b) news.html (c) School news (d) quiz.html
28. 28.🔍 Which line is missing its closing tag?
    line 1: <h1>The red kite</h1>
    line 2: <h2>Our school trip</h2>
    line 3: <em>I love mangoes. (a) line 3 (b) line 1 (c) line 2
29. 29.📋 Which list suits a shopping list in any order? (a) <br> (b) <hr> (c) <ul> (d) <ol>
30. 30.🚀 You change your code. What should you do to see the change? (a) rename the folder (b) delete the file (c) save and refresh (d) switch off the PC
31. 31.📱 What does a media query check? (a) the page title (b) the screen width (c) the battery level (d) the time of day
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      width: 300px;
      background-color: yellow;
    }
33. 33.📋 How many items does this list show?
    <ol>
      <li>Mango</li>
      <li>Jamun</li>
    </ol>
34. 34.💬 How many paragraphs show on the page?
    <p>Cricket is fun.</p>
    <!-- <p>My best friend</p> -->
    <!-- <p>Hello, world!</p> -->
35. 35.🔠 How many heading levels does HTML have? (a) 3 (b) 4 (c) 10 (d) 6
36. 36.True or false: <ol> is an unordered list. (a) False (b) True
37. 37.🔍 One closing tag is missing. Which one?
    <h2>My best friend</h2>
    <u>Rain today
    <h1>My pets</h1> (a) </u> (b) </h3> (c) </h2> (d) </h1>
38. 38.🔗 Where does this link open?
    <a href="games.html" target="_blank">About us</a> (a) in a new tab (b) in the same tab
39. 39.📊 Which tag gives the table a title? (a) <td> (b) <th> (c) <tr> (d) <caption>
40. 40.📝 Which input type is for one line of words? (a) date (b) password (c) text (d) number

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