Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 756 · 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.True or false: <header> sits at the very top. (a) True (b) False
2. 2.Which of these is an empty tag? (a) <li> (b) <p> (c) <ul> (d) <br>
3. 3.True or false: <article> holds a news story. (a) True (b) False
4. 4.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
5. 5.🌍 Which one asks for a web page? (a) the browser (b) HTTPS (c) the URL (d) the server
6. 6.⚡ Which word makes a new variable? (a) give (b) make (c) put (d) let
7. 7.✍️ How does a CSS comment start? (a) # (b) // (c) /* (d) <!--
8. 8.🎯 Which element does the selector .note style? (a) <li class="note"> (b) <li id="note"> (c) <div class="red"> (d) <li class="big">
9. 9.🔗 Where does this link open?
   <a href="contact.html" target="_blank">School news</a> (a) in a new tab (b) in the same tab
10. 10.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
11. 11.🔠 Which heading shows the SMALLEST text: <h2>, <h6>, <h3> or <h1>? (a) <h1> (b) <h2> (c) <h3> (d) <h6>
12. 12.🔡 Are HTML tag names usually written in small letters? (a) No (b) Yes
13. 13.🚀 Which file should this code go in: <p>Hello!</p> (a) style.css (b) script.js (c) index.html
14. 14.📛 In <a href="x.html">, what is href? (a) a closing tag (b) a comment (c) an attribute (d) an element name
15. 15.True or false: <img> has a closing tag. (a) True (b) False
16. 16.🔠 Which heading shows the SMALLEST text: <h5>, <h3>, <h4> or <h1>? (a) <h3> (b) <h4> (c) <h1> (d) <h5>
17. 17.True or false: “colour as the only clue” helps everyone use the page. (a) True (b) False
18. 18.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) green (c) red (d) black
19. 19.⚖️ What colour is the text of this element?
    <p class="menu" id="end">Hi</p>
    CSS:
    #end { color: blue; }
    .menu { color: white; }
    p { color: green; } (a) red (b) blue (c) green (d) white
20. 20.What is <input type="checkbox"> for? (a) lets you tick many (b) is for one line of words (c) takes only numbers (d) lets you pick only one
21. 21.🖌️ Which CSS property colours behind the text? (a) font-size (b) background-color (c) font-family (d) color
22. 22.♿ Does this help everyone, or make the page harder to use: use headings in order? (a) helps everyone (b) makes it harder
23. 23.📝 On how many lines does the browser show this paragraph?
    <p>Rivers flow<br>Sky is blue</p>
24. 24.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 90px;
      padding: 15px;
      border: 1px solid black;
      margin: 10px;
    }
25. 25.True or false: <input type="date"> picks a day. (a) True (b) False
26. 26.🏷️ HTML marks up text using ___. (a) wires (b) keys (c) tags (d) pixels
27. 27.✍️ What value is given to font-weight in this rule?
    .box {
      text-align: center;
      padding: 8px;
      font-weight: bold;
    } (a) font-weight (b) 2px solid (c) 300px (d) bold
28. 28.🖌️ What colour is behind the letters?
    h1 {
      color: white;
      background-color: black;
      font-size: 16px;
      text-align: center;
    } (a) white (b) black (c) yellow
29. 29.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 60px;
      padding: 25px;
      border: 3px solid black;
      margin: 15px;
    }
30. 30.🏷️ Which is the closing tag for <h2>? (a) </h2> (b) <h2> (c) <\h2> (d) <h2/>
31. 31.🔍 One closing tag is missing. Which one?
    <h2>Fun facts
    <p>I love mangoes.</p>
    <b>Our school trip</b> (a) </em> (b) </p> (c) </b> (d) </h2>
32. 32.True or false: <li> is an unordered list. (a) True (b) False
33. 33.📝 What does <hr> draw? (a) a link (b) a table (c) a line across the page (d) a picture
34. 34.🔁 How many numbers does this code print?
    for (let i = 0; i < 20; i = i + 4) {
      console.log(i);
    }
35. 35.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 150px;
      padding: 30px;
      border: 2px solid black;
      margin: 5px;
    }
36. 36.🚀 Which file is best for code that reacts to clicks? (a) style.css (b) notes.txt (c) script.js (d) index.html
37. 37.🌈 Which colour of light is strongest in rgb(98, 193, 99)? (a) red (b) blue (c) green
38. 38.🔢 When you open a web page, what comes right after “the server sends files”? (a) DNS finds the server (b) the browser shows it (c) the browser asks it (d) you type the URL
39. 39.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    .box { color: blue; }
    #top { color: red; } (a) orange (b) red (c) blue (d) yellow
40. 40.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is a game (b) the site is fast (c) the site is free (d) the data is scrambled

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