Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 213 · 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.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 80px;
     padding: 15px;
     border: 3px solid black;
     margin: 5px;
   }
2. 2.✍️ In color: blue; which part is the value? (a) blue (b) color (c) : (d) ;
3. 3.🔁 What does this code print?
   let score = 48;
   if (score > 26) {
     console.log("You win");
   } else {
     console.log("Play again");
   } (a) You win (b) Play again
4. 4.Which of these has a closing tag? (a) <br> (b) <p> (c) <meta> (d) <hr>
5. 5.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 6px;
     }
   } (a) Yes (b) No
6. 6.🚀 Which file should this code go in: <ul><li>Art</li></ul> (a) style.css (b) script.js (c) index.html
7. 7.🌈 Which colour is #00ffff? (a) black (b) white (c) blue (d) cyan
8. 8.🌈 In #002600 the green part is the hex number 26. What is it as a normal number?
9. 9.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
10. 10.Which of these is true of <article>? (a) sits at the very top (b) holds a side box of tips (c) holds a news story (d) helps you move around
11. 11.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the title tag (c) the br tag (d) the viewport meta tag
12. 12.🖼️ 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
13. 13.True or false: <p> is an empty tag. (a) True (b) False
14. 14.True or false: <nav> holds a news story. (a) False (b) True
15. 15.📝 Which input type lets you pick only one? (a) date (b) password (c) radio (d) text
16. 16.🔁 What does this code print?
    let marks = 8;
    if (marks >= 27) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Try again (b) Pass
17. 17.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) exactly 1000px (c) 600px or narrower (d) 600px or wider
18. 18.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as a new line (b) as one space (c) as 5 spaces (d) as a dot
19. 19.⚡ Which JavaScript word writes in the console? (a) console.log() (b) alert() (c) if (d) let
20. 20.📝 Which input type lets you tick many? (a) date (b) email (c) submit (d) checkbox
21. 21.True or false: <b> is an empty tag. (a) False (b) True
22. 22.🌈 Which colour is #000000? (a) red (b) bright green (c) white (d) black
23. 23.🖼️ Which picture file does the browser load?
    <img src="dog.jpg" alt="A happy dog" width="300"> (a) bus.jpg (b) dog.jpg (c) A happy dog (d) moon.png
24. 24.True or false: <main> holds the menu of links. (a) True (b) False
25. 25.🧭 Which semantic tag holds the logo and title? (a) <nav> (b) <main> (c) <header> (d) <aside>
26. 26.True or false: HTML changes the text size. (a) False (b) True
27. 27.📊 Which tag makes a heading cell? (a) <td> (b) <table> (c) <th> (d) <caption>
28. 28.🔁 How many times does this code print “Hello”?
    for (let i = 3; i < 12; i++) {
      console.log("Hello");
    }
29. 29.🖼️ Which tag puts a picture on a page? (a) <p> (b) <img> (c) <a> (d) <pic>
30. 30.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="dog.jpg" alt="A happy dog" width="350"> (a) The full moon (b) dog.jpg (c) A happy dog (d) width
31. 31.True or false: <input type="date"> picks a day. (a) False (b) True
32. 32.⚡ What number does this code print?
    let a = 59;
    let b = 30;
    console.log(a + b);
33. 33.⚡ A JavaScript file usually ends with which extension? (a) .jpg (b) .css (c) .js (d) .html
34. 34.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
35. 35.🔠 How many <h1> headings should a page usually have? (a) 10 (b) 3 (c) 1 (d) 6
36. 36.📋 Does this list show bullets or numbers?
    <ul>
      <li>Papaya</li>
      <li>Grapes</li>
    </ul> (a) numbers (b) bullets
37. 37.📝 What does <p> make? (a) a picture (b) a paragraph (c) a link (d) a table
38. 38.🎯 What kind of selector is p? (a) an id selector (b) an element selector (c) a class selector
39. 39.⚖️ What colour is the text of this element?
    <h2 class="big" id="intro">Hi</h2>
    CSS:
    .big { color: black; }
    .big { color: blue; } (a) yellow (b) blue (c) black (d) red
40. 40.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes

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