Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 25 · 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.🔢 When you open a web page, which comes FIRST? (a) the browser shows it (b) DNS finds the server (c) the browser asks it (d) you type the URL
2. 2.🏷️ Which is the closing tag for <em>? (a) <em> (b) <em/> (c) <\em> (d) </em>
3. 3.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 18px;
     }
   }
4. 4.📝 Does <ul> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
5. 5.⚖️ What colour is the text of this element?
   <h1 class="box" id="top">Hi</h1>
   CSS:
   #top { color: red; }
   #top { color: black; } (a) yellow (b) black (c) purple (d) red
6. 6.🖌️ What colour is behind the letters?
   h2 {
     background-color: orange;
     text-align: left;
     font-size: 32px;
     color: white;
   } (a) orange (b) blue (c) white
7. 7.✍️ Which property is set to 2px solid in this rule?
   h1 {
     border: 2px solid;
     color: red;
   } (a) border (b) width (c) 2px solid (d) font-style
8. 8.📄 Where does <p> go: in the head or in the body? (a) in the body (b) in the head
9. 9.📝 On how many lines does the browser show this paragraph?
   <p>Sky is blue<br>Kites fly high<br>Rivers flow</p>
10. 10.💪 Which flexbox property sets space between boxes? (a) display: flex (b) gap (c) align-items (d) justify-content
11. 11.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>Easy snacks</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) body (b) Class 7 Blog (c) Easy snacks (d) Mars is red.
12. 12.🔢 When you open a web page, which comes first: “you type the URL” or “DNS finds the server”? (a) DNS finds the server (b) you type the URL
13. 13.📊 Which tag makes one table row? (a) <td> (b) <table> (c) <tr> (d) <caption>
14. 14.True or false: <td> gives the table a title. (a) True (b) False
15. 15.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-end (c) space-between (d) flex-start
16. 16.♿ Who uses a screen reader? (a) only robots (b) only coders (c) people who are blind (d) only teachers
17. 17.True or false: img is an element selector. (a) False (b) True
18. 18.📄 Where does <a> go: in the head or in the body? (a) in the body (b) in the head
19. 19.⚡ Which JavaScript word runs code when true? (a) console.log() (b) let (c) alert() (d) if
20. 20.🌗 Is light grey on white easy or hard to read? (a) hard to read (b) easy to read
21. 21.♿ A part of the page is under a <h2> heading. Which tag should its sub-heading use? (a) <h3> (b) <h5> (c) <h2> (d) <h1>
22. 22.✍️ Which sign goes between a property and its value? (a) : (b) - (c) = (d) ;
23. 23.💬 Which text will NOT show on the page?
    <p>Our school trip</p>
    <p>I love mangoes.</p>
    <!-- <p>Rain today</p> --> (a) Our school trip (b) I love mangoes. (c) Rain today
24. 24.Which of these goes in the head? (a) <table> (b) <img> (c) <a> (d) <link rel="stylesheet">
25. 25.🧭 Why use <nav> instead of <div> for a menu? (a) it loads faster (b) it makes text red (c) it tells its meaning (d) it adds pictures
26. 26.True or false: HTML makes a link. (a) False (b) True
27. 27.True or false: a web server stores a website’s files. (a) False (b) True
28. 28.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the title tag (c) the br tag (d) the hr tag
29. 29.True or false: HTML on its own cannot make a form. (a) True (b) False
30. 30.📝 How many <input> tags are in this form?
    <form>
      <input type="number">
      <input type="text">
      <input type="submit" value="Send">
    </form>
31. 31.🚀 Which file should this code go in: <a href="a.html">Go</a> (a) index.html (b) script.js (c) style.css
32. 32.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or narrower (c) turned off (d) 600px or wider
33. 33.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <p>Rain today</p>
    <h4>My best friend</h4>
    <p>My pets</p>
34. 34.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 8; i++) {
      total = total + 7;
    }
    console.log(total);
35. 35.🚀 Which file is best for code that reacts to clicks? (a) notes.txt (b) style.css (c) index.html (d) script.js
36. 36.🔢 On a typical page, from top to bottom, what comes right after “<header>”? (a) <main> (b) <footer> (c) <nav>
37. 37.🔐 Is abcd1234 a strong or a weak password? (a) weak (b) strong
38. 38.📦 In the box model, which part is the text or picture? (a) content (b) margin (c) padding (d) border
39. 39.📱 Responsive design means a page ___. (a) has no pictures (b) never changes (c) fits every screen (d) is only for laptops
40. 40.🔁 When does the else part run? (a) never (b) when if is false (c) always (d) when if is true

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