Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 645 · 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.True or false: HTML on its own cannot make a form. (a) True (b) False
2. 2.🔠 Which heading shows the BIGGEST text: <h3>, <h1>, <h4> or <h2>? (a) <h3> (b) <h4> (c) <h2> (d) <h1>
3. 3.🔗 Which words do you click on?
   <a href="https://example.com">Art corner</a> (a) Art corner (b) href (c) https://example.com (d) School news
4. 4.🖼️ Which attribute of <img> names the picture file? (a) width (b) height (c) alt (d) src
5. 5.💬 How many paragraphs show on the page?
   <!-- <p>I love mangoes.</p> -->
   <p>Fun facts</p>
   <p>Cricket is fun.</p>
   <p>Our school trip</p>
6. 6.What is <input type="submit"> for? (a) is for one line of words (b) picks a day (c) takes only numbers (d) sends the form
7. 7.⚖️ What colour is the text of this element?
   <h1 class="menu" id="end">Hi</h1>
   CSS:
   .menu { color: purple; }
   #end { color: yellow; } (a) purple (b) yellow (c) red (d) green
8. 8.📝 At most, how many of these can be chosen at the same time?
   <form>
     <input type="radio" name="sport"> Football
     <input type="radio" name="sport"> Hockey
     <input type="radio" name="sport"> Cricket
   </form>
9. 9.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 200px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 80px wide (no margins).
10. 10.📋 What number does the browser show next to “Orange”?
    <ol start="9">
      <li>Jamun</li>
      <li>Guava</li>
      <li>Orange</li>
      <li>Banana</li>
      <li>Litchi</li>
    </ol>
11. 11.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    .red { color: blue; }
    .red { color: black; } (a) blue (b) white (c) orange (d) black
12. 12.📄 What is the first line of an HTML5 page? (a) <head> (b) <body> (c) <!DOCTYPE html> (d) <html>
13. 13.⚡ Which JavaScript word writes in the console? (a) for (b) console.log() (c) if (d) alert()
14. 14.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 25px;
      border: 4px solid black;
      margin: 20px;
    }
15. 15.🎨 Which tag holds CSS inside the head? (a) <css> (b) <body> (c) <style> (d) <script>
16. 16.🌈 In #0000d1 the blue part is the hex number d1. What is it as a normal number?
17. 17.🔗 Which words do you click on?
    <a href="news.html">Maths fun</a> (a) href (b) Maths fun (c) Art corner (d) news.html
18. 18.🧭 Which semantic tag holds copyright notes? (a) <header> (b) <main> (c) <footer> (d) <nav>
19. 19.True or false: <nav> holds the menu of links. (a) True (b) False
20. 20.🔍 Which line is missing its closing tag?
    line 1: <em>My best friend
    line 2: <strong>Rain today</strong>
    line 3: <small>Cricket is fun.</small> (a) line 1 (b) line 2 (c) line 3
21. 21.⚡ What number does this code print?
    let a = 38;
    let b = 11;
    console.log(a + b);
22. 22.Which of these is the border? (a) space inside the border (b) the gap to other boxes (c) a solid or dotted edge (d) space outside the border
23. 23.🔠 How many headings are in this code?
    <h1>Rain today</h1>
    <p>Rain today</p>
    <p>Rain today</p>
    <p>Rain today</p>
    <p>Cricket is fun.</p>
24. 24.What does justify-content: space-between do? (a) packs boxes at the start (b) puts boxes in the middle (c) packs boxes at the end (d) equal gaps, none at ends
25. 25.📄 Where does <a> go: in the head or in the body? (a) in the body (b) in the head
26. 26.🔢 To build and share your first web page, which comes first: “add CSS styles” or “write the HTML”? (a) add CSS styles (b) write the HTML
27. 27.🔗 Which tag makes a clickable link? (a) <a> (b) <link> (c) <img> (d) <p>
28. 28.📋 What number does the browser show next to “Jamun”?
    <ol>
      <li>Banana</li>
      <li>Grapes</li>
      <li>Jamun</li>
    </ol>
29. 29.📝 What does a password box show instead of letters? (a) emojis (b) capital letters (c) numbers (d) dots
30. 30.🎯 Which sign starts an id selector? (a) . (b) & (c) @ (d) #
31. 31.🌈 Which colour is #ffff00? (a) blue (b) black (c) yellow (d) red
32. 32.🛡️ Online: is it safe to share your password? (a) not safe (b) safe
33. 33.🌍 What do we call the computer that stores a website? (a) a mouse (b) a printer (c) a server (d) a keyboard
34. 34.💪 Which flexbox property sets space between boxes? (a) justify-content (b) gap (c) align-items (d) flex-direction
35. 35.🚀 Which file is best for code that reacts to clicks? (a) index.html (b) style.css (c) notes.txt (d) script.js
36. 36.📋 Which list suits a shopping list in any order? (a) <ol> (b) <ul> (c) <hr> (d) <br>
37. 37.📄 Which part holds everything you see on the page? (a) the doctype (b) the head (c) the body (d) the title
38. 38.🔠 Which heading shows the SMALLEST text: <h1>, <h6>, <h4> or <h2>? (a) <h6> (b) <h1> (c) <h2> (d) <h4>
39. 39.🖌️ What colour are the letters?
    li {
      color: black;
      text-align: right;
      font-size: 12px;
      background-color: orange;
    } (a) orange (b) purple (c) black
40. 40.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) blue (d) white

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