Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 734 · 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 one saves our .html files? (a) a code editor (b) a web server (c) a web browser
2. 2.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 32px;
     }
   } (a) Yes (b) No
3. 3.📝 At most, how many of these can be chosen at the same time?
   <form>
     <input type="checkbox" name="colour"> Orange
     <input type="checkbox" name="colour"> Green
     <input type="checkbox" name="colour"> Red
     <input type="checkbox" name="colour"> Blue
   </form>
4. 4.🖼️ Does <img> need a closing tag? (a) Yes (b) No
5. 5.📝 How many <input> tags are in this form?
   <form>
     <input type="date">
     <input type="text">
     <input type="password">
     <input type="submit" value="Send">
   </form>
6. 6.🖌️ What colour are the letters?
   p {
     color: blue;
     background-color: purple;
     text-align: left;
     font-size: 40px;
   } (a) white (b) purple (c) blue
7. 7.Which of these does HTML do? (a) makes headings and lists (b) shows a pop-up message (c) sets colours and fonts (d) reacts to a button click
8. 8.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 200px;
     padding: 5px;
     border: 4px solid black;
     margin: 20px;
   }
9. 9.Which of these is true of <article>? (a) holds a news story (b) holds the menu of links (c) holds the logo and title (d) sits at the bottom
10. 10.True or false: p { color: red; } goes in index.html. (a) True (b) False
11. 11.🧩 Which language makes a link? (a) JavaScript (b) HTML (c) CSS
12. 12.True or false: <ul> goes in the head. (a) False (b) True
13. 13.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) flex-end (c) space-between (d) center
14. 14.True or false: HTML makes a form box. (a) True (b) False
15. 15.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the head (b) in the body
16. 16.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 15; i = i + 3) {
      console.log(i);
    }
17. 17.📋 How many items does this list show?
    <ul>
      <li>Guava</li>
      <li>Orange</li>
    </ul>
18. 18.True or false: #top { color: blue; } goes in script.js. (a) False (b) True
19. 19.🔗 Which words do you click on?
    <a href="quiz.html">Contact us</a> (a) Visit the site (b) quiz.html (c) href (d) Contact us
20. 20.🔠 Which heading shows the SMALLEST text: <h5>, <h1>, <h6> or <h3>? (a) <h5> (b) <h3> (c) <h6> (d) <h1>
21. 21.🔠 How many headings are in this code?
    <h1>Cricket is fun.</h1>
    <p>Rain today</p>
    <p>The red kite</p>
    <h3>Fun facts</h3>
22. 22.📋 What number does the browser show next to “Mango”?
    <ol start="9">
      <li>Jamun</li>
      <li>Grapes</li>
      <li>Guava</li>
      <li>Orange</li>
      <li>Mango</li>
      <li>Litchi</li>
    </ol>
23. 23.🌗 Is white on black easy or hard to read? (a) easy to read (b) hard to read
24. 24.🚀 Which file should this code go in: #top { color: blue; } (a) index.html (b) script.js (c) style.css
25. 25.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    .big { color: red; }
    p { color: blue; }
    #hero { color: orange; } (a) orange (b) red (c) blue (d) purple
26. 26.🔠 Which heading shows the BIGGEST text: <h2>, <h5>, <h6> or <h3>? (a) <h2> (b) <h5> (c) <h6> (d) <h3>
27. 27.⚖️ What colour is the text of this element?
    <h2 class="box" id="hero">Hi</h2>
    CSS:
    h2 { color: white; }
    h2 { color: blue; } (a) blue (b) green (c) yellow (d) white
28. 28.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Space Facts</title>
    </head>
    <body>
      <h1>All about me</h1>
      <p>Here is my best one.</p>
    </body>
    </html> (a) Space Facts (b) body (c) Here is my best one. (d) All about me
29. 29.📝 What does <br> do? (a) makes text bold (b) adds a picture (c) makes a list (d) starts a new line
30. 30.🔠 Which heading shows the BIGGEST text: <h4>, <h1>, <h5> or <h3>? (a) <h1> (b) <h4> (c) <h3> (d) <h5>
31. 31.🔗 Where does this link open?
    <a href="art.html" target="_blank">Contact us</a> (a) in a new tab (b) in the same tab
32. 32.True or false: to tell a trusted adult is safe. (a) True (b) False
33. 33.🔠 Which heading shows the BIGGEST text: <h6>, <h1>, <h3> or <h5>? (a) <h3> (b) <h5> (c) <h1> (d) <h6>
34. 34.📄 Where does <title> go: in the head or in the body? (a) in the body (b) in the head
35. 35.🌐 Which one answers page requests? (a) a web server (b) a web browser (c) a code editor
36. 36.🔁 How many numbers does this code print?
    for (let i = 0; i < 8; i = i + 4) {
      console.log(i);
    }
37. 37.🔠 Which heading shows the BIGGEST text: <h5>, <h6>, <h3> or <h4>? (a) <h6> (b) <h4> (c) <h5> (d) <h3>
38. 38.💪 Which flexbox property picks row or column? (a) gap (b) display: flex (c) flex-direction (d) justify-content
39. 39.🌈 In #002500 the green part is the hex number 25. What is it as a normal number?
40. 40.🔁 Which loop repeats code a set number of times? (a) if (b) else (c) for (d) let

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