Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 500 · 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.True or false: CSS makes a form box. (a) True (b) False
2. 2.What is <input type="number"> for? (a) hides what you type (b) picks a day (c) is for an email address (d) takes only numbers
3. 3.True or false: in <img>, height sets how tall it is. (a) False (b) True
4. 4.📋 Which list tag is an unordered list? (a) <ol> (b) <li> (c) <ul>
5. 5.True or false: a web browser turns HTML into a page. (a) True (b) False
6. 6.🔗 Where does this link open?
   <a href="contact.html" target="_blank">Take the quiz</a> (a) in the same tab (b) in a new tab
7. 7.Which of these is the content? (a) a solid or dotted edge (b) space outside the border (c) the line round the box (d) the text or picture
8. 8.💬 How many paragraphs show on the page?
   <p>Hello, world!</p>
   <p>Rain today</p>
   <p>My best friend</p>
   <!-- <p>My pets</p> -->
9. 9.🔗 What does target="_blank" do to a link? (a) opens it in a new tab (b) hides the link (c) makes it blank (d) makes it bold
10. 10.📝 Which input type is for an email address? (a) submit (b) number (c) text (d) email
11. 11.📊 Where do <td> cells go? (a) inside a <tr> (b) inside a <p> (c) inside the <head> (d) inside a <li>
12. 12.🌈 In #008300 the green part is the hex number 83. What is it as a normal number?
13. 13.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
14. 14.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 10px;
      border: 2px solid black;
      margin: 15px;
    }
15. 15.🧭 Is <section> semantic or not semantic? (a) not semantic (b) semantic
16. 16.🔗 Which attribute holds the address of a link? (a) href (b) id (c) alt (d) src
17. 17.🔁 What does this code print?
    let temp = 7;
    if (temp > 21) {
      console.log("Hot");
    } else {
      console.log("Cool");
    } (a) Hot (b) Cool
18. 18.True or false: <caption> gives the table a title. (a) True (b) False
19. 19.📋 Does this list show bullets or numbers?
    <ul>
      <li>Papaya</li>
      <li>Litchi</li>
    </ul> (a) bullets (b) numbers
20. 20.♿ Which link text is clearest? (a) link (b) Read the fruit facts (c) click here (d) here
21. 21.🔠 How many headings are in this code?
    <h1>My best friend</h1>
    <h3>Rain today</h3>
    <p>Rain today</p>
    <h3>Hello, world!</h3>
22. 22.Which of these does CSS do? (a) changes the text size (b) makes headings and lists (c) checks a quiz answer (d) puts a picture on a page
23. 23.🧭 Is <article> semantic or not semantic? (a) semantic (b) not semantic
24. 24.✍️ In color: blue; which part is the property? (a) ; (b) blue (c) color (d) :
25. 25.True or false: <ol> shows 1, 2, 3 numbers. (a) True (b) False
26. 26.📊 How many cells are in each row?
    <table>
      <tr><td>Papaya</td><td>Papaya</td></tr>
      <tr><td>Grapes</td><td>Guava</td></tr>
      <tr><td>Banana</td><td>Banana</td></tr>
      <tr><td>Mango</td><td>Guava</td></tr>
    </table>
27. 27.🎯 What kind of selector is #main? (a) an id selector (b) an element selector (c) a class selector
28. 28.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
29. 29.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Litchi</td><td>Litchi</td><td>Guava</td></tr>
    </table>
30. 30.🖌️ Which CSS property centres a heading? (a) background-color (b) font-weight (c) text-align (d) font-size
31. 31.Which of these is true of <header>? (a) is the page’s key part (b) sits at the very top (c) holds a side box of tips (d) helps you move around
32. 32.🖼️ How many pixels wide is the picture drawn?
    <img src="moon.png" alt="The full moon" width="150">
33. 33.🔍 Which is the odd one out? (a) sends pages over the net (b) saves our .html files (c) answers page requests (d) stores a website’s files
34. 34.🔠 Which heading shows the BIGGEST text: <h4>, <h2>, <h1> or <h3>? (a) <h2> (b) <h3> (c) <h1> (d) <h4>
35. 35.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    p { color: purple; }
    #top { color: red; } (a) purple (b) white (c) red (d) blue
36. 36.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <p>Hello, world!</p>
    <!-- <p>Good morning!</p> -->
    <!-- <p>My best friend</p> -->
37. 37.🔁 Which word runs code only when something is true? (a) if (b) for (c) let (d) log
38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 50px wide (no margins).
39. 39.📊 Which tag holds the whole table? (a) <caption> (b) <td> (c) <table> (d) <tr>
40. 40.🎯 Which element does the selector #intro style? (a) <li id="intro"> (b) <li id="main"> (c) <div class="star"> (d) <li class="intro">

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