Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 176 · 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 is the selector in this CSS rule?
   #top {
     font-size: 20px;
     background-color: yellow;
     font-style: italic;
     padding: 8px;
   } (a) #top (b) font-size (c) li (d) yellow
2. 2.📊 How many rows does this table have?
   <table>
     <tr><td>Mango</td><td>Orange</td><td>Papaya</td><td>Litchi</td></tr>
     <tr><td>Banana</td><td>Banana</td><td>Mango</td><td>Jamun</td></tr>
     <tr><td>Jamun</td><td>Litchi</td><td>Guava</td><td>Banana</td></tr>
   </table>
3. 3.📄 Can HTML on its own keep a high score? (a) No (b) Yes
4. 4.What is <input type="date"> for? (a) takes only numbers (b) picks a day (c) is for one line of words (d) sends the form
5. 5.📝 On how many lines does the browser show this paragraph?
   <p>Rivers flow<br>Roses are red<br>Birds sing<br>Kites fly high</p>
6. 6.Which of these is the border? (a) the gap round content (b) the gap to other boxes (c) the line round the box (d) the text or picture
7. 7.🔗 Which code links to about.html? (a) <a alt="about.html"> (b) <link about.html> (c) <a href="about.html"> (d) <a src="about.html">
8. 8.📋 What number does the browser show next to “Mango”?
   <ol>
     <li>Orange</li>
     <li>Mango</li>
     <li>Banana</li>
     <li>Grapes</li>
   </ol>
9. 9.True or false: JavaScript changes the page live. (a) True (b) False
10. 10.🔗 Which attribute holds the address of a link? (a) src (b) id (c) href (d) alt
11. 11.🌍 What do we call the computer that stores a website? (a) a keyboard (b) a mouse (c) a printer (d) a server
12. 12.🎯 Which element does the selector #hero style? (a) <h2 id="top"> (b) <h2 class="hero"> (c) <li class="big"> (d) <h2 id="hero">
13. 13.🔍 Which is the odd one out? (a) checks a quiz answer (b) counts down a timer (c) reacts to a button click (d) puts a picture on a page
14. 14.🌐 Which one answers page requests? (a) a code editor (b) a web browser (c) a web server
15. 15.🔗 Which tag makes a clickable link? (a) <img> (b) <a> (c) <link> (d) <p>
16. 16.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
17. 17.True or false: <ul> goes in the body. (a) True (b) False
18. 18.🌗 Is white on dark blue easy or hard to read? (a) hard to read (b) easy to read
19. 19.⚖️ What colour is the text of this element?
    <h2 class="big" id="logo">Hi</h2>
    CSS:
    .big { color: white; }
    #logo { color: orange; } (a) white (b) green (c) orange (d) red
20. 20.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
21. 21.True or false: <a href="a.html">Go</a> goes in style.css. (a) True (b) False
22. 22.🌈 Which hex code is black? (a) #00ffff (b) #00ff00 (c) #0000ff (d) #000000
23. 23.True or false: “skipping heading levels” makes the page harder to use. (a) False (b) True
24. 24.♿ Does this help everyone, or make the page harder to use: label every form box? (a) makes it harder (b) helps everyone
25. 25.🧭 Which semantic tag sits at the very top? (a) <main> (b) <aside> (c) <header> (d) <footer>
26. 26.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
27. 27.🖌️ Where does the text sit on its line?
    h1 {
      text-align: center;
      color: red;
      background-color: black;
      font-size: 36px;
    } (a) on the left (b) on the right (c) in the middle
28. 28.🎯 What kind of selector is #logo? (a) an element selector (b) a class selector (c) an id selector
29. 29.🔢 In a basic web page file, which comes first: “<html>” or “<head>”? (a) <head> (b) <html>
30. 30.📋 How many items does this list show?
    <ol>
      <li>Orange</li>
      <li>Guava</li>
      <li>Jamun</li>
    </ol>
31. 31.🏷️ Is <title> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
32. 32.📋 How many items does this list show?
    <ol>
      <li>Grapes</li>
      <li>Mango</li>
    </ol>
33. 33.🌍 Which one stores the site’s files? (a) the URL (b) the browser (c) HTTPS (d) the server
34. 34.⚡ What does this code print? (Look at the quotes!)
    let x = "1";
    let y = 1;
    console.log(x + y); (a) Error (b) 2 (c) 11
35. 35.🖌️ Where does the text sit on its line?
    p {
      font-size: 40px;
      text-align: right;
      background-color: white;
      color: red;
    } (a) in the middle (b) on the left (c) on the right
36. 36.📋 Which list tag is an ordered list? (a) <ul> (b) <ol> (c) <li>
37. 37.🌈 Which colour of light is strongest in rgb(53, 165, 99)? (a) red (b) blue (c) green
38. 38.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 420px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 100px wide (no margins).
39. 39.🖼️ Which attribute of <img> names the picture file? (a) height (b) alt (c) src (d) width
40. 40.🔗 Which address opens when you click this link?
    <a href="about.html">Visit the site</a> (a) contact.html (b) https://example.com (c) Visit the site (d) about.html

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