Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 166 · 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 input type is for an email address? (a) password (b) number (c) email (d) date
2. 2.True or false: <footer> holds copyright notes. (a) False (b) True
3. 3.🖼️ How many pixels wide is the picture drawn?
   <img src="kite.png" alt="A red kite" width="350">
4. 4.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 290px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 80px wide (no margins).
5. 5.Which of these is true of a code editor? (a) stores a website’s files (b) has an address bar (c) is where we type code (d) shows pages from the web
6. 6.🌍 Which one sends the page back? (a) the URL (b) the server (c) the browser (d) HTTPS
7. 7.What does text-align do? (a) picks the font style (b) sets the letter colour (c) centres a heading (d) colours behind the text
8. 8.📄 Where does <img> go: in the head or in the body? (a) in the head (b) in the body
9. 9.🔗 Which words do you click on?
   <a href="contact.html">Visit the site</a> (a) Visit the site (b) Maths fun (c) href (d) contact.html
10. 10.🖼️ Which picture file does the browser load?
    <img src="cake.jpg" alt="Birthday cake" width="250"> (a) Birthday cake (b) moon.png (c) cake.jpg (d) dog.jpg
11. 11.⚖️ What colour is the text of this element?
    <p class="menu" id="top">Hi</p>
    CSS:
    p { color: blue; }
    p { color: black; } (a) black (b) blue (c) green (d) purple
12. 12.🔗 What does HyperText mean? (a) very big text (b) text with links (c) text in colour (d) secret text
13. 13.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 12px;
      }
    } (a) Yes (b) No
14. 14.🖼️ Why do we add alt text to an image? (a) to load it faster (b) to make it bigger (c) to colour it (d) to describe the image
15. 15.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
16. 16.🌈 Which colour of light is strongest in rgb(86, 82, 211)? (a) green (b) blue (c) red
17. 17.🔍 Which is the odd one out? (a) makes a form box (b) counts down a timer (c) changes the page live (d) checks a quiz answer
18. 18.Which of these goes in the body? (a) <style> (b) <h1> (c) <title> (d) <meta charset="utf-8">
19. 19.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="200"> (a) fort.jpg (b) kite.png (c) tiger.jpg (d) An old fort
20. 20.🔍 Which is the odd one out? (a) opens web pages for us (b) shows pages from the web (c) turns HTML into a page (d) shows line numbers
21. 21.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    } (a) Yes (b) No
22. 22.🔐 Is iloveyou a strong or a weak password? (a) weak (b) strong
23. 23.True or false: body is an element selector. (a) False (b) True
24. 24.⚡ What does this code print? (Look at the quotes!)
    let x = "1";
    let y = 8;
    console.log(x + y); (a) Error (b) 9 (c) 18
25. 25.⚡ What number does this code print?
    let a = 55;
    let b = 28;
    console.log(a + b);
26. 26.⚖️ What colour is the text of this element?
    <h2 class="star" id="intro">Hi</h2>
    CSS:
    #intro { color: white; }
    #intro { color: yellow; } (a) purple (b) white (c) yellow (d) blue
27. 27.True or false: <article> holds one blog post. (a) False (b) True
28. 28.🏷️ Which is the closing tag for <u>? (a) <u/> (b) </u> (c) <\u> (d) <u>
29. 29.🔐 Is Mango#Kite29! a strong or a weak password? (a) strong (b) weak
30. 30.📝 How many <input> tags are in this form?
    <form>
      <input type="password">
      <input type="date">
      <input type="number">
      <input type="submit" value="Send">
    </form>
31. 31.📋 What number does the browser show next to “Mango”?
    <ol start="9">
      <li>Grapes</li>
      <li>Mango</li>
      <li>Banana</li>
      <li>Guava</li>
      <li>Papaya</li>
    </ol>
32. 32.🎯 Which CSS selector matches this element?
    <h2 class="box" id="end">Hello</h2> (a) h2 (b) #box (c) li (d) .end
33. 33.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
34. 34.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      border: 2px solid;
    }
35. 35.🔗 Where does this link open?
    <a href="about.html">School news</a> (a) in the same tab (b) in a new tab
36. 36.True or false: <p> is an empty tag. (a) True (b) False
37. 37.What is <input type="date"> for? (a) hides what you type (b) picks a day (c) lets you tick many (d) takes only numbers
38. 38.🔍 Which is the odd one out? (a) is where we type code (b) saves our .html files (c) colours code to help us (d) has an address bar
39. 39.True or false: <ol> is an ordered list. (a) True (b) False
40. 40.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) ; (d) :

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