Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 518 · 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.📝 On how many lines does the browser show this paragraph?
   <p>Sky is blue<br>Stars shine<br>Roses are red<br>Birds sing</p>
2. 2.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 22px;
     }
   }
3. 3.🌍 What is the path in this URL?
   http://www.example.net/news/today.html (a) /games/chess.html (b) http (c) www.example.net (d) /news/today.html
4. 4.🌐 Which one sends pages over the net? (a) a code editor (b) a web server (c) a web browser
5. 5.🔠 How many headings are in this code?
   <h1>I love mangoes.</h1>
   <p>Rain today</p>
   <p>Our school trip</p>
   <p>The red kite</p>
   <p>Rain today</p>
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     width: 300px;
     padding: 8px;
   }
7. 7.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>My Hobbies</title>
   </head>
   <body>
     <h1>All about me</h1>
     <p>Mars is red.</p>
   </body>
   </html> (a) index.html (b) My Hobbies (c) Mars is red. (d) All about me
8. 8.🔐 Is 111111 a strong or a weak password? (a) strong (b) weak
9. 9.📋 Which list tag lists steps in order? (a) <li> (b) <ol> (c) <ul>
10. 10.🔠 Which heading shows the BIGGEST text: <h4>, <h1>, <h5> or <h6>? (a) <h4> (b) <h6> (c) <h5> (d) <h1>
11. 11.Which colour pair is hard to read? (a) yellow on white (b) yellow on black (c) dark grey on white (d) white on dark blue
12. 12.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
13. 13.📋 Which list shows the steps of a recipe best? (a) <ol> (b) <ul> (c) <hr> (d) <br>
14. 14.📄 Where does <ul> go: in the head or in the body? (a) in the body (b) in the head
15. 15.🖼️ Which attribute of <img> is read by screen readers? (a) alt (b) height (c) width (d) src
16. 16.📊 How many rows does this table have?
    <table>
      <tr><td>Banana</td><td>Jamun</td></tr>
      <tr><td>Orange</td><td>Mango</td></tr>
      <tr><td>Mango</td><td>Grapes</td></tr>
    </table>
17. 17.🖼️ Which picture file does the browser load?
    <img src="dog.jpg" alt="A happy dog" width="150"> (a) A happy dog (b) dog.jpg (c) moon.png (d) bus.jpg
18. 18.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      background-color: yellow;
      padding: 8px;
      border: 2px solid;
    }
19. 19.🔠 How many headings are in this code?
    <h1>Hello, world!</h1>
    <p>Rain today</p>
    <p>Our school trip</p>
    <p>Our school trip</p>
20. 20.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 14; i = i + 2) {
      console.log(i);
    }
21. 21.🖌️ What colour are the letters?
    h2 {
      text-align: left;
      background-color: blue;
      font-size: 12px;
      color: red;
    } (a) red (b) blue (c) white
22. 22.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="moon.png" alt="The full moon" width="50"> (a) Our school bus (b) moon.png (c) The full moon (d) width
23. 23.📝 Which tag holds a whole form? (a) <input> (b) <table> (c) <form> (d) <ol>
24. 24.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) gap (c) align-items (d) justify-content
25. 25.🔠 Which heading shows the BIGGEST text: <h5>, <h1>, <h3> or <h4>? (a) <h3> (b) <h5> (c) <h1> (d) <h4>
26. 26.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
27. 27.📝 On how many lines does the browser show this paragraph?
    <p>Sky is blue<br>Kites fly high</p>
28. 28.🔍 Which is the odd one out? (a) has an address bar (b) shows pages from the web (c) opens web pages for us (d) answers page requests
29. 29.✍️ What value is given to font-style in this rule?
    .note {
      font-style: italic;
      border: 2px solid;
    } (a) red (b) font-style (c) 20px (d) italic
30. 30.🔍 Which is the odd one out? (a) is where we type code (b) opens web pages for us (c) saves our .html files (d) colours code to help us
31. 31.💬 How many paragraphs show on the page?
    <p>Fun facts</p>
    <p>Cricket is fun.</p>
    <p>Hello, world!</p>
    <!-- <p>The red kite</p> -->
32. 32.🧭 Which semantic tag holds a news story? (a) <footer> (b) <main> (c) <article> (d) <header>
33. 33.True or false: a web server colours code to help us. (a) False (b) True
34. 34.🌈 Which colour is #ffffff? (a) black (b) bright green (c) white (d) yellow
35. 35.📋 Which list tag is an ordered list? (a) <li> (b) <ol> (c) <ul>
36. 36.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 260px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 100px wide (no margins).
37. 37.🔢 When you open a web page, which comes first: “the browser asks it” or “the server sends files”? (a) the browser asks it (b) the server sends files
38. 38.⚡ Where does console.log() show its output? (a) on the printer (b) on the title bar (c) in the console (d) in the address bar
39. 39.🌍 What do we call the computer that stores a website? (a) a printer (b) a server (c) a mouse (d) a keyboard
40. 40.📦 In the box model, which part is the text or picture? (a) border (b) padding (c) content (d) margin

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