Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 524 · 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 CSS selector matches this element?
   <span class="note" id="main">Hello</span> (a) .main (b) #note (c) .big (d) .note
2. 2.🌍 What is the path in this URL?
   http://kids.example.org/maths/tables.html (a) /maths/tables.html (b) kids.example.org (c) /index.html (d) http
3. 3.✍️ How many declarations (property: value pairs) are in this rule?
   p {
     font-weight: bold;
     padding: 8px;
   }
4. 4.🎯 Which CSS selector matches this element?
   <h2 class="menu" id="logo">Hello</h2> (a) .menu (b) .note (c) #menu (d) #end
5. 5.🚀 Which file should this code go in: .box { padding: 8px; } (a) style.css (b) index.html (c) script.js
6. 6.⚖️ What colour is the text of this element?
   <p class="note" id="logo">Hi</p>
   CSS:
   .note { color: black; }
   p { color: red; }
   #logo { color: yellow; } (a) black (b) white (c) red (d) yellow
7. 7.📄 Where does <img> go: in the head or in the body? (a) in the body (b) in the head
8. 8.🎯 Which element does the selector .red style? (a) <h1 class="box"> (b) <h1 id="red"> (c) <h1 class="red"> (d) <h2 class="star">
9. 9.🔍 One closing tag is missing. Which one?
   <h2>Good morning!
   <b>The red kite</b>
   <em>My pets</em> (a) </b> (b) </h2> (c) </em> (d) </strong>
10. 10.🔠 How many headings are in this code?
    <h1>Fun facts</h1>
    <h4>Cricket is fun.</h4>
    <p>My best friend</p>
11. 11.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    .big { color: yellow; }
    p { color: white; } (a) white (b) yellow (c) black (d) purple
12. 12.⚖️ What colour is the text of this element?
    <p class="note" id="main">Hi</p>
    CSS:
    p { color: purple; }
    .note { color: orange; } (a) red (b) orange (c) black (d) purple
13. 13.🚀 Which file should this code go in: alert(score); (a) script.js (b) style.css (c) index.html
14. 14.🔠 How many headings are in this code?
    <h1>Rain today</h1>
    <p>I love mangoes.</p>
    <p>The red kite</p>
15. 15.📦 In the box model, which part is space outside the border? (a) margin (b) content (c) border (d) padding
16. 16.🧩 Which language makes a link? (a) HTML (b) CSS (c) JavaScript
17. 17.True or false: <nav> holds the menu of links. (a) True (b) False
18. 18.🚀 What is the home page file of a website usually called? (a) index.html (b) home.css (c) start.js (d) main.png
19. 19.📋 Does this list show bullets or numbers?
    <ol>
      <li>Orange</li>
      <li>Jamun</li>
      <li>Guava</li>
    </ol> (a) bullets (b) numbers
20. 20.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 25px;
      border: 5px solid black;
      margin: 5px;
    }
21. 21.🔁 How many times does this code print “Welcome”?
    for (let i = 2; i < 7; i++) {
      console.log("Welcome");
    }
22. 22.🔍 One closing tag is missing. Which one?
    <em>Fun facts
    <b>Our school trip</b>
    <i>I love mangoes.</i> (a) </em> (b) </i> (c) </b> (d) </h3>
23. 23.True or false: <input type="date"> hides what you type. (a) True (b) False
24. 24.Which of these is true of a web browser? (a) colours code to help us (b) sends pages over the net (c) opens web pages for us (d) is where we type code
25. 25.Which of these is true of <main>? (a) helps you move around (b) holds the logo and title (c) is the page’s key part (d) sits at the bottom
26. 26.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 280px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
27. 27.📋 Which list tag lists things in any order? (a) <li> (b) <ol> (c) <ul>
28. 28.🎯 Which CSS selector matches this element?
    <li class="box" id="logo">Hello</li> (a) #box (b) .box (c) .logo (d) div
29. 29.🔢 To build and share your first web page, which comes first: “add CSS styles” or “test in a browser”? (a) add CSS styles (b) test in a browser
30. 30.🖼️ Which attribute of <img> names the picture file? (a) height (b) width (c) alt (d) src
31. 31.📊 Where do <td> cells go? (a) inside the <head> (b) inside a <li> (c) inside a <tr> (d) inside a <p>
32. 32.🔠 How many headings are in this code?
    <h1>I love mangoes.</h1>
    <p>Good morning!</p>
    <h2>I love mangoes.</h2>
    <h4>My best friend</h4>
33. 33.🛡️ Online: is it safe to log out on shared PCs? (a) not safe (b) safe
34. 34.🔁 What does i++ do? (a) adds 1 to i (b) doubles i (c) takes 1 from i (d) prints i
35. 35.💪 Which flexbox property spaces boxes along a row? (a) gap (b) flex-direction (c) justify-content (d) display: flex
36. 36.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) center (c) flex-end (d) space-between
37. 37.Which of these is padding? (a) the text or picture (b) the gap round content (c) a solid or dotted edge (d) the line round the box
38. 38.✍️ What is the selector in this CSS rule?
    li {
      text-align: center;
      margin: 10px;
    } (a) li (b) 10px (c) text-align (d) body
39. 39.🖌️ What colour is behind the letters?
    h2 {
      font-size: 28px;
      text-align: left;
      background-color: red;
      color: yellow;
    } (a) yellow (b) red (c) blue
40. 40.🔁 Which word runs code only when something is true? (a) if (b) log (c) for (d) let

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