Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 980 · 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 attribute of <img> describes the picture? (a) alt (b) width (c) height (d) src
2. 2.🌍 What is the domain name in this URL?
   http://www.example.com/maths/tables.html (a) kids.example.org (b) www.example.com (c) /maths/tables.html (d) http
3. 3.🔍 Which is the odd one out? (a) changes the page live (b) reacts to a button click (c) makes a form box (d) checks a quiz answer
4. 4.🧭 Is <aside> semantic or not semantic? (a) semantic (b) not semantic
5. 5.🎯 Which CSS selector matches this element?
   <p class="menu" id="main">Hello</p> (a) .note (b) #main (c) .main (d) #menu
6. 6.🖼️ Which attribute of <img> names the picture file? (a) width (b) src (c) height (d) alt
7. 7.⚡ A JavaScript file usually ends with which extension? (a) .js (b) .html (c) .css (d) .jpg
8. 8.🔠 Which heading shows the BIGGEST text: <h2>, <h1>, <h5> or <h4>? (a) <h2> (b) <h5> (c) <h1> (d) <h4>
9. 9.🔠 Which heading shows the BIGGEST text: <h1>, <h4>, <h5> or <h3>? (a) <h3> (b) <h5> (c) <h4> (d) <h1>
10. 10.🔁 What does this code print?
    let age = 17;
    if (age >= 22) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) child (b) teen
11. 11.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
12. 12.Which of these is true of a code editor? (a) opens web pages for us (b) answers page requests (c) is where we type code (d) has an address bar
13. 13.Which of these does JavaScript do? (a) makes a link (b) changes the text size (c) shows a pop-up message (d) makes headings and lists
14. 14.💬 Does the browser show comments on the page? (a) Yes (b) No
15. 15.🔗 Which words do you click on?
    <a href="games.html">Visit the site</a> (a) Visit the site (b) href (c) games.html (d) Maths fun
16. 16.🎯 Which element does the selector .star style? (a) <h2 class="note"> (b) <h1 class="menu"> (c) <h1 id="star"> (d) <h1 class="star">
17. 17.🎯 Which element does the selector #end style? (a) <span class="end"> (b) <p class="star"> (c) <span id="end"> (d) <span id="hero">
18. 18.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 130px;
      padding: 30px;
      border: 1px solid black;
      margin: 5px;
    }
19. 19.♿ A part of the page is under a <h2> heading. Which tag should its sub-heading use? (a) <h3> (b) <h2> (c) <h4> (d) <h1>
20. 20.True or false: <li> is an empty tag. (a) False (b) True
21. 21.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    }
22. 22.📄 Can HTML on its own make bullet lists? (a) Yes (b) No
23. 23.🚀 What is the home page file of a website usually called? (a) main.png (b) index.html (c) start.js (d) home.css
24. 24.🔒 Is the connection to this address scrambled (encrypted)?
    http://school.example.in/games/chess.html (a) No (b) Yes
25. 25.📦 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: 10px;
      border: 1px solid black;
      margin: 20px;
    }
26. 26.Which of these is a closing tag? (a) <li> (b) </b> (c) <h1> (d) <body>
27. 27.Which of these is safe to do online? (a) share your password (b) put secrets in comments (c) check for https first (d) meet an online stranger
28. 28.🎯 Which sign starts an id selector? (a) . (b) & (c) @ (d) #
29. 29.Which of these is true of <header>? (a) holds a side box of tips (b) holds the logo and title (c) holds copyright notes (d) holds a news story
30. 30.Which of these does JavaScript do? (a) gives the page structure (b) counts down a timer (c) makes a link (d) sets colours and fonts
31. 31.🖼️ Which picture file does the browser load?
    <img src="map.png" alt="Map of India" width="350"> (a) Map of India (b) cake.jpg (c) dog.jpg (d) map.png
32. 32.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
33. 33.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h3> → <h5> (a) Yes (b) No
34. 34.✍️ What is the selector in this CSS rule?
    h1 {
      font-style: italic;
      font-weight: bold;
    } (a) font-style (b) p (c) bold (d) h1
35. 35.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 480px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 60px wide (no margins).
36. 36.✍️ What value is given to font-style in this rule?
    .note {
      font-size: 20px;
      font-style: italic;
      padding: 8px;
    } (a) 20px (b) italic (c) font-style (d) red
37. 37.📝 What does <p> make? (a) a link (b) a table (c) a picture (d) a paragraph
38. 38.🖼️ How many pixels wide is the picture drawn?
    <img src="fort.jpg" alt="An old fort" width="350">
39. 39.💬 How many paragraphs show on the page?
    <p>The red kite</p>
    <!-- <p>Hello, world!</p> -->
    <p>Cricket is fun.</p>
    <p>My pets</p>
40. 40.📋 How many items does this list show?
    <ol>
      <li>Jamun</li>
      <li>Orange</li>
      <li>Mango</li>
      <li>Banana</li>
    </ol>

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