Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 571 · 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 part holds everything you see on the page? (a) the body (b) the title (c) the head (d) the doctype
2. 2.Which of these is true of a code editor? (a) shows pages from the web (b) turns HTML into a page (c) opens web pages for us (d) shows line numbers
3. 3.🔢 To build and share your first web page, which comes first: “plan what to show” or “add CSS styles”? (a) add CSS styles (b) plan what to show
4. 4.Which of these is margin? (a) the gap round content (b) the gap to other boxes (c) the text or picture (d) the line round the box
5. 5.🔁 What does this code print?
   let temp = 44;
   if (temp >= 7) {
     console.log("Hot");
   } else {
     console.log("Cool");
   } (a) Cool (b) Hot
6. 6.🎯 Which CSS selector matches this element?
   <span class="note" id="logo">Hello</span> (a) .logo (b) #end (c) .big (d) span
7. 7.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 290px;
     padding: 10px;
     border: 1px solid black;
     margin: 15px;
   }
8. 8.What is <input type="checkbox"> for? (a) hides what you type (b) is for an email address (c) lets you pick only one (d) lets you tick many
9. 9.True or false: in <img>, width describes the picture. (a) True (b) False
10. 10.🖼️ Does <img> need a closing tag? (a) No (b) Yes
11. 11.Which of these goes in the body? (a) <link rel="stylesheet"> (b) <style> (c) <p> (d) <title>
12. 12.🖌️ What colour is behind the letters?
    h2 {
      font-size: 16px;
      color: blue;
      text-align: left;
      background-color: red;
    } (a) red (b) yellow (c) blue
13. 13.Which of these is true of a code editor? (a) is where we type code (b) has an address bar (c) shows pages from the web (d) sends pages over the net
14. 14.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="bus.jpg" alt="Our school bus" width="150"> (a) width (b) Our school bus (c) An old fort (d) bus.jpg
15. 15.🔁 Which loop repeats code a set number of times? (a) for (b) if (c) else (d) let
16. 16.🔁 Which word runs code only when something is true? (a) for (b) if (c) log (d) let
17. 17.Which of these is a weak password? (a) 123456 (b) Rain#Drop_42! (c) Chai$Cup_19x (d) S0lar!Pen#8
18. 18.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes
19. 19.⚡ What does this code show?
    let name = "Kabir";
    alert("Welcome, " + name + "!"); (a) Welcome, Kabir! (b) Welcome, name! (c) Kabir (d) name
20. 20.🔗 Which tag makes a clickable link? (a) <img> (b) <p> (c) <a> (d) <link>
21. 21.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>Easy snacks</h1>
      <p>Thanks for visiting.</p>
    </body>
    </html> (a) Thanks for visiting. (b) My Hobbies (c) Easy snacks (d) index.html
22. 22.♿ Which link text is clearest? (a) here (b) Read the fruit facts (c) click here (d) link
23. 23.💪 Which flexbox property picks row or column? (a) align-items (b) display: flex (c) flex-direction (d) justify-content
24. 24.🧭 Why use <nav> instead of <div> for a menu? (a) it loads faster (b) it makes text red (c) it adds pictures (d) it tells its meaning
25. 25.🔡 Are HTML tag names usually written in small letters? (a) No (b) Yes
26. 26.🧭 Which semantic tag is the page’s key part? (a) <header> (b) <main> (c) <aside> (d) <article>
27. 27.🔢 To build and share your first web page, what comes right after “write the HTML”? (a) publish it online (b) plan what to show (c) test in a browser (d) add CSS styles
28. 28.🖼️ Which attribute of <img> describes the picture? (a) width (b) height (c) src (d) alt
29. 29.✍️ Which property is set to 2px solid in this rule?
    #top {
      text-align: center;
      border: 2px solid;
    } (a) width (b) border (c) font-style (d) 2px solid
30. 30.🚀 Which file should this code go in: #top { color: blue; } (a) script.js (b) style.css (c) index.html
31. 31.True or false: “link text “click here”” helps everyone use the page. (a) True (b) False
32. 32.♿ What does good colour contrast mean? (a) text stands out clearly (b) no colours at all (c) many bright colours (d) only red text
33. 33.✍️ In color: blue; which part is the value? (a) ; (b) blue (c) : (d) color
34. 34.🏷️ Is <li> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
35. 35.🎨 Which tag holds CSS inside the head? (a) <style> (b) <body> (c) <script> (d) <css>
36. 36.⚖️ What colour is the text of this element?
    <h2 class="note" id="main">Hi</h2>
    CSS:
    h2 { color: red; }
    .note { color: yellow; }
    #main { color: green; } (a) orange (b) green (c) yellow (d) red
37. 37.🔒 Is the connection to this address scrambled (encrypted)?
    https://kids.example.org/maths/tables.html (a) No (b) Yes
38. 38.🎯 What kind of selector is #end? (a) an id selector (b) an element selector (c) a class selector
39. 39.🔁 When does the else part run? (a) never (b) when if is true (c) when if is false (d) always
40. 40.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-end (c) center (d) flex-start

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