Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 640 · 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.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 380px;
     justify-content: space-between;
   }
   Inside are 3 boxes, each 80px wide (no margins).
2. 2.🏷️ What does a closing tag have that an opening tag does not? (a) a hash # (b) a slash / (c) a dollar $ (d) a dot .
3. 3.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 1000 (c) 100 (d) 255
4. 4.🧭 Is <footer> semantic or not semantic? (a) semantic (b) not semantic
5. 5.📝 On how many lines does the browser show this paragraph?
   <p>Birds sing<br>Stars shine<br>Roses are red<br>Sky is blue</p>
6. 6.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 200px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 60px wide (no margins).
7. 7.🌈 In #2b0000 the red part is the hex number 2b. What is it as a normal number?
8. 8.🔗 Which words do you click on?
   <a href="maths.html">Play games</a> (a) href (b) maths.html (c) About us (d) Play games
9. 9.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Riya’s Recipes</title>
   </head>
   <body>
     <h1>Easy snacks</h1>
     <p>Mars is red.</p>
   </body>
   </html> (a) Mars is red. (b) index.html (c) Riya’s Recipes (d) Easy snacks
10. 10.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Banana</td><td>Banana</td></tr>
    </table>
11. 11.True or false: in <img>, alt is read by screen readers. (a) True (b) False
12. 12.⚡ What number does this code print?
    let a = 38;
    let b = 6;
    console.log(a + b);
13. 13.🖌️ Which CSS property colours behind the text? (a) text-align (b) font-weight (c) background-color (d) font-size
14. 14.🌗 Is dark grey on white easy or hard to read? (a) easy to read (b) hard to read
15. 15.📝 Which tag makes a drop-down list? (a) <select> (b) <li> (c) <ul> (d) <ol>
16. 16.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 310px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 80px wide (no margins).
17. 17.True or false: “skipping heading levels” makes the page harder to use. (a) True (b) False
18. 18.📱 Responsive design means a page ___. (a) has no pictures (b) fits every screen (c) is only for laptops (d) never changes
19. 19.🔡 Are HTML tag names usually written in small letters? (a) No (b) Yes
20. 20.🔠 Are headings shown in bold by default? (a) No (b) Yes
21. 21.⚖️ What colour is the text of this element?
    <h1 class="big" id="top">Hi</h1>
    CSS:
    h1 { color: orange; }
    #top { color: green; } (a) green (b) blue (c) orange (d) black
22. 22.♿ Does this help everyone, or make the page harder to use: link text “click here”? (a) makes it harder (b) helps everyone
23. 23.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 150px;
      padding: 30px;
      border: 2px solid black;
      margin: 10px;
    }
24. 24.💬 Which text will NOT show on the page?
    <!-- <p>Hello, world!</p> -->
    <p>Cricket is fun.</p>
    <p>I love mangoes.</p> (a) Hello, world! (b) I love mangoes. (c) Cricket is fun.
25. 25.⚡ What does this code print? (Look at the quotes!)
    let x = "1";
    let y = 4;
    console.log(x + y); (a) Error (b) 14 (c) 5
26. 26.Which of these goes in the head? (a) <table> (b) <a> (c) <style> (d) <p>
27. 27.♿ Which link text is clearest? (a) Read the fruit facts (b) click here (c) link (d) here
28. 28.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Cricket Club</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>Try this poha.</p>
    </body>
    </html> (a) Try this poha. (b) Cricket Club (c) Welcome! (d) body
29. 29.What does color do? (a) centres a heading (b) makes letters bigger (c) picks the font style (d) sets the letter colour
30. 30.🎯 What kind of selector is h1? (a) an id selector (b) an element selector (c) a class selector
31. 31.🌈 In #600000 the red part is the hex number 60. What is it as a normal number?
32. 32.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="200"> (a) tiger.jpg (b) fort.jpg (c) kite.png (d) An old fort
33. 33.True or false: <input> is an empty tag. (a) False (b) True
34. 34.🔠 Which heading shows the SMALLEST text: <h2>, <h3>, <h4> or <h1>? (a) <h2> (b) <h1> (c) <h3> (d) <h4>
35. 35.🏷️ Is </h1> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
36. 36.True or false: <ul> lists things in any order. (a) True (b) False
37. 37.🔠 Which heading shows the BIGGEST text: <h1>, <h2>, <h5> or <h6>? (a) <h1> (b) <h5> (c) <h6> (d) <h2>
38. 38.💬 Which text will NOT show on the page?
    <!-- <p>Hello, world!</p> -->
    <p>Cricket is fun.</p>
    <p>Our school trip</p> (a) Cricket is fun. (b) Hello, world! (c) Our school trip
39. 39.True or false: <img src="cat.png"> goes in style.css. (a) False (b) True
40. 40.What does font-weight do? (a) colours behind the text (b) picks the font style (c) makes letters bigger (d) makes the text bold

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