Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 358 · 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 attribute of <img> is read by screen readers? (a) src (b) height (c) width (d) alt
2. 2.🔢 On a typical page, from top to bottom, which comes LAST? (a) <nav> (b) <main> (c) <footer> (d) <header>
3. 3.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 30px;
     }
   } (a) No (b) Yes
4. 4.True or false: in <img>, height sets how wide it is. (a) False (b) True
5. 5.📛 In <a href="x.html">, what is href? (a) a closing tag (b) an element name (c) a comment (d) an attribute
6. 6.True or false: h1 is an element selector. (a) True (b) False
7. 7.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 18px;
     }
   } (a) No (b) Yes
8. 8.♿ What does good colour contrast mean? (a) many bright colours (b) no colours at all (c) text stands out clearly (d) only red text
9. 9.💬 Which text will NOT show on the page?
   <!-- <p>Rain today</p> -->
   <p>My pets</p>
   <p>My best friend</p>
   <p>Our school trip</p> (a) Our school trip (b) My best friend (c) My pets (d) Rain today
10. 10.Which of these is the border? (a) the text or picture (b) the gap round content (c) the gap to other boxes (d) the line round the box
11. 11.True or false: <img> is an empty tag. (a) False (b) True
12. 12.🔍 Which is the odd one out? (a) counts down a timer (b) checks a quiz answer (c) makes headings and lists (d) changes the page live
13. 13.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the br tag (c) the viewport meta tag (d) the hr tag
14. 14.🔍 One closing tag is missing. Which one?
    <h2>Hello, world!</h2>
    <small>I love mangoes.
    <h3>Good morning!</h3> (a) </small> (b) </h3> (c) </h2> (d) </u>
15. 15.📝 On how many lines does the browser show this paragraph?
    <p>Rivers flow<br>Kites fly high</p>
16. 16.🌈 Which colour is rgb(255, 255, 0)? (a) white (b) bright green (c) magenta (d) yellow
17. 17.True or false: <ul> lists things in any order. (a) True (b) False
18. 18.📝 Does <br> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
19. 19.🖼️ Which attribute of <img> describes the picture? (a) alt (b) height (c) src (d) width
20. 20.🔗 Which words do you click on?
    <a href="news.html">Maths fun</a> (a) Art corner (b) href (c) news.html (d) Maths fun
21. 21.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 100px;
      padding: 5px;
      border: 5px solid black;
      margin: 0px;
    }
22. 22.🔍 Which is the odd one out? (a) shows pages from the web (b) shows line numbers (c) is where we type code (d) saves our .html files
23. 23.🔠 How many headings are in this code?
    <h1>Hello, world!</h1>
    <h4>I love mangoes.</h4>
    <h3>Our school trip</h3>
    <p>The red kite</p>
24. 24.True or false: HTML on its own cannot make headings. (a) True (b) False
25. 25.🔗 Which address opens when you click this link?
    <a href="about.html">Take the quiz</a> (a) https://example.com (b) contact.html (c) Take the quiz (d) about.html
26. 26.🔠 Which heading shows the BIGGEST text: <h5>, <h3>, <h1> or <h2>? (a) <h3> (b) <h5> (c) <h1> (d) <h2>
27. 27.🏷️ Which is the closing tag for <h3>? (a) </h3> (b) <h3/> (c) <\h3> (d) <h3>
28. 28.🖼️ Does <img> need a closing tag? (a) No (b) Yes
29. 29.🖌️ Where does the text sit on its line?
    h1 {
      text-align: center;
      background-color: red;
      font-size: 36px;
      color: blue;
    } (a) in the middle (b) on the right (c) on the left
30. 30.🔗 Where does this link open?
    <a href="maths.html">Maths fun</a> (a) in a new tab (b) in the same tab
31. 31.Which of these is the content? (a) a solid or dotted edge (b) the text or picture (c) the line round the box (d) the gap to other boxes
32. 32.True or false: <input type="radio"> lets you pick only one. (a) False (b) True
33. 33.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
34. 34.🎨 A CSS file usually ends with which extension? (a) .png (b) .html (c) .css (d) .js
35. 35.What does background-color do? (a) centres a heading (b) makes letters bigger (c) colours behind the text (d) sets the letter colour
36. 36.⚡ What does this code print? (Look at the quotes!)
    let x = "4";
    let y = 3;
    console.log(x + y); (a) 43 (b) 7 (c) Error
37. 37.Which of these is true of a code editor? (a) sends pages over the net (b) shows pages from the web (c) saves our .html files (d) hosts websites online
38. 38.🔢 To build and share your first web page, which comes FIRST? (a) publish it online (b) add CSS styles (c) plan what to show (d) write the HTML
39. 39.🔐 Is abcd1234 a strong or a weak password? (a) weak (b) strong
40. 40.🚀 Which file should this code go in: <img src="cat.png"> (a) style.css (b) script.js (c) index.html

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