Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 796 · 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.🖌️ How big is the text, in px?
   p {
     background-color: blue;
     color: green;
     font-size: 40px;
     text-align: right;
   }
2. 2.Which colour pair is hard to read? (a) light grey on white (b) yellow on black (c) dark grey on white (d) black on white
3. 3.Which of these is true of <nav>? (a) holds extra side notes (b) sits at the very top (c) holds a news story (d) holds the menu of links
4. 4.💪 Which flexbox property lines boxes up across? (a) flex-direction (b) gap (c) align-items (d) justify-content
5. 5.🎯 How many elements on a page should have the same id? (a) 1 (b) 2 (c) 5 (d) any number
6. 6.🔠 Which heading shows the BIGGEST text: <h1>, <h4>, <h2> or <h5>? (a) <h4> (b) <h1> (c) <h5> (d) <h2>
7. 7.🔠 How many <h1> headings should a page usually have? (a) 3 (b) 10 (c) 6 (d) 1
8. 8.🔤 In “HTML”, what do the letters HT stand for? (a) Hot Tags (b) High Tech (c) HyperText (d) Home Text
9. 9.🔠 How many headings are in this code?
   <h1>My pets</h1>
   <p>Hello, world!</p>
   <h4>Cricket is fun.</h4>
10. 10.True or false: <ol> lists things in any order. (a) True (b) False
11. 11.⚡ Which JavaScript word makes a new variable? (a) console.log() (b) let (c) for (d) alert()
12. 12.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 14px;
      }
    }
13. 13.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    }
14. 14.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="fruit"> Mango
      <input type="radio" name="fruit"> Guava
      <input type="radio" name="fruit"> Litchi
    </form>
15. 15.🔗 Which attribute holds the address of a link? (a) src (b) alt (c) id (d) href
16. 16.🖌️ Where does the text sit on its line?
    li {
      text-align: left;
      background-color: purple;
      color: blue;
      font-size: 40px;
    } (a) on the right (b) on the left (c) in the middle
17. 17.True or false: <li> is an unordered list. (a) True (b) False
18. 18.💬 Which text will NOT show on the page?
    <p>Good morning!</p>
    <p>Fun facts</p>
    <!-- <p>I love mangoes.</p> --> (a) I love mangoes. (b) Good morning! (c) Fun facts
19. 19.⚡ What does this code show?
    let name = "Meera";
    alert("Welcome, " + name + "!"); (a) Welcome, name! (b) name (c) Welcome, Meera! (d) Meera
20. 20.🔗 Where does this link open?
    <a href="contact.html" target="_blank">Art corner</a> (a) in a new tab (b) in the same tab
21. 21.True or false: <link rel="stylesheet"> goes in the body. (a) True (b) False
22. 22.🔍 One closing tag is missing. Which one?
    <b>Fun facts</b>
    <h2>My pets
    <h1>My best friend</h1> (a) </h1> (b) </strong> (c) </b> (d) </h2>
23. 23.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the body (b) in the head
24. 24.🔍 One closing tag is missing. Which one?
    <strong>Fun facts
    <small>My best friend</small>
    <u>My pets</u> (a) </strong> (b) </small> (c) </i> (d) </u>
25. 25.⚖️ What colour is the text of this element?
    <h2 class="big" id="hero">Hi</h2>
    CSS:
    .big { color: yellow; }
    .big { color: blue; } (a) yellow (b) red (c) purple (d) blue
26. 26.🔍 Which is the odd one out? (a) reacts to a button click (b) makes headings and lists (c) checks a quiz answer (d) changes the page live
27. 27.Which of these has a closing tag? (a) <br> (b) <title> (c) <img> (d) <meta>
28. 28.⚡ What does this code show?
    let name = "Riya";
    console.log("Well done, " + name + "!"); (a) Well done, name! (b) Well done, Riya! (c) name (d) Riya
29. 29.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) exactly 100px (c) 800px or wider (d) 800px or narrower
30. 30.📦 In the box model, which part is the gap to other boxes? (a) border (b) padding (c) margin (d) content
31. 31.🌍 What is the path in this URL?
    https://www.example.com/maths/tables.html (a) /maths/tables.html (b) /index.html (c) www.example.com (d) https
32. 32.🔍 One closing tag is missing. Which one?
    <em>Good morning!
    <h3>Hello, world!</h3>
    <strong>Fun facts</strong> (a) </strong> (b) </h3> (c) </h1> (d) </em>
33. 33.📝 How many paragraphs does this code make?
    <p>Cricket is fun.</p>
    <h2>Our school trip</h2>
    <h2>Hello, world!</h2>
34. 34.📝 On how many lines does the browser show this paragraph?
    <p>Sky is blue<br>Roses are red<br>Kites fly high<br>Stars shine</p>
35. 35.🌍 What is the protocol in this URL?
    https://school.example.in/maths/tables.html (a) http (b) /maths/tables.html (c) https (d) school.example.in
36. 36.🎨 Which tag holds CSS inside the head? (a) <css> (b) <script> (c) <style> (d) <body>
37. 37.⚡ Which tag holds JavaScript in a page? (a) <style> (b) <script> (c) <code> (d) <js>
38. 38.🖌️ Where does the text sit on its line?
    p {
      text-align: right;
      font-size: 28px;
      color: green;
      background-color: red;
    } (a) in the middle (b) on the left (c) on the right
39. 39.🔐 Is iloveyou a strong or a weak password? (a) weak (b) strong
40. 40.📊 How many cells are in each row?
    <table>
      <tr><td>Banana</td><td>Banana</td></tr>
      <tr><td>Mango</td><td>Litchi</td></tr>
      <tr><td>Papaya</td><td>Guava</td></tr>
    </table>

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