Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 277 · 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.♿ Who uses a screen reader? (a) only robots (b) people who are blind (c) only coders (d) only teachers
2. 2.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 90px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 40px wide (no margins).
3. 3.🔠 Which heading shows the SMALLEST text: <h2>, <h1>, <h3> or <h4>? (a) <h2> (b) <h3> (c) <h4> (d) <h1>
4. 4.Which of these does CSS do? (a) checks a quiz answer (b) changes the page live (c) sets colours and fonts (d) puts a picture on a page
5. 5.⚡ What number does this code print?
   let a = 44;
   let b = 10;
   console.log(a - b);
6. 6.🧭 Why use <nav> instead of <div> for a menu? (a) it adds pictures (b) it makes text red (c) it loads faster (d) it tells its meaning
7. 7.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Art Gallery</title>
   </head>
   <body>
     <h1>My drawings</h1>
     <p>I like to read.</p>
   </body>
   </html> (a) My drawings (b) index.html (c) I like to read. (d) Art Gallery
8. 8.🎯 Which element does the selector #hero style? (a) <h2 class="star"> (b) <h1 id="hero"> (c) <h1 class="hero"> (d) <h1 id="top">
9. 9.🌈 Which colour of light is strongest in rgb(62, 43, 193)? (a) red (b) blue (c) green
10. 10.⚡ Where does console.log() show its output? (a) in the address bar (b) on the title bar (c) on the printer (d) in the console
11. 11.🔢 In a basic web page file, which comes LAST? (a) <!DOCTYPE html> (b) </html> (c) </head> (d) </body>
12. 12.📄 Can HTML on its own count button clicks? (a) Yes (b) No
13. 13.🚀 Which file should this code go in: .box { padding: 8px; } (a) style.css (b) index.html (c) script.js
14. 14.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 8; i++) {
      total = total + i;
    }
    console.log(total);
15. 15.🌍 What does a web address (URL) tell the browser? (a) your password (b) the page colour (c) where the page is (d) how old you are
16. 16.🔁 How many times does this code print “Well done”?
    for (let i = 0; i <= 7; i++) {
      console.log("Well done");
    }
17. 17.🔤 In “HTML”, what do the letters HT stand for? (a) High Tech (b) Home Text (c) Hot Tags (d) HyperText
18. 18.🌈 In #000050 the blue part is the hex number 50. What is it as a normal number?
19. 19.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
20. 20.True or false: HTML on its own can count button clicks. (a) False (b) True
21. 21.Which of these is an empty tag? (a) <h1> (b) <img> (c) <title> (d) <li>
22. 22.🔢 On a typical page, from top to bottom, what comes right after “<nav>”? (a) <header> (b) <footer> (c) <main>
23. 23.Which of these is safe to do online? (a) put secrets in comments (b) download from pop-ups (c) ask before downloading (d) click prize links
24. 24.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 1000 (c) 255 (d) 99
25. 25.True or false: in <img>, alt describes the picture. (a) False (b) True
26. 26.⚡ Which JavaScript word repeats code? (a) for (b) console.log() (c) alert() (d) if
27. 27.🚀 Where in index.html does the link to style.css go? (a) in the footer (b) after </html> (c) inside a <p> (d) in the head
28. 28.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 340px;
      justify-content: center;
    }
    Inside are 3 boxes, each 80px wide (no margins).
29. 29.📝 Which tag makes a big box for many lines of text? (a) <input> (b) <textarea> (c) <br> (d) <p>
30. 30.True or false: console.log(5 + 2); goes in script.js. (a) True (b) False
31. 31.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 80px;
      padding: 5px;
      border: 5px solid black;
      margin: 10px;
    }
32. 32.📱 What does a media query check? (a) the battery level (b) the time of day (c) the page title (d) the screen width
33. 33.🌈 Which colour is rgb(0, 0, 255)? (a) yellow (b) bright green (c) white (d) blue
34. 34.Which of these is an empty tag? (a) <b> (b) <title> (c) <br> (d) <li>
35. 35.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
36. 36.⚖️ What colour is the text of this element?
    <h2 class="menu" id="main">Hi</h2>
    CSS:
    #main { color: green; }
    .menu { color: orange; }
    h2 { color: red; } (a) green (b) red (c) white (d) orange
37. 37.📊 Where do <td> cells go? (a) inside a <p> (b) inside the <head> (c) inside a <li> (d) inside a <tr>
38. 38.⚡ What does this code print? (Look at the quotes!)
    let x = "4";
    let y = 9;
    console.log(x + y); (a) Error (b) 13 (c) 49
39. 39.⚡ Which JavaScript word shows a pop-up box? (a) if (b) alert() (c) for (d) let
40. 40.🖼️ Which attribute of <img> names the picture file? (a) height (b) alt (c) width (d) src

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