Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 863 · 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.⚡ What does this code print? (Look at the quotes!)
   let x = "7";
   let y = 1;
   console.log(x + y); (a) Error (b) 8 (c) 71
2. 2.True or false: HTML on its own cannot keep a high score. (a) False (b) True
3. 3.🔍 Which line is missing its closing tag?
   line 1: <h1>The red kite</h1>
   line 2: <p>Cricket is fun.
   line 3: <strong>Good morning!</strong> (a) line 3 (b) line 1 (c) line 2
4. 4.💬 How many paragraphs show on the page?
   <p>My pets</p>
   <!-- <p>My best friend</p> -->
   <!-- <p>Our school trip</p> -->
   <!-- <p>Hello, world!</p> -->
   <!-- <p>I love mangoes.</p> -->
5. 5.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 410px;
     justify-content: flex-start;
   }
   Inside are 4 boxes, each 100px wide (no margins).
6. 6.📋 Does this list show bullets or numbers?
   <ol>
     <li>Litchi</li>
     <li>Banana</li>
     <li>Guava</li>
   </ol> (a) bullets (b) numbers
7. 7.True or false: HTTPS scrambles data on its way. (a) False (b) True
8. 8.🔢 In a basic web page file, which comes first: “<head>” or “</head>”? (a) <head> (b) </head>
9. 9.✍️ How many declarations (property: value pairs) are in this rule?
   p {
     border: 2px solid;
     text-align: center;
     margin: 10px;
     color: red;
   }
10. 10.🔁 How many times does this code print “Well done”?
    for (let i = 0; i < 9; i++) {
      console.log("Well done");
    }
11. 11.🎯 Which element does the selector h2 style? (a) <h2 class="note"> (b) <div class="note"> (c) <span id="logo"> (d) <li>
12. 12.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
13. 13.✍️ How does a CSS comment start? (a) // (b) # (c) /* (d) <!--
14. 14.🔁 What does this code print?
    let age = 22;
    if (age < 10) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) child (b) teen
15. 15.🎯 Which CSS selector matches this element?
    <span class="red" id="end">Hello</span> (a) #hero (b) #red (c) span (d) .box
16. 16.🔍 One closing tag is missing. Which one?
    <em>My best friend</em>
    <u>Hello, world!</u>
    <b>Cricket is fun. (a) </b> (b) </u> (c) </em> (d) </h3>
17. 17.🖼️ Which attribute of <img> names the picture file? (a) src (b) height (c) alt (d) width
18. 18.True or false: body is an id selector. (a) False (b) True
19. 19.🎯 How many elements on a page should have the same id? (a) 5 (b) 2 (c) 1 (d) any number
20. 20.✍️ Which property is set to 10px in this rule?
    #top {
      margin: 10px;
      font-weight: bold;
      color: red;
      padding: 8px;
    } (a) font-weight (b) 10px (c) padding (d) margin
21. 21.🔍 Which is the odd one out? (a) makes a form box (b) makes headings and lists (c) lays out the page (d) gives the page structure
22. 22.🔗 Which words do you click on?
    <a href="contact.html">Visit the site</a> (a) Maths fun (b) contact.html (c) Visit the site (d) href
23. 23.🌈 Which colour is rgb(0, 0, 0)? (a) cyan (b) black (c) white (d) yellow
24. 24.⚡ What does JavaScript add to a web page? (a) the page title (b) only colours (c) actions and changes (d) the domain name
25. 25.📋 How many items does this list show?
    <ul>
      <li>Grapes</li>
      <li>Guava</li>
      <li>Mango</li>
      <li>Banana</li>
      <li>Jamun</li>
    </ul>
26. 26.📄 What is the first line of an HTML5 page? (a) <html> (b) <head> (c) <!DOCTYPE html> (d) <body>
27. 27.⚖️ What colour is the text of this element?
    <h2 class="red" id="intro">Hi</h2>
    CSS:
    h2 { color: blue; }
    .red { color: red; }
    #intro { color: purple; } (a) red (b) blue (c) purple (d) white
28. 28.📋 Which list tag is an unordered list? (a) <ol> (b) <ul> (c) <li>
29. 29.🖌️ Which CSS property picks the font style? (a) color (b) font-family (c) background-color (d) font-weight
30. 30.📄 Can HTML on its own pick a random number? (a) No (b) Yes
31. 31.True or false: <header> holds extra side notes. (a) True (b) False
32. 32.🖼️ Which tag puts a picture on a page? (a) <a> (b) <p> (c) <pic> (d) <img>
33. 33.🔢 To build and share your first web page, which comes FIRST? (a) publish it online (b) test in a browser (c) plan what to show (d) write the HTML
34. 34.🚀 Which file is best for code that reacts to clicks? (a) style.css (b) notes.txt (c) script.js (d) index.html
35. 35.💬 Which text will NOT show on the page?
    <p>My pets</p>
    <!-- <p>Fun facts</p> -->
    <p>The red kite</p> (a) Fun facts (b) My pets (c) The red kite
36. 36.🖌️ What colour are the letters?
    p {
      color: purple;
      font-size: 16px;
      background-color: green;
      text-align: right;
    } (a) white (b) green (c) purple
37. 37.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 90px;
      padding: 20px;
      border: 2px solid black;
      margin: 0px;
    }
38. 38.📋 Which list tag is one item of a list? (a) <li> (b) <ol> (c) <ul>
39. 39.📝 How many paragraphs does this code make?
    <p>I love mangoes.</p>
    <h2>I love mangoes.</h2>
    <p>Rain today</p>
    <h2>I love mangoes.</h2>
    <p>Hello, world!</p>
    <p>Good morning!</p>
40. 40.🔁 How many times does this code print “Hello”?
    for (let i = 3; i <= 6; i++) {
      console.log("Hello");
    }

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