Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 687 · 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 address opens when you click this link?
   <a href="games.html">About us</a> (a) about.html (b) games.html (c) contact.html (d) About us
2. 2.🌍 Which one shows the page to you? (a) the URL (b) the browser (c) HTTPS (d) the server
3. 3.🖌️ Which CSS property makes letters bigger? (a) background-color (b) color (c) font-size (d) font-family
4. 4.Which of these goes in the head? (a) <ul> (b) <meta charset="utf-8"> (c) <table> (d) <p>
5. 5.🔗 Where does this link open?
   <a href="maths.html">School news</a> (a) in the same tab (b) in a new tab
6. 6.🌍 What is the protocol in this URL?
   http://learn.example.com/art/gallery.html (a) learn.example.com (b) /art/gallery.html (c) https (d) http
7. 7.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 140px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 60px wide (no margins).
8. 8.♿ A part of the page is under a <h2> heading. Which tag should its sub-heading use? (a) <h3> (b) <h6> (c) <h1> (d) <h2>
9. 9.💪 Which justify-content value packs boxes at the start? (a) center (b) space-between (c) flex-start (d) flex-end
10. 10.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    }
11. 11.📊 How many cells does this table have in all?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Mango</td><td>Papaya</td><td>Banana</td><td>Jamun</td></tr>
      <tr><td>Mango</td><td>Jamun</td><td>Grapes</td><td>Papaya</td></tr>
    </table>
12. 12.True or false: the browser shows the page to you. (a) False (b) True
13. 13.📝 What does <hr> draw? (a) a table (b) a line across the page (c) a picture (d) a link
14. 14.What does font-family do? (a) makes the text bold (b) picks the font style (c) colours behind the text (d) sets the letter colour
15. 15.True or false: the border is the line round the box. (a) False (b) True
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 30px;
      border: 1px solid black;
      margin: 20px;
    }
17. 17.📄 What is the first line of an HTML5 page? (a) <html> (b) <head> (c) <body> (d) <!DOCTYPE html>
18. 18.⚖️ What colour is the text of this element?
    <h1 class="note" id="logo">Hi</h1>
    CSS:
    .note { color: purple; }
    #logo { color: white; }
    h1 { color: green; } (a) purple (b) green (c) white (d) yellow
19. 19.📦 In the box model, which part is space inside the border? (a) content (b) padding (c) margin (d) border
20. 20.⚡ A JavaScript file usually ends with which extension? (a) .jpg (b) .html (c) .css (d) .js
21. 21.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    p { color: blue; }
    p { color: black; } (a) blue (b) orange (c) black (d) purple
22. 22.True or false: <br> is an empty tag. (a) True (b) False
23. 23.⚡ What does this code print? (Look at the quotes!)
    let x = "7";
    let y = 9;
    console.log(x + y); (a) Error (b) 16 (c) 79
24. 24.🌍 What finds the server for a domain name like example.com? (a) DNS (b) CSS (c) alt (d) HTML
25. 25.✍️ What value is given to width in this rule?
    .note {
      background-color: yellow;
      padding: 8px;
      border: 2px solid;
      width: 300px;
    } (a) 300px (b) italic (c) width (d) red
26. 26.📊 Which tag holds the whole table? (a) <th> (b) <td> (c) <caption> (d) <table>
27. 27.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
28. 28.✍️ What value is given to background-color in this rule?
    h1 {
      background-color: yellow;
      text-align: center;
    } (a) yellow (b) 10px (c) background-color (d) 8px
29. 29.Which of these is true of a web server? (a) shows line numbers (b) opens web pages for us (c) answers page requests (d) is where we type code
30. 30.⚡ What does alert() show? (a) a pop-up box (b) a picture (c) a table (d) a new tab
31. 31.🔢 On a typical page, from top to bottom, which comes FIRST? (a) <main> (b) <header> (c) <footer> (d) <nav>
32. 32.Which of these is a strong password? (a) password (b) qwerty (c) abcd1234 (d) S0lar!Pen#8
33. 33.🔢 On a typical page, from top to bottom, which comes first: “<main>” or “<nav>”? (a) <nav> (b) <main>
34. 34.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) makes it harder (b) helps everyone
35. 35.True or false: <main> is the page’s key part. (a) True (b) False
36. 36.True or false: to post your home address is safe. (a) True (b) False
37. 37.🚀 Which program lets you see your web page while you build it? (a) a web browser (b) a calculator (c) a photo viewer (d) a music player
38. 38.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
39. 39.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 120px;
      padding: 20px;
      border: 1px solid black;
      margin: 15px;
    }
40. 40.🏷️ Every HTML tag starts with which sign? (a) { (b) < (c) ( (d) [

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