Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 784 · 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.✍️ Which property is set to 300px in this rule?
   #top {
     width: 300px;
     color: red;
   } (a) font-style (b) 300px (c) color (d) width
2. 2.🌈 In #5f0000 the red part is the hex number 5f. What is it as a normal number?
3. 3.⚖️ What colour is the text of this element?
   <p class="star" id="hero">Hi</p>
   CSS:
   p { color: black; }
   p { color: orange; } (a) purple (b) white (c) black (d) orange
4. 4.True or false: HTML on its own cannot add pictures to a page. (a) False (b) True
5. 5.True or false: <ul> lists things in any order. (a) False (b) True
6. 6.📄 Where does <title> go: in the head or in the body? (a) in the head (b) in the body
7. 7.📊 Which tag makes one data cell? (a) <tr> (b) <caption> (c) <td> (d) <th>
8. 8.🖌️ Which CSS property sets the letter colour? (a) color (b) background-color (c) font-size (d) font-weight
9. 9.True or false: <input type="password"> hides what you type. (a) False (b) True
10. 10.🔗 Which tag makes a clickable link? (a) <link> (b) <p> (c) <a> (d) <img>
11. 11.💬 Which text will NOT show on the page?
    <p>Good morning!</p>
    <p>My best friend</p>
    <!-- <p>Our school trip</p> -->
    <p>Hello, world!</p> (a) My best friend (b) Good morning! (c) Our school trip (d) Hello, world!
12. 12.📝 On how many lines does the browser show this paragraph?
    <p>Sky is blue<br>Birds sing<br>Kites fly high</p>
13. 13.What does font-family do? (a) picks the font style (b) colours behind the text (c) sets the letter colour (d) makes letters bigger
14. 14.🔁 What does this code print?
    let temp = 15;
    if (temp >= 28) {
      console.log("Hot");
    } else {
      console.log("Cool");
    } (a) Cool (b) Hot
15. 15.🔁 When does the else part run? (a) never (b) when if is false (c) always (d) when if is true
16. 16.🌍 Which one stores the site’s files? (a) the browser (b) HTTPS (c) the URL (d) the server
17. 17.What does font-weight do? (a) colours behind the text (b) sets the letter colour (c) picks the font style (d) makes the text bold
18. 18.🏷️ Which is the closing tag for <h2>? (a) <h2/> (b) <h2> (c) <\h2> (d) </h2>
19. 19.🔠 How many headings are in this code?
    <h1>The red kite</h1>
    <h4>My pets</h4>
    <p>Good morning!</p>
    <p>My best friend</p>
    <h2>Good morning!</h2>
20. 20.✍️ What value is given to font-weight in this rule?
    .note {
      font-weight: bold;
      padding: 8px;
    } (a) font-weight (b) 300px (c) bold (d) 2px solid
21. 21.💬 Why do coders write comments? (a) to leave notes (b) to add colour (c) to show pictures (d) to make links
22. 22.🔗 Where does this link open?
    <a href="maths.html" target="_blank">Art corner</a> (a) in a new tab (b) in the same tab
23. 23.🔠 Which heading shows the BIGGEST text: <h4>, <h5>, <h2> or <h1>? (a) <h1> (b) <h2> (c) <h5> (d) <h4>
24. 24.True or false: <ol> shows 1, 2, 3 numbers. (a) False (b) True
25. 25.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    }
26. 26.🔠 How many headings are in this code?
    <h1>The red kite</h1>
    <h4>Our school trip</h4>
    <p>Rain today</p>
    <h2>Fun facts</h2>
27. 27.📋 Which list tag goes inside ul or ol? (a) <ul> (b) <li> (c) <ol>
28. 28.Which of these goes in the head? (a) <img> (b) <p> (c) <title> (d) <h1>
29. 29.What is <input type="email"> for? (a) picks a day (b) is for an email address (c) sends the form (d) lets you tick many
30. 30.True or false: #end is a class selector. (a) False (b) True
31. 31.True or false: <ul> is an unordered list. (a) False (b) True
32. 32.🖌️ Which CSS property colours behind the text? (a) color (b) font-size (c) font-weight (d) background-color
33. 33.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>All about me</h1>
      <p>We won by 5 runs.</p>
    </body>
    </html> (a) My Hobbies (b) body (c) All about me (d) We won by 5 runs.
34. 34.🌗 Is dark grey on white easy or hard to read? (a) easy to read (b) hard to read
35. 35.📦 In the box model, which part is space inside the border? (a) border (b) margin (c) content (d) padding
36. 36.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) turned off (c) 600px or wider (d) exactly 1000px
37. 37.✍️ Which sign ends each CSS declaration? (a) . (b) ; (c) : (d) ,
38. 38.🔠 Which heading shows the SMALLEST text: <h1>, <h3>, <h5> or <h2>? (a) <h5> (b) <h3> (c) <h1> (d) <h2>
39. 39.🎯 Which element does the selector p style? (a) <h1> (b) <li id="intro"> (c) <p class="star"> (d) <h2 class="star">
40. 40.🌍 Which one scrambles data on its way? (a) HTTPS (b) the URL (c) the server (d) the browser

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