Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 128 · 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>My Hobbies</title>
   </head>
   <body>
     <h1>Match report</h1>
     <p>Mars is red.</p>
   </body>
   </html> (a) index.html (b) My Hobbies (c) Mars is red. (d) Match report
2. 2.🧩 Which language changes the text size? (a) HTML (b) JavaScript (c) CSS
3. 3.True or false: <ol> lists steps in order. (a) False (b) True
4. 4.What does justify-content: flex-start do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the end (d) packs boxes at the start
5. 5.⚖️ What colour is the text of this element?
   <p class="box" id="logo">Hi</p>
   CSS:
   .box { color: orange; }
   .box { color: yellow; } (a) white (b) yellow (c) orange (d) blue
6. 6.🔍 Which is the odd one out? (a) has an address bar (b) turns HTML into a page (c) is where we type code (d) shows pages from the web
7. 7.♿ Who uses a screen reader? (a) only robots (b) only teachers (c) only coders (d) people who are blind
8. 8.🔢 When you open a web page, what comes right after “you type the URL”? (a) the browser shows it (b) the server sends files (c) DNS finds the server (d) the browser asks it
9. 9.True or false: the browser is the page’s address. (a) False (b) True
10. 10.🖌️ What colour are the letters?
    h1 {
      text-align: left;
      background-color: white;
      color: yellow;
      font-size: 36px;
    } (a) white (b) black (c) yellow
11. 11.🏷️ What does a closing tag have that an opening tag does not? (a) a hash # (b) a dollar $ (c) a slash / (d) a dot .
12. 12.💬 How many paragraphs show on the page?
    <!-- <p>Cricket is fun.</p> -->
    <!-- <p>Rain today</p> -->
    <p>My best friend</p>
    <p>Fun facts</p>
13. 13.🚀 What is the home page file of a website usually called? (a) start.js (b) main.png (c) index.html (d) home.css
14. 14.🌈 Which hex code is cyan? (a) #00ffff (b) #ff00ff (c) #000000 (d) #ffffff
15. 15.True or false: body is an element selector. (a) False (b) True
16. 16.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 220px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 40px wide (no margins).
17. 17.Which of these is true of <footer>? (a) holds a side box of tips (b) holds one blog post (c) holds copyright notes (d) helps you move around
18. 18.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
19. 19.📱 What does a media query check? (a) the screen width (b) the page title (c) the battery level (d) the time of day
20. 20.🛡️ Online: is it safe to post your home address? (a) not safe (b) safe
21. 21.📊 Which tag holds the whole table? (a) <table> (b) <th> (c) <caption> (d) <td>
22. 22.True or false: <input type="number"> takes only numbers. (a) True (b) False
23. 23.🔍 Which is the odd one out? (a) makes a form box (b) sets colours and fonts (c) rounds box corners (d) adds space around boxes
24. 24.💬 How many paragraphs show on the page?
    <!-- <p>Our school trip</p> -->
    <!-- <p>I love mangoes.</p> -->
    <p>My best friend</p>
25. 25.True or false: <ul> is one item of a list. (a) True (b) False
26. 26.📋 Which list tag is an ordered list? (a) <ul> (b) <li> (c) <ol>
27. 27.Which of these does HTML do? (a) makes a link (b) lays out the page (c) changes the text size (d) checks a quiz answer
28. 28.🌍 What is the domain name in this URL?
    http://www.example.com/games/chess.html (a) kids.example.org (b) http (c) /games/chess.html (d) www.example.com
29. 29.🖌️ What colour are the letters?
    h1 {
      text-align: center;
      color: blue;
      background-color: red;
      font-size: 36px;
    } (a) blue (b) yellow (c) red
30. 30.🔗 Which words do you click on?
    <a href="news.html">Visit the site</a> (a) href (b) news.html (c) Maths fun (d) Visit the site
31. 31.🧩 Which language makes a link? (a) CSS (b) JavaScript (c) HTML
32. 32.🔢 To build and share your first web page, which comes first: “add CSS styles” or “test in a browser”? (a) test in a browser (b) add CSS styles
33. 33.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) center (d) flex-end
34. 34.🔁 How many times does this code print “Well done”?
    for (let i = 3; i < 11; i++) {
      console.log("Well done");
    }
35. 35.⚖️ What colour is the text of this element?
    <h1 class="menu" id="intro">Hi</h1>
    CSS:
    #intro { color: green; }
    h1 { color: blue; } (a) white (b) orange (c) blue (d) green
36. 36.📊 How many rows does this table have?
    <table>
      <tr><td>Mango</td><td>Litchi</td><td>Banana</td><td>Mango</td></tr>
      <tr><td>Banana</td><td>Grapes</td><td>Jamun</td><td>Jamun</td></tr>
      <tr><td>Mango</td><td>Guava</td><td>Guava</td><td>Grapes</td></tr>
      <tr><td>Banana</td><td>Litchi</td><td>Litchi</td><td>Mango</td></tr>
    </table>
37. 37.📋 Which list shows the steps of a recipe best? (a) <ul> (b) <br> (c) <ol> (d) <hr>
38. 38.🖌️ Which CSS property centres a heading? (a) font-family (b) background-color (c) text-align (d) font-weight
39. 39.🔗 Which address opens when you click this link?
    <a href="https://example.com">Visit the site</a> (a) https://example.com (b) maths.html (c) art.html (d) Visit the site
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 80px wide (no margins).

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