Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 523 · 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.📄 Where does <ul> go: in the head or in the body? (a) in the body (b) in the head
2. 2.🔗 Where does this link open?
   <a href="art.html">About us</a> (a) in a new tab (b) in the same tab
3. 3.📝 On how many lines does the browser show this paragraph?
   <p>Sky is blue<br>Roses are red<br>Kites fly high<br>Rivers flow<br>Stars shine</p>
4. 4.🔗 Which attribute holds the address of a link? (a) id (b) alt (c) href (d) src
5. 5.🖼️ Does <img> need a closing tag? (a) Yes (b) No
6. 6.🎨 A CSS file usually ends with which extension? (a) .css (b) .js (c) .html (d) .png
7. 7.🔠 How many heading levels does HTML have? (a) 4 (b) 3 (c) 6 (d) 10
8. 8.💬 How many paragraphs show on the page?
   <p>My pets</p>
   <!-- <p>Hello, world!</p> -->
   <p>My best friend</p>
   <!-- <p>I love mangoes.</p> -->
   <p>Rain today</p>
9. 9.📄 Where does the text of <title> appear? (a) nowhere (b) in a big heading (c) on the browser tab (d) at the bottom
10. 10.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
11. 11.🌈 Which hex code is yellow? (a) #ffffff (b) #ffff00 (c) #00ff00 (d) #ff0000
12. 12.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    p { color: green; }
    p { color: white; } (a) orange (b) purple (c) white (d) green
13. 13.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) blue (c) green (d) red
14. 14.Which of these is true of a web browser? (a) turns HTML into a page (b) is where we type code (c) hosts websites online (d) sends pages over the net
15. 15.🔍 Which is the odd one out? (a) sets colours and fonts (b) makes a link (c) makes headings and lists (d) makes a form box
16. 16.💬 How does an HTML comment end? (a) */ (b) // (c) >> (d) -->
17. 17.🔗 Which words do you click on?
    <a href="quiz.html">Visit the site</a> (a) href (b) Maths fun (c) quiz.html (d) Visit the site
18. 18.🔍 Which is the odd one out? (a) saves our .html files (b) is where we type code (c) shows line numbers (d) turns HTML into a page
19. 19.📝 How many paragraphs does this code make?
    <p>The red kite</p>
    <p>Our school trip</p>
    <p>Good morning!</p>
    <p>I love mangoes.</p>
    <h2>My pets</h2>
    <p>Good morning!</p>
20. 20.💪 Which flexbox property picks row or column? (a) align-items (b) flex-direction (c) justify-content (d) display: flex
21. 21.🔗 Which address opens when you click this link?
    <a href="games.html">Art corner</a> (a) games.html (b) contact.html (c) Art corner (d) about.html
22. 22.True or false: a code editor has an address bar. (a) False (b) True
23. 23.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    #end { color: orange; }
    .big { color: blue; }
    p { color: red; } (a) red (b) green (c) blue (d) orange
24. 24.🔗 Which address opens when you click this link?
    <a href="about.html">Take the quiz</a> (a) https://example.com (b) Take the quiz (c) about.html (d) contact.html
25. 25.True or false: <meta charset="utf-8"> goes in the head. (a) False (b) True
26. 26.🚀 Which file should this code go in: #top { color: blue; } (a) script.js (b) index.html (c) style.css
27. 27.🔗 Where does this link open?
    <a href="about.html" target="_blank">Contact us</a> (a) in the same tab (b) in a new tab
28. 28.True or false: <input type="submit"> sends the form. (a) True (b) False
29. 29.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
30. 30.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 32px;
      }
    } (a) Yes (b) No
31. 31.True or false: <ul><li>Art</li></ul> goes in script.js. (a) False (b) True
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      background-color: yellow;
      font-size: 20px;
      width: 300px;
    }
33. 33.📊 How many cells does this table have in all?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Guava</td><td>Grapes</td><td>Papaya</td><td>Jamun</td></tr>
      <tr><td>Grapes</td><td>Guava</td><td>Orange</td><td>Banana</td></tr>
      <tr><td>Mango</td><td>Grapes</td><td>Orange</td><td>Litchi</td></tr>
    </table>
34. 34.🔍 Which line is missing its closing tag?
    line 1: <i>My pets</i>
    line 2: <u>The red kite
    line 3: <h1>My best friend</h1> (a) line 1 (b) line 3 (c) line 2
35. 35.💬 How many paragraphs show on the page?
    <p>My best friend</p>
    <p>I love mangoes.</p>
    <!-- <p>Cricket is fun.</p> -->
    <!-- <p>Hello, world!</p> -->
    <p>Our school trip</p>
36. 36.📄 Where does <a> go: in the head or in the body? (a) in the head (b) in the body
37. 37.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
38. 38.🔢 To build and share your first web page, which comes first: “publish it online” or “write the HTML”? (a) write the HTML (b) publish it online
39. 39.✍️ What is the selector in this CSS rule?
    #top {
      background-color: yellow;
      color: red;
      font-size: 20px;
    } (a) #top (b) li (c) red (d) background-color
40. 40.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or wider (d) 600px or narrower

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