Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 554 · 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.🔍 Which is the odd one out? (a) has an address bar (b) shows line numbers (c) shows pages from the web (d) opens web pages for us
2. 2.What does justify-content: flex-end do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
3. 3.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 22px;
     }
   }
4. 4.🔠 How many headings are in this code?
   <h1>I love mangoes.</h1>
   <h3>The red kite</h3>
   <p>Hello, world!</p>
   <p>My best friend</p>
   <p>My pets</p>
5. 5.🔠 Are headings shown in bold by default? (a) Yes (b) No
6. 6.Which of these is true of a code editor? (a) answers page requests (b) colours code to help us (c) turns HTML into a page (d) stores a website’s files
7. 7.💬 How many paragraphs show on the page?
   <!-- <p>Hello, world!</p> -->
   <p>Our school trip</p>
   <!-- <p>My pets</p> -->
8. 8.⚖️ What colour is the text of this element?
   <h2 class="box" id="hero">Hi</h2>
   CSS:
   .box { color: red; }
   .box { color: blue; } (a) red (b) yellow (c) orange (d) blue
9. 9.🔠 How many <h1> headings should a page usually have? (a) 6 (b) 1 (c) 10 (d) 3
10. 10.🧩 Which language counts down a timer? (a) CSS (b) JavaScript (c) HTML
11. 11.📋 How many items does this list show?
    <ol>
      <li>Mango</li>
      <li>Papaya</li>
      <li>Jamun</li>
      <li>Litchi</li>
      <li>Grapes</li>
    </ol>
12. 12.🖌️ Which CSS property centres a heading? (a) text-align (b) font-weight (c) font-family (d) color
13. 13.🌗 Is red on green easy or hard to read? (a) easy to read (b) hard to read
14. 14.🖌️ What colour is behind the letters?
    p {
      background-color: green;
      text-align: right;
      font-size: 32px;
      color: white;
    } (a) green (b) white (c) orange
15. 15.🔗 Which address opens when you click this link?
    <a href="maths.html">Play games</a> (a) news.html (b) Play games (c) art.html (d) maths.html
16. 16.🏷️ Which is the closing tag for <h2>? (a) </h2> (b) <\h2> (c) <h2/> (d) <h2>
17. 17.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) flex-end (c) space-between (d) center
18. 18.📊 Which tag makes one data cell? (a) <caption> (b) <table> (c) <tr> (d) <td>
19. 19.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 140px;
      padding: 25px;
      border: 4px solid black;
      margin: 20px;
    }
20. 20.🔢 On a typical page, from top to bottom, which comes first: “<main>” or “<footer>”? (a) <main> (b) <footer>
21. 21.⚖️ What colour is the text of this element?
    <p class="red" id="top">Hi</p>
    CSS:
    .red { color: blue; }
    .red { color: black; } (a) white (b) green (c) blue (d) black
22. 22.📝 On how many lines does the browser show this paragraph?
    <p>Stars shine<br>Kites fly high<br>Birds sing<br>Sky is blue</p>
23. 23.⚖️ What colour is the text of this element?
    <h1 class="menu" id="main">Hi</h1>
    CSS:
    .menu { color: white; }
    .menu { color: red; } (a) blue (b) yellow (c) red (d) white
24. 24.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) justify-content (c) align-items (d) display: flex
25. 25.True or false: to check for https first is safe. (a) False (b) True
26. 26.🔗 Where does this link open?
    <a href="about.html" target="_blank">Take the quiz</a> (a) in the same tab (b) in a new tab
27. 27.🖼️ Which attribute of <img> shows if the image fails? (a) alt (b) src (c) width (d) height
28. 28.💬 Can anyone read your comments by viewing the page source? (a) No (b) Yes
29. 29.🖌️ Which CSS property makes letters bigger? (a) color (b) font-weight (c) font-size (d) text-align
30. 30.🔗 Which words do you click on?
    <a href="games.html">School news</a> (a) games.html (b) Take the quiz (c) href (d) School news
31. 31.⚡ What number does this code print?
    let a = 8;
    let b = 9;
    console.log(a * b);
32. 32.True or false: a web browser is where we type code. (a) False (b) True
33. 33.True or false: a web browser opens web pages for us. (a) True (b) False
34. 34.📋 Which list tag lists things in any order? (a) <ul> (b) <li> (c) <ol>
35. 35.True or false: <p> has a closing tag. (a) False (b) True
36. 36.True or false: let score = 0; goes in index.html. (a) False (b) True
37. 37.📋 Does this list show bullets or numbers?
    <ol>
      <li>Banana</li>
      <li>Orange</li>
    </ol> (a) numbers (b) bullets
38. 38.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <p>Fun facts</p>
    <!-- <p>My pets</p> -->
    <p>The red kite</p>
39. 39.⚖️ What colour is the text of this element?
    <h2 class="red" id="hero">Hi</h2>
    CSS:
    .red { color: orange; }
    .red { color: blue; } (a) orange (b) purple (c) red (d) blue
40. 40.True or false: console.log(5 + 2); goes in index.html. (a) False (b) True

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