Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 244 · 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.True or false: <footer> holds a news story. (a) True (b) False
2. 2.⚡ What does this code show?
   let name = "Zoya";
   console.log("Welcome, " + name + "!"); (a) Zoya (b) Welcome, Zoya! (c) name (d) Welcome, name!
3. 3.🖼️ Which attribute of <img> shows if the image fails? (a) alt (b) src (c) height (d) width
4. 4.🔢 When you open a web page, which comes LAST? (a) you type the URL (b) DNS finds the server (c) the browser asks it (d) the browser shows it
5. 5.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or wider (c) 600px or narrower (d) turned off
6. 6.🏷️ Which is the closing tag for <h1>? (a) <\h1> (b) <h1> (c) </h1> (d) <h1/>
7. 7.🎨 A CSS file usually ends with which extension? (a) .html (b) .css (c) .js (d) .png
8. 8.🔍 One closing tag is missing. Which one?
   <small>Cricket is fun.</small>
   <h2>Our school trip</h2>
   <b>I love mangoes. (a) </h2> (b) </p> (c) </b> (d) </small>
9. 9.🖼️ Which attribute of <img> names the picture file? (a) src (b) height (c) alt (d) width
10. 10.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    #logo { color: orange; }
    p { color: blue; } (a) purple (b) yellow (c) orange (d) blue
11. 11.🔍 Which is the odd one out? (a) gives the page structure (b) adds space around boxes (c) makes a form box (d) makes a link
12. 12.🚀 Which file should this code go in: p { color: red; } (a) index.html (b) style.css (c) script.js
13. 13.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="sport"> Cricket
      <input type="radio" name="sport"> Hockey
      <input type="radio" name="sport"> Kabaddi
      <input type="radio" name="sport"> Chess
    </form>
14. 14.🔁 What does this code print?
    let age = 21;
    if (age >= 9) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) child (b) teen
15. 15.🌍 Which one asks for a web page? (a) HTTPS (b) the URL (c) the server (d) the browser
16. 16.🏷️ Which is the closing tag for <p>? (a) <p/> (b) <\p> (c) </p> (d) <p>
17. 17.True or false: <input type="password"> lets you tick many. (a) True (b) False
18. 18.🎯 What kind of selector is li? (a) an element selector (b) an id selector (c) a class selector
19. 19.🔍 Which is the odd one out? (a) adds space around boxes (b) changes the text size (c) sets colours and fonts (d) counts down a timer
20. 20.🖌️ Which CSS property makes letters bigger? (a) font-size (b) color (c) text-align (d) background-color
21. 21.True or false: <ul> goes in the body. (a) False (b) True
22. 22.📄 Can HTML on its own make bullet lists? (a) No (b) Yes
23. 23.True or false: .box { padding: 8px; } goes in style.css. (a) False (b) True
24. 24.True or false: <style> goes in the head. (a) False (b) True
25. 25.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Creative Sheet System (c) Cascading Style Sheets (d) Computer Style Sheets
26. 26.🖌️ What colour is behind the letters?
    li {
      background-color: red;
      color: black;
      text-align: right;
      font-size: 24px;
    } (a) red (b) blue (c) black
27. 27.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
28. 28.🏷️ Which is the closing tag for <strong>? (a) <strong/> (b) <strong> (c) </strong> (d) <\strong>
29. 29.🖌️ Where does the text sit on its line?
    h2 {
      text-align: left;
      background-color: green;
      font-size: 20px;
      color: black;
    } (a) on the right (b) in the middle (c) on the left
30. 30.What does background-color do? (a) colours behind the text (b) sets the letter colour (c) makes letters bigger (d) centres a heading
31. 31.📝 How many paragraphs does this code make?
    <p>Rain today</p>
    <p>I love mangoes.</p>
    <p>Cricket is fun.</p>
    <p>Hello, world!</p>
32. 32.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) close it, tell an adult (b) type the password (c) click it twice (d) share it with friends
33. 33.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
34. 34.🎯 Which CSS selector matches this element?
    <h1 class="big" id="hero">Hello</h1> (a) .red (b) #top (c) #big (d) #hero
35. 35.Which of these is true of a code editor? (a) has an address bar (b) shows line numbers (c) opens web pages for us (d) answers page requests
36. 36.🔍 One closing tag is missing. Which one?
    <i>Fun facts</i>
    <strong>Rain today
    <em>Our school trip</em> (a) </p> (b) </em> (c) </strong> (d) </i>
37. 37.True or false: <li> goes inside ul or ol. (a) False (b) True
38. 38.🖌️ Where does the text sit on its line?
    h2 {
      color: green;
      text-align: left;
      background-color: purple;
      font-size: 40px;
    } (a) on the right (b) in the middle (c) on the left
39. 39.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 3 (c) 6 (d) 2
40. 40.📋 How many items does this list show?
    <ol>
      <li>Guava</li>
      <li>Mango</li>
      <li>Banana</li>
      <li>Orange</li>
    </ol>

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