Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 210 · 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 heading shows the BIGGEST text: <h2>, <h6>, <h3> or <h1>? (a) <h2> (b) <h3> (c) <h6> (d) <h1>
2. 2.True or false: <title> goes in the head. (a) True (b) False
3. 3.🚀 Which file should this code go in: <p>Hello!</p> (a) index.html (b) style.css (c) script.js
4. 4.⚡ What does alert() show? (a) a picture (b) a table (c) a new tab (d) a pop-up box
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 320px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 80px wide (no margins).
6. 6.📝 At most, how many of these can be chosen at the same time?
   <form>
     <input type="checkbox" name="fruit"> Guava
     <input type="checkbox" name="fruit"> Papaya
     <input type="checkbox" name="fruit"> Litchi
     <input type="checkbox" name="fruit"> Mango
     <input type="checkbox" name="fruit"> Banana
   </form>
7. 7.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the hr tag (c) the title tag (d) the br tag
8. 8.📝 At most, how many of these can be chosen at the same time?
   <form>
     <input type="checkbox" name="fruit"> Mango
     <input type="checkbox" name="fruit"> Litchi
     <input type="checkbox" name="fruit"> Guava
     <input type="checkbox" name="fruit"> Banana
     <input type="checkbox" name="fruit"> Papaya
   </form>
9. 9.📝 How many <input> tags are in this form?
   <form>
     <input type="email">
     <input type="checkbox">
     <input type="number">
     <input type="date">
     <input type="submit" value="Send">
   </form>
10. 10.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
11. 11.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) < > (d) { }
12. 12.🎨 Which tag holds CSS inside the head? (a) <script> (b) <style> (c) <css> (d) <body>
13. 13.📝 Which input type takes only numbers? (a) email (b) submit (c) number (d) text
14. 14.🔢 On a typical page, from top to bottom, which comes first: “<nav>” or “<footer>”? (a) <footer> (b) <nav>
15. 15.📊 In a table, which tag is a row? (a) <th> (b) <td> (c) <tb> (d) <tr>
16. 16.True or false: HTML on its own cannot count button clicks. (a) True (b) False
17. 17.True or false: “colour as the only clue” makes the page harder to use. (a) True (b) False
18. 18.💬 How many paragraphs show on the page?
    <p>Fun facts</p>
    <p>My best friend</p>
    <p>The red kite</p>
    <p>My pets</p>
    <!-- <p>Rain today</p> -->
19. 19.True or false: padding is space inside the border. (a) False (b) True
20. 20.🌐 Which one colours code to help us? (a) a web server (b) a code editor (c) a web browser
21. 21.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="sport"> Kabaddi
      <input type="radio" name="sport"> Football
      <input type="radio" name="sport"> Cricket
    </form>
22. 22.What is <input type="password"> for? (a) lets you pick only one (b) is for an email address (c) picks a day (d) hides what you type
23. 23.🖼️ Which attribute of <img> names the picture file? (a) alt (b) width (c) src (d) height
24. 24.⚖️ What colour is the text of this element?
    <p class="box" id="logo">Hi</p>
    CSS:
    #logo { color: orange; }
    .box { color: yellow; } (a) yellow (b) purple (c) white (d) orange
25. 25.♿ Is this heading order correct (no level skipped)?
    <h1> → <h3> → <h4> → <h5> (a) No (b) Yes
26. 26.🚀 Which file should this code go in: h1 { font-size: 32px; } (a) script.js (b) style.css (c) index.html
27. 27.True or false: <input type="submit"> takes only numbers. (a) False (b) True
28. 28.🔁 Which word runs code only when something is true? (a) let (b) log (c) if (d) for
29. 29.📝 How many paragraphs does this code make?
    <p>I love mangoes.</p>
    <h2>My best friend</h2>
    <p>Fun facts</p>
    <p>My pets</p>
30. 30.📱 What does a media query check? (a) the time of day (b) the page title (c) the battery level (d) the screen width
31. 31.🧭 Is <span> semantic or not semantic? (a) semantic (b) not semantic
32. 32.⚡ What does this code show?
    let name = "Zoya";
    console.log("Well done, " + name + "!"); (a) Well done, Zoya! (b) Zoya (c) Well done, name! (d) name
33. 33.True or false: <h1> goes in the body. (a) True (b) False
34. 34.🏷️ Is <p> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
35. 35.📋 Which list shows the steps of a recipe best? (a) <br> (b) <ul> (c) <hr> (d) <ol>
36. 36.🔗 Which code links to about.html? (a) <a src="about.html"> (b) <a href="about.html"> (c) <link about.html> (d) <a alt="about.html">
37. 37.🌐 Which one shows line numbers? (a) a code editor (b) a web server (c) a web browser
38. 38.Which colour pair is hard to read? (a) light grey on white (b) dark grey on white (c) white on dark blue (d) yellow on black
39. 39.🔗 Which address opens when you click this link?
    <a href="art.html">Play games</a> (a) Play games (b) news.html (c) art.html (d) quiz.html
40. 40.Which of these has a closing tag? (a) <img> (b) <br> (c) <p> (d) <input>

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