Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 366 · 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 words do you click on?
   <a href="quiz.html">Take the quiz</a> (a) href (b) Play games (c) Take the quiz (d) quiz.html
2. 2.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the viewport meta tag (d) the br tag
3. 3.🎨 Which tag holds CSS inside the head? (a) <css> (b) <style> (c) <body> (d) <script>
4. 4.⚡ What does this code show?
   let name = "Riya";
   alert("Welcome, " + name + "!"); (a) Welcome, name! (b) name (c) Riya (d) Welcome, Riya!
5. 5.🚀 Where in index.html does the link to style.css go? (a) in the head (b) in the footer (c) after </html> (d) inside a <p>
6. 6.🔍 Which line is missing its closing tag?
   line 1: <i>My pets</i>
   line 2: <h3>Hello, world!</h3>
   line 3: <b>I love mangoes. (a) line 1 (b) line 2 (c) line 3
7. 7.🏷️ Which is the closing tag for <b>? (a) <\b> (b) <b/> (c) </b> (d) <b>
8. 8.📝 Does <ul> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
9. 9.🔗 Which tag makes a clickable link? (a) <link> (b) <a> (c) <img> (d) <p>
10. 10.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
11. 11.True or false: .box { padding: 8px; } goes in index.html. (a) False (b) True
12. 12.⚖️ What colour is the text of this element?
    <p class="red" id="hero">Hi</p>
    CSS:
    .red { color: green; }
    #hero { color: red; }
    p { color: yellow; } (a) yellow (b) red (c) green (d) black
13. 13.True or false: <br> is an empty tag. (a) False (b) True
14. 14.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
15. 15.True or false: <li> is one item of a list. (a) False (b) True
16. 16.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
17. 17.🎨 A CSS file usually ends with which extension? (a) .png (b) .html (c) .css (d) .js
18. 18.True or false: <ol> lists steps in order. (a) True (b) False
19. 19.📊 Are <th> cells shown bold and centred by default? (a) Yes (b) No
20. 20.🔁 How many times does this code print “Hello”?
    for (let i = 2; i <= 4; i++) {
      console.log("Hello");
    }
21. 21.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Papaya</td><td>Banana</td><td>Guava</td><td>Grapes</td></tr>
    </table>
22. 22.♿ A part of the page is under a <h5> heading. Which tag should its sub-heading use? (a) <h6> (b) <h5> (c) <h1> (d) <h2>
23. 23.🖌️ How big is the text, in px?
    h2 {
      color: green;
      font-size: 40px;
      background-color: yellow;
      text-align: center;
    }
24. 24.🔗 Which attribute holds the address of a link? (a) href (b) alt (c) src (d) id
25. 25.♿ Which link text is clearest? (a) here (b) Read the fruit facts (c) click here (d) link
26. 26.🌍 Which one stores the site’s files? (a) HTTPS (b) the URL (c) the browser (d) the server
27. 27.🧭 Is <nav> semantic or not semantic? (a) not semantic (b) semantic
28. 28.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 50px wide (no margins).
29. 29.🔍 Which is the odd one out? (a) opens web pages for us (b) turns HTML into a page (c) stores a website’s files (d) shows pages from the web
30. 30.📝 Which input type lets you pick only one? (a) text (b) number (c) password (d) radio
31. 31.🛡️ Online: is it safe to download from pop-ups? (a) not safe (b) safe
32. 32.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>My drawings</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) Mars is red. (b) body (c) My Hobbies (d) My drawings
33. 33.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    }
34. 34.🧩 Which language puts a picture on a page? (a) CSS (b) JavaScript (c) HTML
35. 35.What does justify-content: flex-start do? (a) packs boxes at the end (b) puts boxes in the middle (c) packs boxes at the start (d) equal gaps, none at ends
36. 36.⚡ Which JavaScript word writes in the console? (a) alert() (b) let (c) console.log() (d) for
37. 37.🌐 Which one has an address bar? (a) a web browser (b) a web server (c) a code editor
38. 38.Which of these is padding? (a) space outside the border (b) space inside the border (c) a solid or dotted edge (d) the text or picture
39. 39.What is <input type="radio"> for? (a) picks a day (b) lets you pick only one (c) is for one line of words (d) hides what you type
40. 40.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>All about me</h1>
      <p>Here is my best one.</p>
    </body>
    </html> (a) index.html (b) All about me (c) My Hobbies (d) Here is my best one.

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