Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 337 · 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 sign ends each CSS declaration? (a) . (b) , (c) ; (d) :
2. 2.🔗 Where does this link open?
   <a href="quiz.html" target="_blank">About us</a> (a) in the same tab (b) in a new tab
3. 3.🖼️ Which attribute of <img> tells which image to load? (a) width (b) alt (c) height (d) src
4. 4.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) justify-content (c) gap (d) align-items
5. 5.What is <input type="submit"> for? (a) sends the form (b) takes only numbers (c) lets you tick many (d) lets you pick only one
6. 6.📝 How many <input> tags are in this form?
   <form>
     <input type="checkbox">
     <input type="number">
     <input type="submit" value="Send">
   </form>
7. 7.📦 In the box model, which part is space inside the border? (a) content (b) margin (c) border (d) padding
8. 8.📝 Which input type sends the form? (a) text (b) email (c) submit (d) radio
9. 9.📝 How many <input> tags are in this form?
   <form>
     <input type="email">
     <input type="checkbox">
     <input type="password">
     <input type="submit" value="Send">
   </form>
10. 10.True or false: <a href="a.html">Go</a> goes in index.html. (a) False (b) True
11. 11.What does color do? (a) makes the text bold (b) makes letters bigger (c) sets the letter colour (d) picks the font style
12. 12.📝 What does <br> do? (a) makes a list (b) starts a new line (c) makes text bold (d) adds a picture
13. 13.📊 Are <th> cells shown bold and centred by default? (a) Yes (b) No
14. 14.⚖️ What colour is the text of this element?
    <p class="star" id="end">Hi</p>
    CSS:
    p { color: red; }
    #end { color: yellow; } (a) red (b) black (c) green (d) yellow
15. 15.🌈 Which colour is #0000ff? (a) bright green (b) cyan (c) blue (d) red
16. 16.🖼️ Which tag puts a picture on a page? (a) <a> (b) <pic> (c) <p> (d) <img>
17. 17.True or false: <td> gives the table a title. (a) False (b) True
18. 18.⚖️ What colour is the text of this element?
    <h2 class="big" id="logo">Hi</h2>
    CSS:
    .big { color: red; }
    h2 { color: yellow; } (a) black (b) red (c) purple (d) yellow
19. 19.True or false: <meta charset="utf-8"> goes in the head. (a) False (b) True
20. 20.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 200px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 60px wide (no margins).
21. 21.🏷️ What does a closing tag have that an opening tag does not? (a) a dot . (b) a hash # (c) a slash / (d) a dollar $
22. 22.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) never changes (d) fits every screen
23. 23.True or false: #top { color: blue; } goes in style.css. (a) False (b) True
24. 24.🧭 Who is helped most by semantic tags? (a) screen-reader users (b) only the server (c) only the printer (d) nobody
25. 25.🧩 Which language lays out the page? (a) JavaScript (b) HTML (c) CSS
26. 26.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 200px;
      padding: 25px;
      border: 4px solid black;
      margin: 0px;
    }
27. 27.True or false: a web server shows line numbers. (a) True (b) False
28. 28.🔤 In “HTML”, what does the M stand for? (a) Mouse (b) Modern (c) Markup (d) Machine
29. 29.📝 How many paragraphs does this code make?
    <p>Rain today</p>
    <h2>Rain today</h2>
    <p>Fun facts</p>
    <h2>My pets</h2>
    <h2>The red kite</h2>
30. 30.⚖️ What colour is the text of this element?
    <p class="note" id="main">Hi</p>
    CSS:
    p { color: red; }
    .note { color: green; } (a) white (b) green (c) red (d) orange
31. 31.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 8; i++) {
      total = total + i;
    }
    console.log(total);
32. 32.🔠 How many <h1> headings should a page usually have? (a) 3 (b) 1 (c) 10 (d) 6
33. 33.💬 Can anyone read your comments by viewing the page source? (a) No (b) Yes
34. 34.🖼️ How many pixels wide is the picture drawn?
    <img src="tiger.jpg" alt="A tiger asleep" width="400">
35. 35.✍️ CSS declarations go inside which brackets? (a) { } (b) [ ] (c) ( ) (d) < >
36. 36.🚀 Which file should this code go in: score = score + 1; (a) index.html (b) style.css (c) script.js
37. 37.🔠 Which heading shows the SMALLEST text: <h4>, <h6>, <h3> or <h2>? (a) <h2> (b) <h4> (c) <h6> (d) <h3>
38. 38.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
39. 39.⚡ Where does console.log() show its output? (a) in the address bar (b) on the title bar (c) in the console (d) on the printer
40. 40.📝 Which input type lets you pick only one? (a) text (b) radio (c) email (d) password

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