Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 102 · 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 show?
   let name = "Zoya";
   console.log("Hi, " + name + "!"); (a) Zoya (b) Hi, Zoya! (c) name (d) Hi, name!
2. 2.📋 How many items does this list show?
   <ul>
     <li>Banana</li>
     <li>Papaya</li>
     <li>Guava</li>
     <li>Mango</li>
     <li>Grapes</li>
     <li>Jamun</li>
   </ul>
3. 3.💬 How many paragraphs show on the page?
   <p>Our school trip</p>
   <!-- <p>Rain today</p> -->
   <!-- <p>My pets</p> -->
4. 4.⚖️ What colour is the text of this element?
   <p class="box" id="logo">Hi</p>
   CSS:
   .box { color: green; }
   .box { color: red; } (a) black (b) purple (c) red (d) green
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 200px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 40px wide (no margins).
6. 6.💪 Which flexbox property turns on flexbox? (a) display: flex (b) flex-direction (c) align-items (d) justify-content
7. 7.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-end (c) space-between (d) flex-start
8. 8.🏷️ What does a closing tag have that an opening tag does not? (a) a slash / (b) a hash # (c) a dollar $ (d) a dot .
9. 9.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 130px;
     padding: 10px;
     border: 4px solid black;
     margin: 20px;
   }
10. 10.⚡ A JavaScript file usually ends with which extension? (a) .js (b) .html (c) .jpg (d) .css
11. 11.True or false: in <img>, src tells which image to load. (a) True (b) False
12. 12.📝 How many <input> tags are in this form?
    <form>
      <input type="checkbox">
      <input type="date">
      <input type="email">
      <input type="submit" value="Send">
    </form>
13. 13.True or false: body { margin: 0; } goes in index.html. (a) False (b) True
14. 14.True or false: JavaScript puts a picture on a page. (a) True (b) False
15. 15.🔢 To build and share your first web page, which comes FIRST? (a) add CSS styles (b) publish it online (c) test in a browser (d) plan what to show
16. 16.True or false: <caption> makes one table row. (a) True (b) False
17. 17.True or false: .big is an id selector. (a) True (b) False
18. 18.🖌️ How big is the text, in px?
    li {
      color: purple;
      text-align: left;
      background-color: yellow;
      font-size: 24px;
    }
19. 19.🔗 Which tag makes a clickable link? (a) <link> (b) <img> (c) <p> (d) <a>
20. 20.🔍 One closing tag is missing. Which one?
    <h3>Hello, world!
    <strong>Our school trip</strong>
    <h2>Rain today</h2> (a) </h2> (b) </strong> (c) </h3> (d) </b>
21. 21.🔒 Is the connection to this address scrambled (encrypted)?
    http://kids.example.org/art/gallery.html (a) Yes (b) No
22. 22.🔒 Is the connection to this address scrambled (encrypted)?
    http://www.example.net/art/gallery.html (a) Yes (b) No
23. 23.True or false: <footer> holds copyright notes. (a) True (b) False
24. 24.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
25. 25.🌐 Which one stores a website’s files? (a) a code editor (b) a web browser (c) a web server
26. 26.💬 How many paragraphs show on the page?
    <!-- <p>My pets</p> -->
    <p>Rain today</p>
    <!-- <p>Our school trip</p> -->
    <!-- <p>The red kite</p> -->
27. 27.🔗 Which attribute holds the address of a link? (a) alt (b) href (c) id (d) src
28. 28.⚡ What number does this code print?
    let a = 46;
    let b = 6;
    console.log(a + b);
29. 29.♿ Which link text is clearest? (a) here (b) link (c) click here (d) Read the fruit facts
30. 30.True or false: the browser asks for a web page. (a) True (b) False
31. 31.True or false: HTML makes headings and lists. (a) True (b) False
32. 32.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 15px;
      border: 1px solid black;
      margin: 5px;
    }
33. 33.📋 Which list tag shows bullet points? (a) <li> (b) <ol> (c) <ul>
34. 34.🔠 Which tag is used for the main title on a page? (a) <h6> (b) <h1> (c) <p> (d) <br>
35. 35.True or false: CSS sets colours and fonts. (a) True (b) False
36. 36.🔗 Which address opens when you click this link?
    <a href="about.html">Art corner</a> (a) contact.html (b) about.html (c) Art corner (d) https://example.com
37. 37.💬 How does an HTML comment end? (a) // (b) */ (c) --> (d) >>
38. 38.♿ A part of the page is under a <h1> heading. Which tag should its sub-heading use? (a) <h6> (b) <h1> (c) <h2> (d) <h3>
39. 39.🌈 Hex digits go 0 to 9, then A to which letter? (a) F (b) G (c) Z (d) J
40. 40.🔍 Which is the odd one out? (a) makes a form box (b) counts down a timer (c) makes headings and lists (d) puts a picture on a page

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