Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 662 · 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 input type lets you pick only one? (a) password (b) text (c) radio (d) email
2. 2.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 200px;
     padding: 10px;
     border: 3px solid black;
     margin: 15px;
   }
3. 3.Which of these is a strong password? (a) 123456 (b) Kite_Fl1es@Dawn (c) password (d) riya2014
4. 4.📋 What number does the browser show next to “Mango”?
   <ol>
     <li>Litchi</li>
     <li>Grapes</li>
     <li>Banana</li>
     <li>Mango</li>
     <li>Guava</li>
   </ol>
5. 5.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
6. 6.True or false: <ul> shows bullet points. (a) True (b) False
7. 7.📄 Where does <h1> go: in the head or in the body? (a) in the head (b) in the body
8. 8.🔁 Which loop repeats code a set number of times? (a) if (b) else (c) let (d) for
9. 9.📊 How many cells does this table have in all?
   <table>
     <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
     <tr><td>Papaya</td><td>Guava</td><td>Papaya</td><td>Guava</td></tr>
     <tr><td>Papaya</td><td>Orange</td><td>Guava</td><td>Jamun</td></tr>
     <tr><td>Guava</td><td>Papaya</td><td>Orange</td><td>Litchi</td></tr>
   </table>
10. 10.⚖️ What colour is the text of this element?
    <h1 class="menu" id="end">Hi</h1>
    CSS:
    .menu { color: orange; }
    .menu { color: green; } (a) green (b) orange (c) red (d) blue
11. 11.🔢 In a basic web page file, which comes FIRST? (a) <!DOCTYPE html> (b) <head> (c) </head> (d) </body>
12. 12.♿ Does this help everyone, or make the page harder to use: link text “click here”? (a) makes it harder (b) helps everyone
13. 13.📋 What number does the browser show next to “Mango”?
    <ol>
      <li>Jamun</li>
      <li>Mango</li>
      <li>Grapes</li>
    </ol>
14. 14.True or false: <ul><li>Art</li></ul> goes in index.html. (a) False (b) True
15. 15.📄 Can HTML on its own make a form? (a) Yes (b) No
16. 16.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 4 (c) 3 (d) 2
17. 17.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
18. 18.📋 Does this list show bullets or numbers?
    <ol>
      <li>Jamun</li>
      <li>Papaya</li>
      <li>Banana</li>
    </ol> (a) numbers (b) bullets
19. 19.⚡ Which JavaScript word repeats code? (a) alert() (b) for (c) if (d) console.log()
20. 20.True or false: <img> goes in the head. (a) True (b) False
21. 21.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Riya’s Recipes</title>
    </head>
    <body>
      <h1>All about me</h1>
      <p>We won by 5 runs.</p>
    </body>
    </html> (a) All about me (b) body (c) We won by 5 runs. (d) Riya’s Recipes
22. 22.🧭 How many <main> parts should a page have? (a) none (b) one (c) three (d) ten
23. 23.🏷️ Which is the closing tag for <small>? (a) <small> (b) <small/> (c) </small> (d) <\small>
24. 24.True or false: <th> gives the table a title. (a) False (b) True
25. 25.🖌️ What colour is behind the letters?
    h2 {
      background-color: white;
      text-align: center;
      color: blue;
      font-size: 36px;
    } (a) blue (b) purple (c) white
26. 26.🖌️ Which CSS property makes the text bold? (a) color (b) font-family (c) font-weight (d) background-color
27. 27.🔐 Is 111111 a strong or a weak password? (a) strong (b) weak
28. 28.💪 Which flexbox property picks row or column? (a) justify-content (b) gap (c) display: flex (d) flex-direction
29. 29.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) justify-content (c) gap (d) display: flex
30. 30.🌈 In #230000 the red part is the hex number 23. What is it as a normal number?
31. 31.🖌️ What colour are the letters?
    h2 {
      background-color: purple;
      text-align: left;
      font-size: 32px;
      color: orange;
    } (a) orange (b) purple (c) yellow
32. 32.Which of these is true of a web server? (a) stores a website’s files (b) shows pages from the web (c) colours code to help us (d) turns HTML into a page
33. 33.🚀 Which file is best for code that reacts to clicks? (a) index.html (b) script.js (c) notes.txt (d) style.css
34. 34.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 110px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
35. 35.📄 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) My Hobbies (b) I like to read. (c) index.html (d) Match report
36. 36.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
37. 37.🔠 How many headings are in this code?
    <h1>The red kite</h1>
    <h4>Fun facts</h4>
    <p>The red kite</p>
38. 38.Which of these is not safe to do online? (a) think before you post (b) click prize links (c) use a nickname in games (d) log out on shared PCs
39. 39.♿ What does good colour contrast mean? (a) only red text (b) many bright colours (c) text stands out clearly (d) no colours at all
40. 40.🚀 Which program lets you see your web page while you build it? (a) a photo viewer (b) a web browser (c) a calculator (d) a music player

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