Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 326 · 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 property picks the font style? (a) text-align (b) font-family (c) background-color (d) font-weight
2. 2.True or false: .big is a class selector. (a) False (b) True
3. 3.💬 Which text will NOT show on the page?
   <!-- <p>Our school trip</p> -->
   <p>Cricket is fun.</p>
   <p>Fun facts</p>
   <p>The red kite</p> (a) Fun facts (b) Cricket is fun. (c) The red kite (d) Our school trip
4. 4.📄 What is the big heading shown on this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Riya’s Recipes</title>
   </head>
   <body>
     <h1>Easy snacks</h1>
     <p>We won by 5 runs.</p>
   </body>
   </html> (a) body (b) We won by 5 runs. (c) Easy snacks (d) Riya’s Recipes
5. 5.📱 What does a media query check? (a) the battery level (b) the time of day (c) the screen width (d) the page title
6. 6.🔁 What does i++ do? (a) prints i (b) adds 1 to i (c) doubles i (d) takes 1 from i
7. 7.📊 How many cells does this table have in all?
   <table>
     <tr><td>Banana</td><td>Banana</td></tr>
     <tr><td>Jamun</td><td>Grapes</td></tr>
   </table>
8. 8.🌈 Which colour is #ff0000? (a) red (b) bright green (c) white (d) yellow
9. 9.🔍 Which line is missing its closing tag?
   line 1: <h3>Our school trip
   line 2: <b>My best friend</b>
   line 3: <strong>Hello, world!</strong> (a) line 2 (b) line 3 (c) line 1
10. 10.📋 What number does the browser show next to “Jamun”?
    <ol start="4">
      <li>Orange</li>
      <li>Jamun</li>
      <li>Litchi</li>
    </ol>
11. 11.🔗 Where does this link open?
    <a href="news.html" target="_blank">Visit the site</a> (a) in the same tab (b) in a new tab
12. 12.🧭 Why use <nav> instead of <div> for a menu? (a) it loads faster (b) it adds pictures (c) it makes text red (d) it tells its meaning
13. 13.💪 Which flexbox property picks row or column? (a) gap (b) justify-content (c) align-items (d) flex-direction
14. 14.🧩 An opening tag + content + a closing tag together make an ___. (a) editor (b) attribute (c) address (d) element
15. 15.🧭 Which semantic tag holds the main content? (a) <header> (b) <main> (c) <article> (d) <nav>
16. 16.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 3; i++) {
      total = total + i;
    }
    console.log(total);
17. 17.🖌️ How big is the text, in px?
    p {
      background-color: blue;
      font-size: 32px;
      text-align: center;
      color: green;
    }
18. 18.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
19. 19.🎯 Which CSS selector matches this element?
    <li class="box" id="main">Hello</li> (a) .star (b) #logo (c) #main (d) div
20. 20.What does justify-content: center do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
21. 21.Which of these is true of a code editor? (a) answers page requests (b) opens web pages for us (c) shows pages from the web (d) shows line numbers
22. 22.🔗 Which attribute holds the address of a link? (a) src (b) id (c) href (d) alt
23. 23.🔗 Which words do you click on?
    <a href="games.html">Take the quiz</a> (a) href (b) games.html (c) Play games (d) Take the quiz
24. 24.🚀 Which file should this code go in: console.log(5 + 2); (a) index.html (b) script.js (c) style.css
25. 25.🔍 Which is the odd one out? (a) changes the page live (b) changes the text size (c) adds space around boxes (d) rounds box corners
26. 26.✍️ What value is given to background-color in this rule?
    .note {
      color: red;
      margin: 10px;
      background-color: yellow;
    } (a) background-color (b) 10px (c) yellow (d) 8px
27. 27.Which of these is a strong password? (a) password (b) 111111 (c) abcd1234 (d) Mango#Kite29!
28. 28.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 140px;
      padding: 5px;
      border: 2px solid black;
      margin: 5px;
    }
29. 29.✍️ What is the selector in this CSS rule?
    .note {
      text-align: center;
      font-weight: bold;
    } (a) bold (b) .note (c) text-align (d) #top
30. 30.Which of these is true of <nav>? (a) helps you move around (b) holds the main content (c) is the page’s key part (d) holds one blog post
31. 31.♿ A part of the page is under a <h4> heading. Which tag should its sub-heading use? (a) <h5> (b) <h3> (c) <h6> (d) <h2>
32. 32.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    }
33. 33.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) space-between (c) center (d) flex-end
34. 34.🎯 Which sign starts a class selector? (a) @ (b) # (c) & (d) .
35. 35.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 5; i++) {
      total = total + 6;
    }
    console.log(total);
36. 36.Which of these has a closing tag? (a) <img> (b) <br> (c) <hr> (d) <title>
37. 37.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 9; i = i + 2) {
      console.log(i);
    }
38. 38.⚖️ What colour is the text of this element?
    <h1 class="star" id="end">Hi</h1>
    CSS:
    h1 { color: yellow; }
    h1 { color: purple; } (a) green (b) yellow (c) orange (d) purple
39. 39.True or false: HTML checks a quiz answer. (a) False (b) True
40. 40.🏷️ HTML marks up text using ___. (a) wires (b) tags (c) pixels (d) keys

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