Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 298 · 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.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 14px;
     }
   }
2. 2.Which of these is true of <nav>? (a) sits at the bottom (b) helps you move around (c) holds extra side notes (d) holds the logo and title
3. 3.💬 Does the browser show comments on the page? (a) No (b) Yes
4. 4.📦 In the box model, which part is space inside the border? (a) margin (b) padding (c) border (d) content
5. 5.🔠 How many headings are in this code?
   <h1>I love mangoes.</h1>
   <h2>My pets</h2>
   <p>My pets</p>
   <h2>Good morning!</h2>
6. 6.✍️ What value is given to margin in this rule?
   #top {
     font-size: 20px;
     margin: 10px;
   } (a) margin (b) 10px (c) 8px (d) bold
7. 7.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 18px;
     }
   }
8. 8.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 220px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 80px wide (no margins).
9. 9.🧩 Which language shows a pop-up message? (a) HTML (b) JavaScript (c) CSS
10. 10.📊 Are <th> cells shown bold and centred by default? (a) Yes (b) No
11. 11.Which of these is the content? (a) the line round the box (b) the gap round content (c) the text or picture (d) space inside the border
12. 12.🔁 How many times does this code print “Hi”?
    for (let i = 0; i <= 5; i++) {
      console.log("Hi");
    }
13. 13.📦 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: 10px;
      border: 4px solid black;
      margin: 15px;
    }
14. 14.🔢 To build and share your first web page, which comes FIRST? (a) plan what to show (b) write the HTML (c) publish it online (d) add CSS styles
15. 15.True or false: <input type="email"> lets you tick many. (a) True (b) False
16. 16.📋 Which list tag is one item of a list? (a) <ol> (b) <ul> (c) <li>
17. 17.📊 How many rows does this table have?
    <table>
      <tr><td>Grapes</td><td>Mango</td><td>Mango</td><td>Grapes</td></tr>
      <tr><td>Litchi</td><td>Orange</td><td>Litchi</td><td>Orange</td></tr>
    </table>
18. 18.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 20px;
      border: 4px solid black;
      margin: 15px;
    }
19. 19.🔠 Which heading shows the BIGGEST text: <h4>, <h5>, <h3> or <h1>? (a) <h1> (b) <h4> (c) <h5> (d) <h3>
20. 20.📝 What does <p> make? (a) a paragraph (b) a link (c) a table (d) a picture
21. 21.📝 Does <br> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
22. 22.🏷️ Which is the closing tag for <small>? (a) <small/> (b) <\small> (c) <small> (d) </small>
23. 23.🧭 Is <main> semantic or not semantic? (a) not semantic (b) semantic
24. 24.🔁 How many numbers does this code print?
    for (let i = 0; i < 16; i = i + 3) {
      console.log(i);
    }
25. 25.📋 Which list tag shows 1, 2, 3 numbers? (a) <li> (b) <ul> (c) <ol>
26. 26.♿ Does this help everyone, or make the page harder to use: use headings in order? (a) helps everyone (b) makes it harder
27. 27.True or false: “tiny grey text” helps everyone use the page. (a) False (b) True
28. 28.⚡ Which JavaScript word makes a new variable? (a) if (b) alert() (c) for (d) let
29. 29.What does color do? (a) picks the font style (b) colours behind the text (c) sets the letter colour (d) makes the text bold
30. 30.📝 On how many lines does the browser show this paragraph?
    <p>Roses are red<br>Kites fly high</p>
31. 31.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 12px;
      }
    }
32. 32.True or false: HTML on its own can keep a high score. (a) False (b) True
33. 33.📝 How many <input> tags are in this form?
    <form>
      <input type="text">
      <input type="date">
      <input type="submit" value="Send">
    </form>
34. 34.🔗 Which code links to about.html? (a) <link about.html> (b) <a href="about.html"> (c) <a src="about.html"> (d) <a alt="about.html">
35. 35.💬 How many paragraphs show on the page?
    <p>My best friend</p>
    <!-- <p>Cricket is fun.</p> -->
    <p>Our school trip</p>
    <p>The red kite</p>
36. 36.⚡ Which JavaScript word shows a pop-up box? (a) console.log() (b) alert() (c) let (d) if
37. 37.💬 Which text will NOT show on the page?
    <!-- <p>My best friend</p> -->
    <p>Hello, world!</p>
    <p>My pets</p> (a) My pets (b) Hello, world! (c) My best friend
38. 38.Which of these has a closing tag? (a) <hr> (b) <img> (c) <input> (d) <ul>
39. 39.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 15px;
      border: 2px solid black;
      margin: 20px;
    }
40. 40.🎯 What kind of selector is .big? (a) an element selector (b) a class selector (c) an id selector

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