Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 454 · 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.What is <input type="email"> for? (a) picks a day (b) takes only numbers (c) lets you tick many (d) is for an email address
2. 2.True or false: HTML on its own can run a game loop. (a) True (b) False
3. 3.📱 What does a media query check? (a) the time of day (b) the screen width (c) the page title (d) the battery level
4. 4.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is fast (b) the site is free (c) the site is a game (d) the data is scrambled
5. 5.✍️ In color: blue; which part is the property? (a) color (b) blue (c) ; (d) :
6. 6.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 240px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 40px wide (no margins).
7. 7.🖼️ Which picture file does the browser load?
   <img src="moon.png" alt="The full moon" width="350"> (a) The full moon (b) bus.jpg (c) moon.png (d) fort.jpg
8. 8.📊 How many cells does this table have in all?
   <table>
     <tr><td>Grapes</td><td>Banana</td></tr>
     <tr><td>Papaya</td><td>Grapes</td></tr>
   </table>
9. 9.What does font-family do? (a) centres a heading (b) sets the letter colour (c) picks the font style (d) makes the text bold
10. 10.Which of these goes in the head? (a) <table> (b) <h1> (c) <title> (d) <ul>
11. 11.💪 Which flexbox property picks row or column? (a) justify-content (b) flex-direction (c) display: flex (d) align-items
12. 12.🎯 Which CSS selector matches this element?
    <div class="red" id="hero">Hello</div> (a) #top (b) .hero (c) .red (d) #red
13. 13.🔍 One closing tag is missing. Which one?
    <h3>I love mangoes.</h3>
    <em>My pets
    <i>My best friend</i> (a) </b> (b) </h3> (c) </i> (d) </em>
14. 14.Which of these is safe to do online? (a) share your OTP (b) type a password on http (c) tell a trusted adult (d) download from pop-ups
15. 15.⚡ What does this code print? (Look at the quotes!)
    let x = "1";
    let y = 4;
    console.log(x + y); (a) 5 (b) Error (c) 14
16. 16.True or false: in <img>, width describes the picture. (a) True (b) False
17. 17.💬 How many paragraphs show on the page?
    <p>Hello, world!</p>
    <!-- <p>Our school trip</p> -->
    <!-- <p>Cricket is fun.</p> -->
    <p>Rain today</p>
    <!-- <p>My best friend</p> -->
18. 18.🔠 Which heading shows the SMALLEST text: <h6>, <h1>, <h4> or <h2>? (a) <h1> (b) <h6> (c) <h2> (d) <h4>
19. 19.📝 Which tag gives a form box a name you can click? (a) <hr> (b) <title> (c) <h1> (d) <label>
20. 20.♿ A part of the page is under a <h4> heading. Which tag should its sub-heading use? (a) <h4> (b) <h2> (c) <h5> (d) <h6>
21. 21.True or false: <ol> lists steps in order. (a) False (b) True
22. 22.🎨 A CSS file usually ends with which extension? (a) .js (b) .png (c) .css (d) .html
23. 23.📊 How many rows does this table have?
    <table>
      <tr><td>Papaya</td><td>Litchi</td><td>Banana</td></tr>
      <tr><td>Mango</td><td>Banana</td><td>Orange</td></tr>
      <tr><td>Litchi</td><td>Grapes</td><td>Litchi</td></tr>
    </table>
24. 24.♿ Does this help everyone, or make the page harder to use: use headings in order? (a) helps everyone (b) makes it harder
25. 25.🧭 Is <article> semantic or not semantic? (a) semantic (b) not semantic
26. 26.🔡 Are HTML tag names usually written in small letters? (a) No (b) Yes
27. 27.What is <input type="text"> for? (a) is for one line of words (b) lets you pick only one (c) lets you tick many (d) hides what you type
28. 28.🖼️ Why do we add alt text to an image? (a) to colour it (b) to load it faster (c) to make it bigger (d) to describe the image
29. 29.⚖️ What colour is the text of this element?
    <h2 class="box" id="main">Hi</h2>
    CSS:
    h2 { color: orange; }
    h2 { color: green; } (a) purple (b) green (c) white (d) orange
30. 30.📄 Where does <style> go: in the head or in the body? (a) in the head (b) in the body
31. 31.True or false: CSS checks a quiz answer. (a) True (b) False
32. 32.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) the first one (d) neither
33. 33.Which of these is the content? (a) the text or picture (b) space outside the border (c) a solid or dotted edge (d) the line round the box
34. 34.💬 How many paragraphs show on the page?
    <!-- <p>My pets</p> -->
    <p>Hello, world!</p>
    <p>I love mangoes.</p>
    <p>Good morning!</p>
    <p>Fun facts</p>
35. 35.True or false: a web server answers page requests. (a) False (b) True
36. 36.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
37. 37.🎨 One CSS file can style how many pages? (a) many pages (b) only one image (c) only one word (d) no pages
38. 38.True or false: <table> makes a heading cell. (a) False (b) True
39. 39.💬 How does an HTML comment end? (a) */ (b) --> (c) >> (d) //
40. 40.📝 How many <input> tags are in this form?
    <form>
      <input type="number">
      <input type="text">
      <input type="password">
      <input type="email">
      <input type="date">
      <input type="submit" value="Send">
    </form>

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