Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 779 · 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 value is given to margin in this rule?
   .note {
     text-align: center;
     margin: 10px;
   } (a) 8px (b) bold (c) margin (d) 10px
2. 2.True or false: in <img>, alt names the picture file. (a) False (b) True
3. 3.Which of these is safe to do online? (a) download from pop-ups (b) meet an online stranger (c) log out on shared PCs (d) share your OTP
4. 4.🔗 Which words do you click on?
   <a href="news.html">Art corner</a> (a) School news (b) news.html (c) Art corner (d) href
5. 5.🔗 Which code links to about.html? (a) <link about.html> (b) <a alt="about.html"> (c) <a href="about.html"> (d) <a src="about.html">
6. 6.⚡ What does this code print? (Look at the quotes!)
   let x = "5";
   let y = 3;
   console.log(x + y); (a) Error (b) 53 (c) 8
7. 7.🖼️ Which tag puts a picture on a page? (a) <p> (b) <img> (c) <pic> (d) <a>
8. 8.✍️ Which property is set to bold in this rule?
   li {
     font-weight: bold;
     width: 300px;
   } (a) font-weight (b) border (c) bold (d) width
9. 9.🔍 One closing tag is missing. Which one?
   <i>My pets</i>
   <h3>Rain today
   <h2>I love mangoes.</h2> (a) </h2> (b) </strong> (c) </h3> (d) </i>
10. 10.What does font-size do? (a) sets the letter colour (b) centres a heading (c) makes letters bigger (d) makes the text bold
11. 11.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) justify-content (c) align-items (d) display: flex
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-size: 20px;
    }
13. 13.💬 How many paragraphs show on the page?
    <p>My pets</p>
    <p>I love mangoes.</p>
    <!-- <p>Our school trip</p> -->
    <p>The red kite</p>
    <p>My best friend</p>
14. 14.🖼️ Does <img> need a closing tag? (a) No (b) Yes
15. 15.⚡ Which word makes a new variable? (a) put (b) make (c) let (d) give
16. 16.🎯 Which sign starts a class selector? (a) @ (b) & (c) # (d) .
17. 17.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="fort.jpg" alt="An old fort" width="50"> (a) width (b) A tiger asleep (c) An old fort (d) fort.jpg
18. 18.⚡ What does this code print? (Look at the quotes!)
    let x = "1";
    let y = 5;
    console.log(x + y); (a) 6 (b) 15 (c) Error
19. 19.🖌️ Which CSS property colours behind the text? (a) font-family (b) background-color (c) text-align (d) color
20. 20.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 80px;
      padding: 15px;
      border: 4px solid black;
      margin: 10px;
    }
21. 21.🌍 What is the path in this URL?
    https://learn.example.com/about.html (a) https (b) learn.example.com (c) /maths/tables.html (d) /about.html
22. 22.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 6; i++) {
      total = total + i;
    }
    console.log(total);
23. 23.🔗 Which words do you click on?
    <a href="news.html">Maths fun</a> (a) Maths fun (b) href (c) Art corner (d) news.html
24. 24.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    }
25. 25.🔠 Which heading shows the BIGGEST text: <h2>, <h5>, <h6> or <h1>? (a) <h2> (b) <h1> (c) <h5> (d) <h6>
26. 26.🏷️ Which is the closing tag for <h1>? (a) <h1/> (b) <h1> (c) </h1> (d) <\h1>
27. 27.True or false: in <img>, alt is read by screen readers. (a) False (b) True
28. 28.⚡ Which JavaScript word shows a pop-up box? (a) let (b) for (c) alert() (d) console.log()
29. 29.True or false: in <img>, width tells which image to load. (a) False (b) True
30. 30.💬 Which text will NOT show on the page?
    <!-- <p>My best friend</p> -->
    <p>My pets</p>
    <p>Rain today</p>
    <p>Cricket is fun.</p> (a) My pets (b) My best friend (c) Rain today (d) Cricket is fun.
31. 31.True or false: <table> makes a heading cell. (a) True (b) False
32. 32.🚀 Which file should this code go in: <a href="a.html">Go</a> (a) style.css (b) script.js (c) index.html
33. 33.What does background-color do? (a) picks the font style (b) colours behind the text (c) makes letters bigger (d) makes the text bold
34. 34.📋 Which list tag is one item of a list? (a) <ul> (b) <li> (c) <ol>
35. 35.🖌️ How big is the text, in px?
    p {
      background-color: orange;
      font-size: 20px;
      color: yellow;
      text-align: left;
    }
36. 36.📝 Which input type is for one line of words? (a) password (b) text (c) number (d) submit
37. 37.🏷️ Is <p> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
38. 38.🔁 How many times does this code print “Welcome”?
    for (let i = 0; i < 2; i++) {
      console.log("Welcome");
    }
39. 39.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>My pets</p> -->
    <p>Cricket is fun.</p>
40. 40.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    .big { color: orange; }
    #top { color: red; } (a) red (b) orange (c) green (d) yellow

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