Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 712 · 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.🚀 Should file names have spaces, like my page.html? (a) No (b) Yes
2. 2.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) turned off (c) exactly 1000px (d) 600px or wider
3. 3.⚖️ What colour is the text of this element?
   <h2 class="star" id="intro">Hi</h2>
   CSS:
   h2 { color: blue; }
   h2 { color: white; } (a) black (b) blue (c) white (d) red
4. 4.📝 How many paragraphs does this code make?
   <p>My best friend</p>
   <h2>Good morning!</h2>
   <p>My best friend</p>
   <p>My best friend</p>
5. 5.🌈 Which colour is rgb(0, 255, 0)? (a) black (b) bright green (c) cyan (d) magenta
6. 6.🚀 Where in index.html does the link to style.css go? (a) after </html> (b) inside a <p> (c) in the head (d) in the footer
7. 7.💬 How does an HTML comment start? (a) # (b) // (c) <!-- (d) /*
8. 8.🔠 Which heading shows the BIGGEST text: <h1>, <h2>, <h3> or <h4>? (a) <h2> (b) <h4> (c) <h3> (d) <h1>
9. 9.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) blue (c) black (d) green
10. 10.⚖️ What colour is the text of this element?
    <p class="big" id="intro">Hi</p>
    CSS:
    p { color: red; }
    #intro { color: purple; }
    .big { color: yellow; } (a) purple (b) blue (c) red (d) yellow
11. 11.♿ What does good colour contrast mean? (a) text stands out clearly (b) only red text (c) no colours at all (d) many bright colours
12. 12.✍️ What value is given to font-size in this rule?
    p {
      background-color: yellow;
      text-align: center;
      font-size: 20px;
      margin: 10px;
    } (a) 20px (b) font-size (c) center (d) yellow
13. 13.📝 Does <li> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
14. 14.⚡ What does this code show?
    let name = "Aman";
    console.log("Well done, " + name + "!"); (a) name (b) Aman (c) Well done, Aman! (d) Well done, name!
15. 15.🔗 Which address opens when you click this link?
    <a href="contact.html">Contact us</a> (a) maths.html (b) contact.html (c) Contact us (d) https://example.com
16. 16.True or false: <title> goes in the body. (a) False (b) True
17. 17.📊 How many cells does this table have in all?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Papaya</td><td>Banana</td><td>Orange</td></tr>
    </table>
18. 18.🔍 Which is the odd one out? (a) colours code to help us (b) shows line numbers (c) saves our .html files (d) stores a website’s files
19. 19.🔁 How many times does this code print “Hi”?
    for (let i = 1; i <= 8; i++) {
      console.log("Hi");
    }
20. 20.📋 Which list tag shows bullet points? (a) <ol> (b) <li> (c) <ul>
21. 21.🔠 Which tag is the least important heading? (a) <h6> (b) <p> (c) <h3> (d) <h1>
22. 22.True or false: JavaScript sets colours and fonts. (a) False (b) True
23. 23.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
24. 24.⚡ Which JavaScript word shows a pop-up box? (a) for (b) console.log() (c) alert() (d) let
25. 25.📊 How many rows does this table have?
    <table>
      <tr><td>Orange</td><td>Litchi</td><td>Guava</td></tr>
      <tr><td>Mango</td><td>Jamun</td><td>Guava</td></tr>
      <tr><td>Mango</td><td>Litchi</td><td>Papaya</td></tr>
    </table>
26. 26.💪 Which flexbox property picks row or column? (a) display: flex (b) gap (c) justify-content (d) flex-direction
27. 27.📝 How many paragraphs does this code make?
    <p>Hello, world!</p>
    <p>My best friend</p>
    <p>Hello, world!</p>
    <p>Fun facts</p>
    <p>My pets</p>
    <p>My best friend</p>
28. 28.True or false: <meta> is an empty tag. (a) False (b) True
29. 29.♿ Who uses a screen reader? (a) people who are blind (b) only teachers (c) only robots (d) only coders
30. 30.🔠 Which heading shows the BIGGEST text: <h2>, <h6>, <h3> or <h4>? (a) <h6> (b) <h2> (c) <h3> (d) <h4>
31. 31.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>Fun facts</p> -->
    <!-- <p>My best friend</p> -->
    <p>Our school trip</p>
    <!-- <p>My pets</p> -->
32. 32.✍️ What is the selector in this CSS rule?
    .box {
      font-size: 20px;
      padding: 8px;
      font-style: italic;
      background-color: yellow;
    } (a) 8px (b) h2 (c) .box (d) font-size
33. 33.🖌️ Which CSS property sets the letter colour? (a) font-size (b) color (c) font-family (d) font-weight
34. 34.⚡ What number does this code print?
    let a = 26;
    let b = 38;
    console.log(a + b);
35. 35.💬 Which text will NOT show on the page?
    <p>Cricket is fun.</p>
    <p>Our school trip</p>
    <!-- <p>Good morning!</p> --> (a) Good morning! (b) Our school trip (c) Cricket is fun.
36. 36.True or false: CSS sets colours and fonts. (a) False (b) True
37. 37.⚡ Which JavaScript word repeats code? (a) if (b) console.log() (c) let (d) for
38. 38.⚖️ What colour is the text of this element?
    <h1 class="star" id="main">Hi</h1>
    CSS:
    h1 { color: orange; }
    h1 { color: blue; } (a) blue (b) orange (c) white (d) yellow
39. 39.🔠 Which heading shows the SMALLEST text: <h2>, <h1>, <h5> or <h4>? (a) <h4> (b) <h1> (c) <h5> (d) <h2>
40. 40.🎨 Which tag connects an outside CSS file? (a) <img> (b) <a> (c) <css> (d) <link>

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