Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 47 · 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 tag holds JavaScript in a page? (a) <script> (b) <code> (c) <style> (d) <js>
2. 2.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 90px;
     padding: 5px;
     border: 4px solid black;
     margin: 0px;
   }
3. 3.🎯 Which element does the selector .box style? (a) <p class="box"> (b) <p id="box"> (c) <p class="star"> (d) <h1 class="menu">
4. 4.💬 Which text will NOT show on the page?
   <p>Good morning!</p>
   <!-- <p>Our school trip</p> -->
   <p>The red kite</p> (a) Our school trip (b) The red kite (c) Good morning!
5. 5.🖼️ How many pixels wide is the picture drawn?
   <img src="fort.jpg" alt="An old fort" width="100">
6. 6.🔢 To build and share your first web page, which comes LAST? (a) add CSS styles (b) plan what to show (c) publish it online (d) write the HTML
7. 7.🔗 Which code links to about.html? (a) <a href="about.html"> (b) <a alt="about.html"> (c) <a src="about.html"> (d) <link about.html>
8. 8.🧭 Is <nav> semantic or not semantic? (a) not semantic (b) semantic
9. 9.🖼️ Which attribute of <img> tells which image to load? (a) alt (b) src (c) width (d) height
10. 10.📊 How many cells does this table have in all?
    <table>
      <tr><td>Jamun</td><td>Guava</td><td>Mango</td></tr>
      <tr><td>Jamun</td><td>Banana</td><td>Mango</td></tr>
      <tr><td>Mango</td><td>Grapes</td><td>Orange</td></tr>
      <tr><td>Grapes</td><td>Guava</td><td>Mango</td></tr>
    </table>
11. 11.🖌️ Where does the text sit on its line?
    h1 {
      text-align: center;
      font-size: 28px;
      background-color: blue;
      color: green;
    } (a) in the middle (b) on the right (c) on the left
12. 12.🎯 What kind of selector is p? (a) an id selector (b) an element selector (c) a class selector
13. 13.🔁 Which word runs code only when something is true? (a) log (b) let (c) if (d) for
14. 14.🔗 Which attribute holds the address of a link? (a) alt (b) id (c) src (d) href
15. 15.True or false: <td> makes one data cell. (a) True (b) False
16. 16.✍️ What is the selector in this CSS rule?
    body {
      font-size: 20px;
      font-style: italic;
    } (a) .box (b) italic (c) font-size (d) body
17. 17.✍️ What is the selector in this CSS rule?
    p {
      font-size: 20px;
      background-color: yellow;
    } (a) yellow (b) p (c) .note (d) font-size
18. 18.📝 Does <meta> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
19. 19.📝 Does <title> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
20. 20.📝 How many paragraphs does this code make?
    <p>My best friend</p>
    <h2>I love mangoes.</h2>
    <h2>I love mangoes.</h2>
    <h2>Good morning!</h2>
21. 21.Which of these is an opening tag? (a) </h1> (b) </p> (c) <body> (d) </b>
22. 22.📋 What number does the browser show next to “Jamun”?
    <ol>
      <li>Papaya</li>
      <li>Orange</li>
      <li>Mango</li>
      <li>Jamun</li>
      <li>Grapes</li>
    </ol>
23. 23.✍️ What is the selector in this CSS rule?
    p {
      background-color: yellow;
      text-align: center;
    } (a) background-color (b) p (c) .note (d) center
24. 24.Which of these has a closing tag? (a) <hr> (b) <h1> (c) <meta> (d) <input>
25. 25.⚡ What does this code print? (Look at the quotes!)
    let x = "5";
    let y = 2;
    console.log(x + y); (a) 52 (b) Error (c) 7
26. 26.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    p { color: green; }
    #top { color: red; } (a) purple (b) green (c) black (d) red
27. 27.📄 What is the first line of an HTML5 page? (a) <head> (b) <body> (c) <!DOCTYPE html> (d) <html>
28. 28.⚡ What number does this code print?
    let marks = 18;
    marks = marks + 17;
    marks = marks - 9;
    console.log(marks);
29. 29.🎯 What kind of selector is #logo? (a) an element selector (b) a class selector (c) an id selector
30. 30.Which of these is safe to do online? (a) download from pop-ups (b) log out on shared PCs (c) meet an online stranger (d) click prize links
31. 31.🔍 Which is the odd one out? (a) rounds box corners (b) sets colours and fonts (c) changes the text size (d) puts a picture on a page
32. 32.True or false: <p>Hello!</p> goes in style.css. (a) True (b) False
33. 33.Which of these is margin? (a) the gap to other boxes (b) the gap round content (c) space inside the border (d) a solid or dotted edge
34. 34.🔢 In a basic web page file, which comes FIRST? (a) </body> (b) <head> (c) </head> (d) <!DOCTYPE html>
35. 35.🎨 What does CSS stand for? (a) Creative Sheet System (b) Cascading Style Sheets (c) Colourful Site Styles (d) Computer Style Sheets
36. 36.True or false: <title> goes in the head. (a) False (b) True
37. 37.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 12px;
      }
    }
38. 38.📄 Which part holds everything you see on the page? (a) the head (b) the title (c) the doctype (d) the body
39. 39.True or false: margin is the gap to other boxes. (a) False (b) True
40. 40.✍️ What value is given to text-align in this rule?
    .note {
      text-align: center;
      background-color: yellow;
    } (a) center (b) 10px (c) yellow (d) text-align

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