Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 604 · 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 hex code is blue? (a) #0000ff (b) #00ff00 (c) #000000 (d) #ffffff
2. 2.⚖️ What colour is the text of this element?
   <h1 class="box" id="hero">Hi</h1>
   CSS:
   h1 { color: green; }
   .box { color: white; } (a) green (b) purple (c) white (d) orange
3. 3.🖌️ How big is the text, in px?
   p {
     background-color: purple;
     font-size: 32px;
     text-align: left;
     color: orange;
   }
4. 4.🔗 Where does this link open?
   <a href="games.html">Take the quiz</a> (a) in the same tab (b) in a new tab
5. 5.📋 Which list tag is an ordered list? (a) <li> (b) <ol> (c) <ul>
6. 6.💬 How does an HTML comment start? (a) // (b) # (c) /* (d) <!--
7. 7.Which of these does CSS do? (a) gives the page structure (b) makes a link (c) adds space around boxes (d) checks a quiz answer
8. 8.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or narrower (c) exactly 100px (d) 800px or wider
9. 9.♿ Is this heading order correct (no level skipped)?
   <h1> → <h3> → <h4> → <h3> (a) Yes (b) No
10. 10.What does justify-content: center do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
11. 11.💬 Why do coders write comments? (a) to make links (b) to show pictures (c) to leave notes (d) to add colour
12. 12.🌈 In #00c300 the green part is the hex number c3. What is it as a normal number?
13. 13.🌈 Which colour is #00ff00? (a) bright green (b) cyan (c) yellow (d) magenta
14. 14.🖼️ Which attribute of <img> tells which image to load? (a) height (b) alt (c) src (d) width
15. 15.🌈 Which colour is rgb(0, 255, 255)? (a) cyan (b) magenta (c) bright green (d) yellow
16. 16.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 50px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }
17. 17.✍️ What value is given to font-style in this rule?
    .note {
      font-weight: bold;
      font-size: 20px;
      padding: 8px;
      font-style: italic;
    } (a) 20px (b) font-style (c) italic (d) red
18. 18.🎯 Which sign starts an id selector? (a) & (b) . (c) @ (d) #
19. 19.📝 Which tag makes a big box for many lines of text? (a) <input> (b) <p> (c) <br> (d) <textarea>
20. 20.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
21. 21.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) flex-end (c) center (d) space-between
22. 22.📝 On how many lines does the browser show this paragraph?
    <p>Rivers flow<br>Kites fly high<br>Stars shine<br>Sky is blue<br>Birds sing</p>
23. 23.🧭 Which semantic tag holds one blog post? (a) <header> (b) <footer> (c) <main> (d) <article>
24. 24.🔠 Which heading shows the BIGGEST text: <h2>, <h4>, <h6> or <h1>? (a) <h4> (b) <h6> (c) <h2> (d) <h1>
25. 25.🔗 Which code links to about.html? (a) <a href="about.html"> (b) <a alt="about.html"> (c) <link about.html> (d) <a src="about.html">
26. 26.🔍 Which is the odd one out? (a) has an address bar (b) opens web pages for us (c) turns HTML into a page (d) stores a website’s files
27. 27.🎨 Which tag holds CSS inside the head? (a) <body> (b) <script> (c) <style> (d) <css>
28. 28.🔠 Which heading shows the BIGGEST text: <h2>, <h6>, <h1> or <h4>? (a) <h2> (b) <h1> (c) <h4> (d) <h6>
29. 29.📋 Does this list show bullets or numbers?
    <ol>
      <li>Banana</li>
      <li>Grapes</li>
    </ol> (a) bullets (b) numbers
30. 30.🔗 Which attribute holds the address of a link? (a) id (b) alt (c) src (d) href
31. 31.🧩 Which language makes a form box? (a) HTML (b) JavaScript (c) CSS
32. 32.What is <input type="checkbox"> for? (a) is for one line of words (b) takes only numbers (c) lets you tick many (d) is for an email address
33. 33.🔢 On a typical page, from top to bottom, what comes right after “<header>”? (a) <footer> (b) <nav> (c) <main>
34. 34.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
35. 35.Which of these is margin? (a) the gap to other boxes (b) space inside the border (c) the gap round content (d) a solid or dotted edge
36. 36.What does color do? (a) makes the text bold (b) sets the letter colour (c) makes letters bigger (d) colours behind the text
37. 37.📋 Does this list show bullets or numbers?
    <ol>
      <li>Jamun</li>
      <li>Guava</li>
    </ol> (a) bullets (b) numbers
38. 38.Which colour pair is hard to read? (a) yellow on white (b) black on white (c) white on black (d) dark grey on white
39. 39.🖼️ Which attribute of <img> describes the picture? (a) src (b) width (c) alt (d) height
40. 40.🛡️ Online: is it safe to log out on shared PCs? (a) safe (b) not safe

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