Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 623 · 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 does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
2. 2.🎨 Which tag holds CSS inside the head? (a) <body> (b) <css> (c) <style> (d) <script>
3. 3.📊 How many heading cells (<th>) does this table have?
   <table>
     <tr><th>Name</th><th>Fruit</th></tr>
     <tr><td>Orange</td><td>Orange</td></tr>
   </table>
4. 4.🛡️ Online: is it safe to post your home address? (a) safe (b) not safe
5. 5.🚀 Which file should this code go in: <p>Hello!</p> (a) script.js (b) index.html (c) style.css
6. 6.🛡️ Online: is it safe to use a strong password? (a) safe (b) not safe
7. 7.🌗 Is red on green easy or hard to read? (a) hard to read (b) easy to read
8. 8.🏷️ Is </li> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
9. 9.🌈 Which colour is #00ffff? (a) yellow (b) cyan (c) white (d) black
10. 10.🔗 Which words do you click on?
    <a href="contact.html">Take the quiz</a> (a) Play games (b) Take the quiz (c) contact.html (d) href
11. 11.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) center (c) flex-end (d) space-between
12. 12.🔗 Where does this link open?
    <a href="games.html" target="_blank">Play games</a> (a) in a new tab (b) in the same tab
13. 13.🎯 What kind of selector is p? (a) a class selector (b) an id selector (c) an element selector
14. 14.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) is only for laptops (d) has no pictures
15. 15.🖼️ Which picture file does the browser load?
    <img src="cake.jpg" alt="Birthday cake" width="400"> (a) Birthday cake (b) dog.jpg (c) moon.png (d) cake.jpg
16. 16.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as one space (b) as 5 spaces (c) as a dot (d) as a new line
17. 17.True or false: <li> is an unordered list. (a) False (b) True
18. 18.🧭 Which semantic tag is the page’s key part? (a) <header> (b) <article> (c) <main> (d) <nav>
19. 19.True or false: “label every form box” makes the page harder to use. (a) False (b) True
20. 20.♿ A part of the page is under a <h3> heading. Which tag should its sub-heading use? (a) <h1> (b) <h3> (c) <h5> (d) <h4>
21. 21.True or false: #top { color: blue; } goes in script.js. (a) True (b) False
22. 22.📄 Where does the text of <title> appear? (a) at the bottom (b) on the browser tab (c) in a big heading (d) nowhere
23. 23.⚡ What does this code print? (Look at the quotes!)
    let x = "6";
    let y = 4;
    console.log(x + y); (a) 64 (b) Error (c) 10
24. 24.🎯 Which CSS selector matches this element?
    <h2 class="box" id="hero">Hello</h2> (a) li (b) .box (c) #top (d) .star
25. 25.True or false: to log out on shared PCs is safe. (a) True (b) False
26. 26.⚖️ What colour is the text of this element?
    <p class="red" id="hero">Hi</p>
    CSS:
    p { color: black; }
    .red { color: blue; } (a) blue (b) black (c) red (d) purple
27. 27.📊 Which tag holds the whole table? (a) <tr> (b) <table> (c) <caption> (d) <td>
28. 28.✍️ What value is given to border in this rule?
    p {
      margin: 10px;
      font-size: 20px;
      border: 2px solid;
      text-align: center;
    } (a) border (b) 2px solid (c) 300px (d) italic
29. 29.🔗 Which code links to about.html? (a) <link about.html> (b) <a src="about.html"> (c) <a href="about.html"> (d) <a alt="about.html">
30. 30.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 50px;
      padding: 25px;
      border: 2px solid black;
      margin: 5px;
    }
31. 31.True or false: HTML on its own cannot make bullet lists. (a) False (b) True
32. 32.True or false: <tr> makes one table row. (a) False (b) True
33. 33.🧭 How many <main> parts should a page have? (a) one (b) three (c) none (d) ten
34. 34.True or false: #logo is an id selector. (a) False (b) True
35. 35.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the title tag (c) the br tag (d) the viewport meta tag
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 290px;
      padding: 10px;
      border: 2px solid black;
      margin: 0px;
    }
37. 37.Which colour pair is hard to read? (a) white on black (b) white on dark blue (c) dark grey on white (d) red on green
38. 38.🖼️ How many pixels wide is the picture drawn?
    <img src="moon.png" alt="The full moon" width="100">
39. 39.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
40. 40.♿ Does this help everyone, or make the page harder to use: images with no alt? (a) helps everyone (b) makes it harder

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