Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 511 · 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.🛡️ Online: is it safe to share your password? (a) not safe (b) safe
2. 2.🔢 When you open a web page, which comes FIRST? (a) the browser asks it (b) you type the URL (c) the browser shows it (d) the server sends files
3. 3.🔗 Which words do you click on?
   <a href="art.html">Visit the site</a> (a) href (b) art.html (c) Visit the site (d) Maths fun
4. 4.Which of these is a strong password? (a) password (b) S0lar!Pen#8 (c) 111111 (d) riya2014
5. 5.📄 Where does the text of <title> appear? (a) in a big heading (b) at the bottom (c) nowhere (d) on the browser tab
6. 6.🧭 Is <aside> semantic or not semantic? (a) semantic (b) not semantic
7. 7.⚖️ What colour is the text of this element?
   <h1 class="red" id="main">Hi</h1>
   CSS:
   #main { color: white; }
   .red { color: orange; }
   h1 { color: green; } (a) orange (b) green (c) red (d) white
8. 8.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 18px;
     }
   }
9. 9.🖌️ What colour are the letters?
   li {
     font-size: 40px;
     color: white;
     text-align: left;
     background-color: black;
   } (a) purple (b) black (c) white
10. 10.🖌️ Which CSS property makes letters bigger? (a) font-size (b) background-color (c) color (d) font-family
11. 11.🔗 Which words do you click on?
    <a href="maths.html">Art corner</a> (a) maths.html (b) School news (c) href (d) Art corner
12. 12.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 100px;
      padding: 5px;
      border: 5px solid black;
      margin: 15px;
    }
13. 13.🌈 Which colour of light is strongest in rgb(175, 12, 12)? (a) green (b) red (c) blue
14. 14.🎯 Which CSS selector matches this element?
    <h1 class="star" id="hero">Hello</h1> (a) .menu (b) #star (c) #hero (d) #top
15. 15.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 3 (c) 4 (d) 2
16. 16.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>Match report</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) index.html (b) I like to read. (c) My Hobbies (d) Match report
17. 17.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Mango</td><td>Litchi</td><td>Jamun</td><td>Mango</td></tr>
      <tr><td>Guava</td><td>Banana</td><td>Jamun</td><td>Mango</td></tr>
      <tr><td>Guava</td><td>Mango</td><td>Guava</td><td>Mango</td></tr>
    </table>
18. 18.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    #logo { color: blue; }
    .note { color: purple; }
    p { color: green; } (a) green (b) black (c) purple (d) blue
19. 19.📋 What number does the browser show next to “Grapes”?
    <ol start="6">
      <li>Jamun</li>
      <li>Orange</li>
      <li>Grapes</li>
      <li>Banana</li>
    </ol>
20. 20.🧩 Which language makes a link? (a) HTML (b) JavaScript (c) CSS
21. 21.True or false: <table> gives the table a title. (a) False (b) True
22. 22.♿ What does good colour contrast mean? (a) only red text (b) no colours at all (c) many bright colours (d) text stands out clearly
23. 23.📋 Which list shows the steps of a recipe best? (a) <hr> (b) <br> (c) <ol> (d) <ul>
24. 24.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 9; i = i + 4) {
      console.log(i);
    }
25. 25.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="bus.jpg" alt="Our school bus" width="50"> (a) bus.jpg (b) Our school bus (c) width (d) An old fort
26. 26.Which colour pair is hard to read? (a) black on white (b) light grey on white (c) dark grey on white (d) white on dark blue
27. 27.🌗 Is black on white easy or hard to read? (a) hard to read (b) easy to read
28. 28.📊 Which tag makes a heading cell? (a) <caption> (b) <tr> (c) <th> (d) <td>
29. 29.🌈 Which colour is #0000ff? (a) red (b) bright green (c) white (d) blue
30. 30.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Creative Sheet System (c) Colourful Site Styles (d) Cascading Style Sheets
31. 31.🔁 When does the else part run? (a) when if is true (b) never (c) when if is false (d) always
32. 32.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
33. 33.📝 How many <input> tags are in this form?
    <form>
      <input type="checkbox">
      <input type="password">
      <input type="number">
      <input type="date">
      <input type="submit" value="Send">
    </form>
34. 34.🔁 How many times does this code print “Welcome”?
    for (let i = 0; i <= 6; i++) {
      console.log("Welcome");
    }
35. 35.🎨 One CSS file can style how many pages? (a) no pages (b) many pages (c) only one word (d) only one image
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 30px;
      border: 1px solid black;
      margin: 10px;
    }
37. 37.🔍 One closing tag is missing. Which one?
    <b>Good morning!
    <h2>Fun facts</h2>
    <i>Our school trip</i> (a) </b> (b) </i> (c) </h2> (d) </h1>
38. 38.🌈 In #00b200 the green part is the hex number b2. What is it as a normal number?
39. 39.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 300px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 60px wide (no margins).
40. 40.🔁 What does this code print?
    let marks = 21;
    if (marks < 38) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Try again (b) Pass

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