Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 743 · 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 heading shows the SMALLEST text: <h2>, <h6>, <h1> or <h5>? (a) <h1> (b) <h5> (c) <h2> (d) <h6>
2. 2.🖼️ Which picture file does the browser load?
   <img src="moon.png" alt="The full moon" width="100"> (a) The full moon (b) bus.jpg (c) fort.jpg (d) moon.png
3. 3.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) justify-content (c) display: flex (d) align-items
4. 4.What is <input type="text"> for? (a) picks a day (b) is for one line of words (c) lets you pick only one (d) sends the form
5. 5.What does text-align do? (a) centres a heading (b) colours behind the text (c) sets the letter colour (d) makes letters bigger
6. 6.💬 How many paragraphs show on the page?
   <!-- <p>I love mangoes.</p> -->
   <p>Cricket is fun.</p>
   <!-- <p>Rain today</p> -->
   <!-- <p>Our school trip</p> -->
7. 7.🎯 Which CSS selector matches this element?
   <div class="menu" id="intro">Hello</div> (a) .intro (b) .menu (c) #main (d) span
8. 8.⚡ Which JavaScript word shows a pop-up box? (a) if (b) let (c) console.log() (d) alert()
9. 9.🏷️ Is <p> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
10. 10.Which of these is the content? (a) space inside the border (b) a solid or dotted edge (c) space outside the border (d) the text or picture
11. 11.True or false: padding is space outside the border. (a) False (b) True
12. 12.📄 Which part holds everything you see on the page? (a) the body (b) the head (c) the title (d) the doctype
13. 13.🧭 Why use <nav> instead of <div> for a menu? (a) it makes text red (b) it adds pictures (c) it loads faster (d) it tells its meaning
14. 14.Which of these does CSS do? (a) reacts to a button click (b) sets colours and fonts (c) checks a quiz answer (d) gives the page structure
15. 15.Which of these is true of a code editor? (a) opens web pages for us (b) sends pages over the net (c) answers page requests (d) colours code to help us
16. 16.🔢 On a typical page, from top to bottom, which comes FIRST? (a) <header> (b) <footer> (c) <nav> (d) <main>
17. 17.Which of these does CSS do? (a) puts a picture on a page (b) adds space around boxes (c) makes a link (d) checks a quiz answer
18. 18.True or false: HTTPS scrambles data on its way. (a) True (b) False
19. 19.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
20. 20.Which of these is true of a web server? (a) colours code to help us (b) saves our .html files (c) stores a website’s files (d) shows pages from the web
21. 21.🔁 What does this code print?
    let score = 34;
    if (score >= 15) {
      console.log("You win");
    } else {
      console.log("Play again");
    } (a) Play again (b) You win
22. 22.📋 How many items does this list show?
    <ol>
      <li>Mango</li>
      <li>Orange</li>
      <li>Papaya</li>
      <li>Guava</li>
      <li>Banana</li>
      <li>Jamun</li>
    </ol>
23. 23.📝 Does <input> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
24. 24.🖌️ Where does the text sit on its line?
    h1 {
      color: purple;
      text-align: left;
      font-size: 28px;
      background-color: green;
    } (a) on the right (b) in the middle (c) on the left
25. 25.Which of these is true of <footer>? (a) holds a side box of tips (b) helps you move around (c) holds copyright notes (d) holds the main content
26. 26.🔍 Which is the odd one out? (a) adds space around boxes (b) sets colours and fonts (c) rounds box corners (d) makes headings and lists
27. 27.🖼️ Which picture file does the browser load?
    <img src="dog.jpg" alt="A happy dog" width="350"> (a) A happy dog (b) moon.png (c) bus.jpg (d) dog.jpg
28. 28.True or false: <ol> lists steps in order. (a) False (b) True
29. 29.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) exactly 1000px (c) turned off (d) 600px or wider
30. 30.📊 How many cells does this table have in all?
    <table>
      <tr><td>Grapes</td><td>Banana</td></tr>
      <tr><td>Grapes</td><td>Mango</td></tr>
      <tr><td>Grapes</td><td>Grapes</td></tr>
    </table>
31. 31.🔡 Are HTML tag names usually written in small letters? (a) No (b) Yes
32. 32.Which of these is padding? (a) space outside the border (b) the line round the box (c) the gap round content (d) the text or picture
33. 33.🧩 Which language sets colours and fonts? (a) HTML (b) CSS (c) JavaScript
34. 34.📝 Does <img> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
35. 35.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 7; i++) {
      total = total + i;
    }
    console.log(total);
36. 36.📊 How many rows does this table have?
    <table>
      <tr><td>Papaya</td><td>Mango</td><td>Banana</td></tr>
      <tr><td>Mango</td><td>Grapes</td><td>Guava</td></tr>
      <tr><td>Grapes</td><td>Jamun</td><td>Litchi</td></tr>
      <tr><td>Jamun</td><td>Mango</td><td>Orange</td></tr>
    </table>
37. 37.✍️ What value is given to font-size in this rule?
    h1 {
      font-size: 20px;
      color: red;
      width: 300px;
    } (a) yellow (b) center (c) 20px (d) font-size
38. 38.🔠 How many headings are in this code?
    <h1>I love mangoes.</h1>
    <h4>My best friend</h4>
    <h4>I love mangoes.</h4>
    <h2>The red kite</h2>
    <p>Cricket is fun.</p>
39. 39.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h3> → <h2> (a) Yes (b) No
40. 40.⚡ What does this code print? (Look at the quotes!)
    let x = "3";
    let y = 2;
    console.log(x + y); (a) Error (b) 5 (c) 32

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