Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 227 · 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 holds the address of a link? (a) id (b) src (c) href (d) alt
2. 2.📝 Which input type sends the form? (a) radio (b) email (c) text (d) submit
3. 3.🚀 Which file should this code go in: body { margin: 0; } (a) script.js (b) style.css (c) index.html
4. 4.True or false: <ol> shows 1, 2, 3 numbers. (a) True (b) False
5. 5.🔁 How many numbers does this code print?
   for (let i = 0; i < 5; i = i + 4) {
     console.log(i);
   }
6. 6.🔠 Which tag is the least important heading? (a) <h1> (b) <h3> (c) <p> (d) <h6>
7. 7.♿ Who uses a screen reader? (a) people who are blind (b) only robots (c) only coders (d) only teachers
8. 8.📝 On how many lines does the browser show this paragraph?
   <p>Rivers flow<br>Roses are red<br>Kites fly high<br>Birds sing</p>
9. 9.🔒 Is the connection to this address scrambled (encrypted)?
   http://learn.example.com/index.html (a) No (b) Yes
10. 10.What does font-weight do? (a) makes letters bigger (b) picks the font style (c) sets the letter colour (d) makes the text bold
11. 11.🌍 What is the path in this URL?
    https://school.example.in/maths/tables.html (a) /maths/tables.html (b) https (c) /index.html (d) school.example.in
12. 12.♿ Does this help everyone, or make the page harder to use: write clear link text? (a) helps everyone (b) makes it harder
13. 13.⚖️ What colour is the text of this element?
    <p class="menu" id="end">Hi</p>
    CSS:
    .menu { color: white; }
    .menu { color: black; } (a) black (b) white (c) green (d) orange
14. 14.📱 What does a media query check? (a) the page title (b) the screen width (c) the battery level (d) the time of day
15. 15.📋 Which list tag lists things in any order? (a) <li> (b) <ul> (c) <ol>
16. 16.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
17. 17.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 420px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).
18. 18.🧭 Which semantic tag holds the menu of links? (a) <footer> (b) <article> (c) <nav> (d) <header>
19. 19.📋 How many items does this list show?
    <ul>
      <li>Orange</li>
      <li>Mango</li>
      <li>Grapes</li>
      <li>Jamun</li>
    </ul>
20. 20.What is <input type="email"> for? (a) hides what you type (b) takes only numbers (c) picks a day (d) is for an email address
21. 21.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) { } (d) [ ]
22. 22.True or false: a web server saves our .html files. (a) True (b) False
23. 23.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the body (b) in the head
24. 24.✍️ What value is given to padding in this rule?
    .box {
      font-size: 20px;
      padding: 8px;
      text-align: center;
    } (a) padding (b) bold (c) 8px (d) 2px solid
25. 25.🔒 Is the connection to this address scrambled (encrypted)?
    https://www.example.com/maths/tables.html (a) No (b) Yes
26. 26.🔗 What does target="_blank" do to a link? (a) opens it in a new tab (b) makes it blank (c) hides the link (d) makes it bold
27. 27.📝 How many paragraphs does this code make?
    <p>Fun facts</p>
    <p>The red kite</p>
    <p>The red kite</p>
    <p>I love mangoes.</p>
28. 28.🔁 How many numbers does this code print?
    for (let i = 0; i < 6; i = i + 4) {
      console.log(i);
    }
29. 29.🖌️ Which CSS property centres a heading? (a) text-align (b) font-size (c) font-weight (d) font-family
30. 30.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="colour"> Pink
      <input type="checkbox" name="colour"> Green
      <input type="checkbox" name="colour"> Red
      <input type="checkbox" name="colour"> Orange
      <input type="checkbox" name="colour"> Blue
    </form>
31. 31.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) neither (c) the shorter one (d) the first one
32. 32.🔁 How many times does this code print “Hi”?
    for (let i = 1; i < 9; i++) {
      console.log("Hi");
    }
33. 33.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) body (b) My Hobbies (c) I like to read. (d) Welcome!
34. 34.🎯 Which element does the selector #main style? (a) <span class="menu"> (b) <div class="main"> (c) <div id="logo"> (d) <div id="main">
35. 35.📄 Can HTML on its own show paragraphs? (a) No (b) Yes
36. 36.🌍 What is the path in this URL?
    https://learn.example.com/about.html (a) /maths/tables.html (b) /about.html (c) learn.example.com (d) https
37. 37.🖼️ How many pixels wide is the picture drawn?
    <img src="bus.jpg" alt="Our school bus" width="400">
38. 38.📊 Are <th> cells shown bold and centred by default? (a) No (b) Yes
39. 39.💬 Does the browser show comments on the page? (a) No (b) Yes
40. 40.📊 How many cells are in each row?
    <table>
      <tr><td>Banana</td><td>Banana</td><td>Jamun</td></tr>
      <tr><td>Jamun</td><td>Grapes</td><td>Orange</td></tr>
      <tr><td>Banana</td><td>Orange</td><td>Mango</td></tr>
    </table>

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