Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 920 · 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.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) never changes (d) fits every screen
2. 2.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 8; i++) {
     total = total + 3;
   }
   console.log(total);
3. 3.✍️ How many declarations (property: value pairs) are in this rule?
   p {
     text-align: center;
     font-size: 20px;
   }
4. 4.🖼️ Why do we add alt text to an image? (a) to make it bigger (b) to colour it (c) to load it faster (d) to describe the image
5. 5.What does font-family do? (a) centres a heading (b) makes letters bigger (c) colours behind the text (d) picks the font style
6. 6.🔠 How many headings are in this code?
   <h1>My pets</h1>
   <h2>Good morning!</h2>
   <p>Hello, world!</p>
   <p>Hello, world!</p>
7. 7.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 130px;
     padding: 30px;
     border: 1px solid black;
     margin: 0px;
   }
8. 8.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 7; i++) {
     total = total + 3;
   }
   console.log(total);
9. 9.⚡ What number does this code print?
   let apples = 22;
   apples = apples + 8;
   apples = apples - 9;
   console.log(apples);
10. 10.💪 Which flexbox property picks row or column? (a) gap (b) display: flex (c) flex-direction (d) justify-content
11. 11.🔗 Which words do you click on?
    <a href="quiz.html">Play games</a> (a) Play games (b) About us (c) quiz.html (d) href
12. 12.🔗 Which words do you click on?
    <a href="news.html">School news</a> (a) href (b) news.html (c) School news (d) Take the quiz
13. 13.⚡ What does alert() show? (a) a table (b) a pop-up box (c) a new tab (d) a picture
14. 14.💬 How many paragraphs show on the page?
    <p>Good morning!</p>
    <!-- <p>Hello, world!</p> -->
    <p>My best friend</p>
    <p>Fun facts</p>
15. 15.🔗 Which address opens when you click this link?
    <a href="contact.html">About us</a> (a) About us (b) https://example.com (c) contact.html (d) maths.html
16. 16.🔗 Where does this link open?
    <a href="https://example.com" target="_blank">About us</a> (a) in the same tab (b) in a new tab
17. 17.True or false: “skipping heading levels” makes the page harder to use. (a) False (b) True
18. 18.🎯 What kind of selector is .star? (a) a class selector (b) an id selector (c) an element selector
19. 19.🎯 What kind of selector is #top? (a) a class selector (b) an element selector (c) an id selector
20. 20.📋 Which list tag is an unordered list? (a) <li> (b) <ol> (c) <ul>
21. 21.🌈 Which colour of light is strongest in rgb(221, 54, 132)? (a) blue (b) red (c) green
22. 22.📝 Does <b> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
23. 23.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
24. 24.Which of these is true of <article>? (a) is the page’s key part (b) sits at the very top (c) holds the menu of links (d) holds one blog post
25. 25.True or false: margin is the gap to other boxes. (a) True (b) False
26. 26.💪 Which justify-content value packs boxes at the end? (a) center (b) space-between (c) flex-start (d) flex-end
27. 27.🖌️ Which CSS property colours behind the text? (a) text-align (b) font-size (c) background-color (d) color
28. 28.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 4 (c) 2 (d) 3
29. 29.🖌️ How big is the text, in px?
    p {
      font-size: 20px;
      text-align: center;
      color: blue;
      background-color: white;
    }
30. 30.✍️ What is the selector in this CSS rule?
    #top {
      color: red;
      font-style: italic;
    } (a) #top (b) italic (c) color (d) li
31. 31.🌈 In #530000 the red part is the hex number 53. What is it as a normal number?
32. 32.⚖️ What colour is the text of this element?
    <h1 class="big" id="main">Hi</h1>
    CSS:
    .big { color: yellow; }
    .big { color: black; } (a) orange (b) yellow (c) green (d) black
33. 33.🔢 In a basic web page file, which comes first: “</head>” or “</body>”? (a) </head> (b) </body>
34. 34.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) makes it harder (b) helps everyone
35. 35.Which of these is an empty tag? (a) <p> (b) <b> (c) <h1> (d) <meta>
36. 36.🔗 Which address opens when you click this link?
    <a href="about.html">Play games</a> (a) Play games (b) https://example.com (c) contact.html (d) about.html
37. 37.💬 Which text will NOT show on the page?
    <p>Hello, world!</p>
    <p>I love mangoes.</p>
    <p>Fun facts</p>
    <!-- <p>My pets</p> --> (a) I love mangoes. (b) Fun facts (c) Hello, world! (d) My pets
38. 38.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the hr tag (c) the title tag (d) the viewport meta tag
39. 39.True or false: <footer> holds copyright notes. (a) True (b) False
40. 40.True or false: the browser asks for a web page. (a) True (b) False

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