Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 507 · 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 sign starts an id selector? (a) . (b) # (c) @ (d) &
2. 2.🎯 Which CSS selector matches this element?
   <h2 class="box" id="main">Hello</h2> (a) .star (b) #box (c) .box (d) .main
3. 3.🔍 One closing tag is missing. Which one?
   <u>My pets</u>
   <i>Rain today
   <h1>Hello, world!</h1> (a) </i> (b) </h1> (c) </u> (d) </strong>
4. 4.🔠 How many headings are in this code?
   <h1>Good morning!</h1>
   <p>I love mangoes.</p>
   <p>My pets</p>
   <h2>Fun facts</h2>
   <p>Our school trip</p>
5. 5.Which of these does JavaScript do? (a) changes the page live (b) sets colours and fonts (c) makes headings and lists (d) rounds box corners
6. 6.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 24px;
     }
   }
7. 7.True or false: JavaScript shows a pop-up message. (a) False (b) True
8. 8.True or false: #main is an id selector. (a) False (b) True
9. 9.True or false: to think before you post is safe. (a) True (b) False
10. 10.💬 Which text will NOT show on the page?
    <p>The red kite</p>
    <!-- <p>Our school trip</p> -->
    <p>I love mangoes.</p> (a) I love mangoes. (b) The red kite (c) Our school trip
11. 11.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) display: flex (c) justify-content (d) align-items
12. 12.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Art Gallery</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>Try this poha.</p>
    </body>
    </html> (a) Try this poha. (b) Art Gallery (c) body (d) Welcome!
13. 13.🖌️ Which CSS property makes the text bold? (a) font-size (b) color (c) text-align (d) font-weight
14. 14.True or false: <title> has a closing tag. (a) False (b) True
15. 15.💬 How many paragraphs show on the page?
    <!-- <p>Rain today</p> -->
    <p>Cricket is fun.</p>
    <!-- <p>Good morning!</p> -->
16. 16.🧭 Which semantic tag sits at the very top? (a) <nav> (b) <aside> (c) <header> (d) <footer>
17. 17.⚖️ What colour is the text of this element?
    <h2 class="menu" id="logo">Hi</h2>
    CSS:
    h2 { color: green; }
    h2 { color: red; } (a) green (b) black (c) red (d) blue
18. 18.🌈 Which colour of light is strongest in rgb(56, 227, 7)? (a) red (b) blue (c) green
19. 19.Which of these is the content? (a) space inside the border (b) a solid or dotted edge (c) the gap to other boxes (d) the text or picture
20. 20.⚖️ What colour is the text of this element?
    <h1 class="star" id="logo">Hi</h1>
    CSS:
    .star { color: purple; }
    #logo { color: red; }
    h1 { color: green; } (a) purple (b) white (c) green (d) red
21. 21.📝 Which tag gives a form box a name you can click? (a) <label> (b) <hr> (c) <title> (d) <h1>
22. 22.True or false: the browser shows the page to you. (a) False (b) True
23. 23.🖌️ What colour is behind the letters?
    h1 {
      text-align: right;
      color: orange;
      font-size: 32px;
      background-color: yellow;
    } (a) orange (b) yellow (c) purple
24. 24.🔠 Which heading shows the BIGGEST text: <h2>, <h6>, <h3> or <h1>? (a) <h2> (b) <h1> (c) <h6> (d) <h3>
25. 25.✍️ What value is given to font-weight in this rule?
    li {
      font-weight: bold;
      font-style: italic;
      text-align: center;
      border: 2px solid;
    } (a) 300px (b) font-weight (c) 2px solid (d) bold
26. 26.🚀 Which file should this code go in: <a href="a.html">Go</a> (a) style.css (b) script.js (c) index.html
27. 27.Which of these is a closing tag? (a) <b> (b) </title> (c) <p> (d) <body>
28. 28.📝 How many <input> tags are in this form?
    <form>
      <input type="email">
      <input type="password">
      <input type="number">
      <input type="date">
      <input type="checkbox">
      <input type="submit" value="Send">
    </form>
29. 29.📋 How many items does this list show?
    <ul>
      <li>Jamun</li>
      <li>Banana</li>
    </ul>
30. 30.🚀 Where in index.html does the link to style.css go? (a) after </html> (b) in the head (c) in the footer (d) inside a <p>
31. 31.♿ What does good colour contrast mean? (a) text stands out clearly (b) many bright colours (c) no colours at all (d) only red text
32. 32.🌍 What is the protocol in this URL?
    https://www.example.com/about.html (a) http (b) www.example.com (c) https (d) /about.html
33. 33.✍️ Which property is set to red in this rule?
    h2 {
      font-size: 20px;
      color: red;
      background-color: yellow;
    } (a) red (b) font-size (c) text-align (d) color
34. 34.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) ; (d) :
35. 35.📋 Which tag goes around each item of a list? (a) <ol> (b) <ul> (c) <p> (d) <li>
36. 36.🛡️ Is it safe to use the same password on every site? (a) Yes (b) No
37. 37.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 260px;
      padding: 25px;
      border: 5px solid black;
      margin: 20px;
    }
38. 38.True or false: <p> goes in the head. (a) False (b) True
39. 39.🔠 How many heading levels does HTML have? (a) 3 (b) 4 (c) 10 (d) 6
40. 40.💬 How many paragraphs show on the page?
    <p>My pets</p>
    <!-- <p>My best friend</p> -->
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>Our school trip</p> -->
    <!-- <p>Hello, world!</p> -->

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