Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 914 · 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.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) has no pictures (d) fits every screen
2. 2.🌈 Which hex code is white? (a) #ff00ff (b) #ffffff (c) #00ffff (d) #00ff00
3. 3.📝 Which input type lets you tick many? (a) radio (b) text (c) checkbox (d) password
4. 4.🔢 To build and share your first web page, which comes first: “add CSS styles” or “test in a browser”? (a) add CSS styles (b) test in a browser
5. 5.🔐 Is Rain#Drop_42! a strong or a weak password? (a) weak (b) strong
6. 6.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) the later one (d) neither
7. 7.🚀 You change your code. What should you do to see the change? (a) rename the folder (b) delete the file (c) save and refresh (d) switch off the PC
8. 8.True or false: in <img>, width sets how tall it is. (a) False (b) True
9. 9.💬 How many paragraphs show on the page?
   <!-- <p>My best friend</p> -->
   <p>Our school trip</p>
   <p>Hello, world!</p>
10. 10.🎯 Which sign starts a class selector? (a) @ (b) . (c) # (d) &
11. 11.💬 How does an HTML comment start? (a) # (b) /* (c) // (d) <!--
12. 12.🖌️ Which CSS property makes letters bigger? (a) font-family (b) font-size (c) text-align (d) color
13. 13.📋 Which tag goes around each item of a list? (a) <ol> (b) <li> (c) <ul> (d) <p>
14. 14.💬 How many paragraphs show on the page?
    <!-- <p>The red kite</p> -->
    <!-- <p>Cricket is fun.</p> -->
    <p>My best friend</p>
    <!-- <p>Good morning!</p> -->
15. 15.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is free (b) the site is fast (c) the data is scrambled (d) the site is a game
16. 16.🎯 Which CSS selector matches this element?
    <p class="big" id="hero">Hello</p> (a) #hero (b) #big (c) h1 (d) #top
17. 17.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
18. 18.🎯 How many elements on a page should have the same id? (a) any number (b) 2 (c) 1 (d) 5
19. 19.🧱 HTML gives a web page its ___. (a) structure (b) sound (c) speed (d) colours
20. 20.🔠 Are headings shown in bold by default? (a) No (b) Yes
21. 21.Which of these goes in the head? (a) <table> (b) <h1> (c) <ul> (d) <style>
22. 22.🔠 How many headings are in this code?
    <h1>Good morning!</h1>
    <h3>The red kite</h3>
    <p>I love mangoes.</p>
23. 23.Which of these does CSS do? (a) gives the page structure (b) shows a pop-up message (c) adds space around boxes (d) makes headings and lists
24. 24.📊 In a table, which tag is a row? (a) <td> (b) <tb> (c) <tr> (d) <th>
25. 25.📝 Does <h1> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
26. 26.🔗 What does target="_blank" do to a link? (a) makes it blank (b) opens it in a new tab (c) makes it bold (d) hides the link
27. 27.💬 Can anyone read your comments by viewing the page source? (a) No (b) Yes
28. 28.📦 In the box model, which part is the text or picture? (a) content (b) padding (c) margin (d) border
29. 29.🏷️ Which is the closing tag for <b>? (a) <b> (b) <\b> (c) <b/> (d) </b>
30. 30.💬 Which text will NOT show on the page?
    <p>Cricket is fun.</p>
    <p>Hello, world!</p>
    <!-- <p>My best friend</p> -->
    <p>I love mangoes.</p> (a) I love mangoes. (b) Cricket is fun. (c) Hello, world! (d) My best friend
31. 31.📋 What number does the browser show next to “Papaya”?
    <ol start="8">
      <li>Banana</li>
      <li>Litchi</li>
      <li>Papaya</li>
      <li>Mango</li>
      <li>Jamun</li>
    </ol>
32. 32.Which colour pair is easy to read? (a) blue on purple (b) black on white (c) red on green (d) light grey on white
33. 33.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>Hello, world!</p> -->
    <p>Rain today</p>
    <p>My pets</p>
    <p>Cricket is fun.</p>
34. 34.What does text-align do? (a) sets the letter colour (b) colours behind the text (c) picks the font style (d) centres a heading
35. 35.✍️ What is the selector in this CSS rule?
    li {
      font-size: 20px;
      font-weight: bold;
      padding: 8px;
    } (a) li (b) body (c) bold (d) font-size
36. 36.⚖️ What colour is the text of this element?
    <h1 class="box" id="end">Hi</h1>
    CSS:
    h1 { color: black; }
    #end { color: red; } (a) purple (b) black (c) red (d) yellow
37. 37.📋 Which list tag lists steps in order? (a) <ul> (b) <li> (c) <ol>
38. 38.True or false: h1 { font-size: 32px; } goes in script.js. (a) True (b) False
39. 39.📊 How many rows does this table have?
    <table>
      <tr><td>Jamun</td><td>Jamun</td><td>Jamun</td><td>Mango</td></tr>
      <tr><td>Mango</td><td>Banana</td><td>Jamun</td><td>Orange</td></tr>
    </table>
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).

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