Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 622 · 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 JavaScript word shows a pop-up box? (a) for (b) if (c) alert() (d) let
2. 2.True or false: <input type="date"> lets you tick many. (a) True (b) False
3. 3.True or false: padding is space inside the border. (a) True (b) False
4. 4.🌈 Which colour is rgb(255, 255, 0)? (a) bright green (b) yellow (c) blue (d) white
5. 5.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 16px;
     }
   }
6. 6.✍️ What is the selector in this CSS rule?
   p {
     font-size: 20px;
     margin: 10px;
     font-style: italic;
   } (a) font-size (b) p (c) .note (d) 10px
7. 7.🎯 Can many elements share the same class? (a) Yes (b) No
8. 8.📦 In the box model, which part is space outside the border? (a) margin (b) border (c) padding (d) content
9. 9.📊 Which tag gives the table a title? (a) <caption> (b) <tr> (c) <table> (d) <th>
10. 10.🧭 How many <main> parts should a page have? (a) none (b) ten (c) one (d) three
11. 11.🔁 What does this code print?
    let marks = 9;
    if (marks > 44) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Pass (b) Try again
12. 12.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
13. 13.True or false: <ol> shows 1, 2, 3 numbers. (a) True (b) False
14. 14.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) gap (c) display: flex (d) justify-content
15. 15.🎯 Which element does the selector h1 style? (a) <h1 class="note"> (b) <div id="logo"> (c) <li class="note"> (d) <h2>
16. 16.🎨 Which tag holds CSS inside the head? (a) <css> (b) <script> (c) <body> (d) <style>
17. 17.Which of these goes in the head? (a) <ul> (b) <link rel="stylesheet"> (c) <p> (d) <table>
18. 18.📄 Where does <title> go: in the head or in the body? (a) in the head (b) in the body
19. 19.Which of these is the border? (a) the text or picture (b) space inside the border (c) the gap round content (d) a solid or dotted edge
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      width: 300px;
      font-size: 20px;
      color: red;
    }
21. 21.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 260px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 80px wide (no margins).
22. 22.True or false: img is a class selector. (a) True (b) False
23. 23.📝 How many paragraphs does this code make?
    <p>My best friend</p>
    <p>Rain today</p>
    <p>My best friend</p>
24. 24.What does color do? (a) makes letters bigger (b) sets the letter colour (c) picks the font style (d) colours behind the text
25. 25.🔗 What does target="_blank" do to a link? (a) hides the link (b) opens it in a new tab (c) makes it blank (d) makes it bold
26. 26.🖼️ How many pixels wide is the picture drawn?
    <img src="tiger.jpg" alt="A tiger asleep" width="150">
27. 27.🎯 Which element does the selector .big style? (a) <div class="red"> (b) <div class="big"> (c) <span class="box"> (d) <div id="big">
28. 28.What is <input type="date"> for? (a) is for an email address (b) hides what you type (c) lets you tick many (d) picks a day
29. 29.📝 How many <input> tags are in this form?
    <form>
      <input type="date">
      <input type="email">
      <input type="number">
      <input type="submit" value="Send">
    </form>
30. 30.🖌️ How big is the text, in px?
    li {
      background-color: blue;
      font-size: 24px;
      text-align: left;
      color: white;
    }
31. 31.📊 Which tag makes one data cell? (a) <th> (b) <td> (c) <table> (d) <tr>
32. 32.🔠 Which tag is the least important heading? (a) <p> (b) <h1> (c) <h3> (d) <h6>
33. 33.🌍 What finds the server for a domain name like example.com? (a) CSS (b) DNS (c) HTML (d) alt
34. 34.⚖️ What colour is the text of this element?
    <h1 class="red" id="end">Hi</h1>
    CSS:
    #end { color: orange; }
    h1 { color: white; } (a) blue (b) yellow (c) white (d) orange
35. 35.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
36. 36.⚖️ What colour is the text of this element?
    <p class="big" id="main">Hi</p>
    CSS:
    #main { color: blue; }
    p { color: green; } (a) red (b) black (c) blue (d) green
37. 37.🔍 Which is the odd one out? (a) has an address bar (b) shows line numbers (c) shows pages from the web (d) opens web pages for us
38. 38.🎯 Which CSS selector matches this element?
    <div class="box" id="main">Hello</div> (a) .star (b) #box (c) #logo (d) .box
39. 39.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
40. 40.🖌️ Which CSS property sets the letter colour? (a) color (b) font-weight (c) text-align (d) font-size

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