Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 57 · 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 attribute of <img> tells which image to load? (a) width (b) src (c) height (d) alt
2. 2.⚡ Which JavaScript word writes in the console? (a) for (b) alert() (c) if (d) console.log()
3. 3.🔍 One closing tag is missing. Which one?
   <h2>My best friend</h2>
   <h3>Hello, world!
   <b>Fun facts</b> (a) </b> (b) </h3> (c) </i> (d) </h2>
4. 4.🖌️ Where does the text sit on its line?
   p {
     color: red;
     font-size: 20px;
     background-color: green;
     text-align: left;
   } (a) on the left (b) on the right (c) in the middle
5. 5.True or false: <style> goes in the body. (a) True (b) False
6. 6.🔡 Are HTML tag names usually written in small letters? (a) No (b) Yes
7. 7.🔗 Which address opens when you click this link?
   <a href="about.html">Contact us</a> (a) about.html (b) Contact us (c) contact.html (d) https://example.com
8. 8.🧩 Which language makes a form box? (a) HTML (b) CSS (c) JavaScript
9. 9.⚡ What number does this code print?
   let a = 7;
   let b = 8;
   console.log(a * b);
10. 10.🔍 Which line is missing its closing tag?
    line 1: <em>My best friend
    line 2: <strong>Our school trip</strong>
    line 3: <h3>My pets</h3> (a) line 2 (b) line 3 (c) line 1
11. 11.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Grapes</td><td>Litchi</td><td>Mango</td></tr>
      <tr><td>Orange</td><td>Mango</td><td>Guava</td></tr>
      <tr><td>Mango</td><td>Banana</td><td>Jamun</td></tr>
    </table>
12. 12.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) center (c) flex-start (d) space-between
13. 13.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
14. 14.True or false: <ul> goes in the head. (a) True (b) False
15. 15.🛡️ Online: is it safe to log out on shared PCs? (a) safe (b) not safe
16. 16.True or false: <img> goes in the body. (a) True (b) False
17. 17.True or false: <li> is an empty tag. (a) True (b) False
18. 18.🖌️ How big is the text, in px?
    p {
      color: red;
      background-color: green;
      font-size: 32px;
      text-align: left;
    }
19. 19.🖌️ What colour are the letters?
    p {
      background-color: orange;
      font-size: 16px;
      color: purple;
      text-align: center;
    } (a) orange (b) white (c) purple
20. 20.🌈 Which hex code is bright green? (a) #ff00ff (b) #00ffff (c) #ffffff (d) #00ff00
21. 21.💬 Which text will NOT show on the page?
    <!-- <p>Rain today</p> -->
    <p>Hello, world!</p>
    <p>Good morning!</p>
    <p>Our school trip</p> (a) Rain today (b) Our school trip (c) Good morning! (d) Hello, world!
22. 22.Which of these does CSS do? (a) gives the page structure (b) makes a link (c) lays out the page (d) puts a picture on a page
23. 23.True or false: <hr> is an empty tag. (a) False (b) True
24. 24.📊 Which tag gives the table a title? (a) <table> (b) <caption> (c) <th> (d) <td>
25. 25.📋 Which list tag is one item of a list? (a) <ul> (b) <li> (c) <ol>
26. 26.✍️ What value is given to background-color in this rule?
    body {
      background-color: yellow;
      margin: 10px;
    } (a) background-color (b) yellow (c) 10px (d) 8px
27. 27.📊 Where do <td> cells go? (a) inside a <p> (b) inside a <li> (c) inside the <head> (d) inside a <tr>
28. 28.🌈 Which colour is #00ff00? (a) red (b) white (c) bright green (d) black
29. 29.🌍 What do we call the computer that stores a website? (a) a server (b) a keyboard (c) a mouse (d) a printer
30. 30.🔠 Which heading shows the BIGGEST text: <h6>, <h5>, <h4> or <h3>? (a) <h4> (b) <h6> (c) <h3> (d) <h5>
31. 31.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 480px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).
32. 32.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    }
33. 33.What does text-align do? (a) makes letters bigger (b) centres a heading (c) sets the letter colour (d) colours behind the text
34. 34.🔗 Which words do you click on?
    <a href="about.html">Maths fun</a> (a) about.html (b) Art corner (c) Maths fun (d) href
35. 35.🔢 In a basic web page file, which comes first: “<!DOCTYPE html>” or “<head>”? (a) <head> (b) <!DOCTYPE html>
36. 36.♿ Does this help everyone, or make the page harder to use: link text “click here”? (a) helps everyone (b) makes it harder
37. 37.What does background-color do? (a) centres a heading (b) sets the letter colour (c) makes letters bigger (d) colours behind the text
38. 38.🌐 Which one turns HTML into a page? (a) a code editor (b) a web server (c) a web browser
39. 39.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) puts boxes in the middle (d) equal gaps, none at ends
40. 40.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as 5 spaces (b) as a dot (c) as one space (d) as a new line

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