Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 191 · 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 program lets you see your web page while you build it? (a) a calculator (b) a photo viewer (c) a music player (d) a web browser
2. 2.📊 How many rows does this table have?
   <table>
     <tr><td>Orange</td><td>Grapes</td><td>Mango</td><td>Mango</td></tr>
     <tr><td>Litchi</td><td>Orange</td><td>Banana</td><td>Jamun</td></tr>
     <tr><td>Litchi</td><td>Litchi</td><td>Banana</td><td>Grapes</td></tr>
     <tr><td>Jamun</td><td>Guava</td><td>Grapes</td><td>Papaya</td></tr>
   </table>
3. 3.💬 How many paragraphs show on the page?
   <!-- <p>Good morning!</p> -->
   <p>Hello, world!</p>
   <!-- <p>Rain today</p> -->
4. 4.True or false: “label every form box” makes the page harder to use. (a) True (b) False
5. 5.True or false: HTML on its own can make headings. (a) True (b) False
6. 6.📦 In the box model, which part is space outside the border? (a) border (b) margin (c) content (d) padding
7. 7.True or false: #hero is a class selector. (a) True (b) False
8. 8.What does font-size do? (a) centres a heading (b) sets the letter colour (c) makes letters bigger (d) makes the text bold
9. 9.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>My Hobbies</title>
   </head>
   <body>
     <h1>Easy snacks</h1>
     <p>Mars is red.</p>
   </body>
   </html> (a) Mars is red. (b) index.html (c) Easy snacks (d) My Hobbies
10. 10.Which of these does JavaScript do? (a) makes headings and lists (b) changes the text size (c) changes the page live (d) sets colours and fonts
11. 11.🖼️ Which tag puts a picture on a page? (a) <p> (b) <img> (c) <a> (d) <pic>
12. 12.True or false: <aside> helps you move around. (a) True (b) False
13. 13.🔠 Which heading shows the SMALLEST text: <h4>, <h1>, <h5> or <h3>? (a) <h5> (b) <h4> (c) <h3> (d) <h1>
14. 14.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
15. 15.📊 Which tag makes one data cell? (a) <td> (b) <table> (c) <th> (d) <tr>
16. 16.💪 Which flexbox property turns on flexbox? (a) justify-content (b) display: flex (c) flex-direction (d) gap
17. 17.What does text-align do? (a) colours behind the text (b) centres a heading (c) makes the text bold (d) sets the letter colour
18. 18.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 30px;
      }
    } (a) Yes (b) No
19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      font-size: 20px;
      width: 300px;
    }
20. 20.💬 Which text will NOT show on the page?
    <!-- <p>Our school trip</p> -->
    <p>I love mangoes.</p>
    <p>My best friend</p>
    <p>Rain today</p> (a) My best friend (b) Our school trip (c) Rain today (d) I love mangoes.
21. 21.Which of these is true of <main>? (a) holds a news story (b) is the page’s key part (c) holds copyright notes (d) holds one blog post
22. 22.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    #logo { color: orange; }
    .big { color: blue; }
    p { color: green; } (a) black (b) green (c) blue (d) orange
23. 23.Which colour pair is easy to read? (a) black on white (b) pink on red (c) blue on purple (d) red on green
24. 24.⚡ What does this code show?
    let name = "Zoya";
    console.log("Hi, " + name + "!"); (a) name (b) Hi, Zoya! (c) Hi, name! (d) Zoya
25. 25.⚡ What number does this code print?
    let a = 30;
    let b = 8;
    console.log(a - b);
26. 26.📄 Can HTML on its own make links to pages? (a) No (b) Yes
27. 27.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    }
28. 28.🖌️ Which CSS property centres a heading? (a) color (b) font-size (c) background-color (d) text-align
29. 29.🌈 Which colour is rgb(255, 0, 0)? (a) black (b) yellow (c) red (d) white
30. 30.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
31. 31.📝 Which input type is for an email address? (a) text (b) number (c) email (d) checkbox
32. 32.🔁 What does this code print?
    let age = 13;
    if (age < 25) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
33. 33.✍️ How does a CSS comment start? (a) <!-- (b) # (c) /* (d) //
34. 34.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the viewport meta tag (c) the br tag (d) the title tag
35. 35.🚀 Which file should this code go in: alert("Hi"); (a) style.css (b) script.js (c) index.html
36. 36.🚀 Which file should this code go in: <ul><li>Art</li></ul> (a) style.css (b) index.html (c) script.js
37. 37.📊 Where do <td> cells go? (a) inside a <p> (b) inside a <li> (c) inside the <head> (d) inside a <tr>
38. 38.🖼️ Which attribute of <img> sets how wide it is? (a) width (b) src (c) height (d) alt
39. 39.🔍 Which is the odd one out? (a) adds space around boxes (b) changes the text size (c) lays out the page (d) makes headings and lists
40. 40.True or false: body is an element selector. (a) False (b) True

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