Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 947 · 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.🎯 What kind of selector is p? (a) a class selector (b) an element selector (c) an id selector
2. 2.Which of these has a closing tag? (a) <meta> (b) <input> (c) <title> (d) <img>
3. 3.💬 Why do coders write comments? (a) to make links (b) to add colour (c) to leave notes (d) to show pictures
4. 4.🔍 One closing tag is missing. Which one?
   <h3>My pets
   <i>Hello, world!</i>
   <em>Cricket is fun.</em> (a) </i> (b) </h3> (c) </b> (d) </em>
5. 5.📋 Which list suits a shopping list in any order? (a) <ol> (b) <ul> (c) <br> (d) <hr>
6. 6.⚖️ What colour is the text of this element?
   <h1 class="red" id="end">Hi</h1>
   CSS:
   .red { color: yellow; }
   h1 { color: purple; } (a) blue (b) orange (c) purple (d) yellow
7. 7.🖌️ What colour are the letters?
   h2 {
     text-align: right;
     font-size: 28px;
     color: blue;
     background-color: purple;
   } (a) blue (b) purple (c) white
8. 8.♿ What does good colour contrast mean? (a) many bright colours (b) text stands out clearly (c) no colours at all (d) only red text
9. 9.🔠 Which heading shows the SMALLEST text: <h3>, <h5>, <h1> or <h6>? (a) <h3> (b) <h6> (c) <h5> (d) <h1>
10. 10.⚖️ What colour is the text of this element?
    <p class="big" id="intro">Hi</p>
    CSS:
    .big { color: yellow; }
    p { color: purple; } (a) blue (b) yellow (c) white (d) purple
11. 11.🚀 Which file should this code go in: console.log(5 + 2); (a) style.css (b) script.js (c) index.html
12. 12.Which of these is an opening tag? (a) </p> (b) </body> (c) <p> (d) </title>
13. 13.📝 Does <li> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
14. 14.⚡ Which JavaScript word shows a pop-up box? (a) if (b) alert() (c) let (d) for
15. 15.🖌️ What colour is behind the letters?
    h2 {
      text-align: center;
      color: green;
      background-color: yellow;
      font-size: 40px;
    } (a) yellow (b) red (c) green
16. 16.🧭 Who is helped most by semantic tags? (a) only the server (b) only the printer (c) screen-reader users (d) nobody
17. 17.🌈 In #009000 the green part is the hex number 90. What is it as a normal number?
18. 18.🔢 In a basic web page file, which comes LAST? (a) <head> (b) <!DOCTYPE html> (c) </html> (d) <body>
19. 19.📊 In a table, which tag is a row? (a) <tr> (b) <th> (c) <tb> (d) <td>
20. 20.🖼️ How many pixels wide is the picture drawn?
    <img src="dog.jpg" alt="A happy dog" width="300">
21. 21.Which of these is a weak password? (a) Rain#Drop_42! (b) Chai$Cup_19x (c) Kite_Fl1es@Dawn (d) riya2014
22. 22.True or false: #logo is an id selector. (a) False (b) True
23. 23.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 140px;
      padding: 5px;
      border: 1px solid black;
      margin: 0px;
    }
24. 24.Which colour pair is easy to read? (a) blue on purple (b) yellow on white (c) pink on red (d) yellow on black
25. 25.🧩 Which language sets colours and fonts? (a) CSS (b) HTML (c) JavaScript
26. 26.🔁 What does this code print?
    let age = 4;
    if (age < 25) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
27. 27.📊 Are <th> cells shown bold and centred by default? (a) Yes (b) No
28. 28.Which of these does CSS do? (a) puts a picture on a page (b) reacts to a button click (c) sets colours and fonts (d) changes the page live
29. 29.Which of these is true of a web browser? (a) saves our .html files (b) is where we type code (c) shows pages from the web (d) sends pages over the net
30. 30.🌍 Which one sends the page back? (a) HTTPS (b) the URL (c) the server (d) the browser
31. 31.True or false: HTML on its own can add up two numbers. (a) False (b) True
32. 32.💬 How many paragraphs show on the page?
    <!-- <p>Rain today</p> -->
    <!-- <p>Hello, world!</p> -->
    <!-- <p>My best friend</p> -->
    <p>My pets</p>
33. 33.⚡ Where does console.log() show its output? (a) in the address bar (b) on the printer (c) in the console (d) on the title bar
34. 34.📱 What does a media query check? (a) the page title (b) the battery level (c) the time of day (d) the screen width
35. 35.True or false: a code editor saves our .html files. (a) True (b) False
36. 36.Which of these is margin? (a) the gap to other boxes (b) the line round the box (c) a solid or dotted edge (d) space inside the border
37. 37.🌗 Is black on white easy or hard to read? (a) hard to read (b) easy to read
38. 38.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    }
39. 39.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h2> → <h2> (a) Yes (b) No
40. 40.🔢 To build and share your first web page, which comes FIRST? (a) plan what to show (b) test in a browser (c) add CSS styles (d) publish it online

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