Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 621 · 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.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Class 7 Blog</title>
   </head>
   <body>
     <h1>My drawings</h1>
     <p>Mars is red.</p>
   </body>
   </html> (a) My drawings (b) index.html (c) Class 7 Blog (d) Mars is red.
2. 2.⚖️ What colour is the text of this element?
   <h2 class="big" id="top">Hi</h2>
   CSS:
   .big { color: black; }
   #top { color: yellow; } (a) white (b) black (c) purple (d) yellow
3. 3.True or false: p is an element selector. (a) True (b) False
4. 4.🎨 Which tag holds CSS inside the head? (a) <style> (b) <script> (c) <body> (d) <css>
5. 5.🌗 Is black on white easy or hard to read? (a) hard to read (b) easy to read
6. 6.True or false: margin is space outside the border. (a) False (b) True
7. 7.Which of these has a closing tag? (a) <meta> (b) <ul> (c) <hr> (d) <input>
8. 8.📋 How many items does this list show?
   <ul>
     <li>Banana</li>
     <li>Litchi</li>
     <li>Jamun</li>
     <li>Papaya</li>
     <li>Orange</li>
   </ul>
9. 9.True or false: CSS makes headings and lists. (a) True (b) False
10. 10.📊 Which tag makes one data cell? (a) <tr> (b) <th> (c) <td> (d) <table>
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-size: 20px;
      background-color: yellow;
      color: red;
      padding: 8px;
    }
12. 12.♿ Does this help everyone, or make the page harder to use: use headings in order? (a) makes it harder (b) helps everyone
13. 13.🔍 Which line is missing its closing tag?
    line 1: <b>My pets
    line 2: <em>My best friend</em>
    line 3: <h2>Our school trip</h2> (a) line 3 (b) line 2 (c) line 1
14. 14.♿ A part of the page is under a <h5> heading. Which tag should its sub-heading use? (a) <h1> (b) <h6> (c) <h2> (d) <h4>
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: center;
    }
    Inside are 4 boxes, each 40px wide (no margins).
16. 16.🔗 Where does this link open?
    <a href="maths.html">Take the quiz</a> (a) in the same tab (b) in a new tab
17. 17.🎯 Can many elements share the same class? (a) Yes (b) No
18. 18.🔐 Is qwerty a strong or a weak password? (a) strong (b) weak
19. 19.✍️ What is the selector in this CSS rule?
    #top {
      font-weight: bold;
      background-color: yellow;
      margin: 10px;
    } (a) #top (b) font-weight (c) yellow (d) li
20. 20.🌍 What is the domain name in this URL?
    http://www.example.net/games/chess.html (a) http (b) www.example.net (c) learn.example.com (d) /games/chess.html
21. 21.🌗 Is light grey on white easy or hard to read? (a) easy to read (b) hard to read
22. 22.Which of these does JavaScript do? (a) changes the text size (b) changes the page live (c) gives the page structure (d) lays out the page
23. 23.✍️ Which sign ends each CSS declaration? (a) : (b) ; (c) , (d) .
24. 24.📄 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>Thanks for visiting.</p>
    </body>
    </html> (a) Class 7 Blog (b) body (c) Easy snacks (d) Thanks for visiting.
25. 25.✍️ What value is given to font-size in this rule?
    body {
      font-size: 20px;
      text-align: center;
    } (a) yellow (b) 20px (c) font-size (d) center
26. 26.✍️ Which sign goes between a property and its value? (a) - (b) : (c) = (d) ;
27. 27.True or false: HTML on its own can show paragraphs. (a) False (b) True
28. 28.True or false: <a> goes in the head. (a) True (b) False
29. 29.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
30. 30.✍️ How does a CSS comment start? (a) // (b) # (c) <!-- (d) /*
31. 31.True or false: <footer> holds one blog post. (a) False (b) True
32. 32.True or false: <input type="submit"> sends the form. (a) True (b) False
33. 33.✍️ What value is given to padding in this rule?
    .note {
      text-align: center;
      padding: 8px;
    } (a) bold (b) 8px (c) padding (d) 2px solid
34. 34.🔠 Which tag is used for the main title on a page? (a) <h6> (b) <p> (c) <br> (d) <h1>
35. 35.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
36. 36.🔁 What does this code print?
    let age = 8;
    if (age >= 36) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) child (b) teen
37. 37.🚀 Which program lets you see your web page while you build it? (a) a music player (b) a web browser (c) a photo viewer (d) a calculator
38. 38.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <h3>Our school trip</h3>
    <h4>Hello, world!</h4>
    <h2>Hello, world!</h2>
39. 39.✍️ Which property is set to italic in this rule?
    .box {
      border: 2px solid;
      font-style: italic;
    } (a) italic (b) font-size (c) font-style (d) color
40. 40.🔍 One closing tag is missing. Which one?
    <i>Hello, world!</i>
    <h1>Rain today</h1>
    <strong>I love mangoes. (a) </h1> (b) </strong> (c) </i> (d) </h3>

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