Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 237 · 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.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) turned off (d) 600px or narrower
2. 2.Which of these is a closing tag? (a) <h1> (b) <p> (c) <title> (d) </body>
3. 3.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 260px;
     justify-content: space-between;
   }
   Inside are 3 boxes, each 40px wide (no margins).
4. 4.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) makes it harder (b) helps everyone
5. 5.Which colour pair is hard to read? (a) white on dark blue (b) light grey on white (c) dark grey on white (d) white on black
6. 6.Which of these is an empty tag? (a) <ul> (b) <input> (c) <title> (d) <p>
7. 7.📊 Are <th> cells shown bold and centred by default? (a) No (b) Yes
8. 8.📋 How many items does this list show?
   <ol>
     <li>Mango</li>
     <li>Jamun</li>
     <li>Orange</li>
     <li>Litchi</li>
   </ol>
9. 9.📝 Which tag holds a whole form? (a) <input> (b) <table> (c) <ol> (d) <form>
10. 10.⚡ Which word makes a new variable? (a) let (b) make (c) put (d) give
11. 11.⚡ Where does console.log() show its output? (a) on the title bar (b) on the printer (c) in the console (d) in the address bar
12. 12.📋 What number does the browser show next to “Jamun”?
    <ol start="4">
      <li>Litchi</li>
      <li>Orange</li>
      <li>Jamun</li>
    </ol>
13. 13.🚀 Which file should this code go in: let score = 0; (a) script.js (b) style.css (c) index.html
14. 14.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 130px;
      padding: 15px;
      border: 5px solid black;
      margin: 10px;
    }
15. 15.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 25px;
      border: 2px solid black;
      margin: 10px;
    }
16. 16.True or false: <ul> goes in the body. (a) True (b) False
17. 17.📋 How many items does this list show?
    <ol>
      <li>Jamun</li>
      <li>Litchi</li>
      <li>Papaya</li>
      <li>Grapes</li>
      <li>Banana</li>
      <li>Guava</li>
    </ol>
18. 18.⚡ Which JavaScript word shows a pop-up box? (a) console.log() (b) for (c) if (d) alert()
19. 19.📝 Does <hr> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
20. 20.True or false: #end is an id selector. (a) False (b) True
21. 21.🔒 Is the connection to this address scrambled (encrypted)?
    https://kids.example.org/index.html (a) Yes (b) No
22. 22.🖌️ What colour are the letters?
    p {
      color: black;
      background-color: purple;
      font-size: 28px;
      text-align: right;
    } (a) purple (b) black (c) red
23. 23.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the later one (d) the shorter one
24. 24.🔢 When you open a web page, what comes right after “the browser asks it”? (a) you type the URL (b) the server sends files (c) DNS finds the server (d) the browser shows it
25. 25.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
26. 26.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
27. 27.True or false: in <img>, alt sets how tall it is. (a) True (b) False
28. 28.🖌️ What colour are the letters?
    h1 {
      font-size: 36px;
      background-color: blue;
      color: green;
      text-align: center;
    } (a) blue (b) green (c) orange
29. 29.🌈 Which colour is rgb(0, 0, 0)? (a) white (b) cyan (c) yellow (d) black
30. 30.True or false: <input> is an empty tag. (a) False (b) True
31. 31.🔠 Which heading shows the SMALLEST text: <h1>, <h4>, <h2> or <h6>? (a) <h1> (b) <h4> (c) <h6> (d) <h2>
32. 32.⚖️ What colour is the text of this element?
    <p class="big" id="main">Hi</p>
    CSS:
    #main { color: blue; }
    #main { color: white; } (a) black (b) white (c) blue (d) orange
33. 33.🏷️ Is <h1> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
34. 34.📄 What is the first line of an HTML5 page? (a) <head> (b) <!DOCTYPE html> (c) <body> (d) <html>
35. 35.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <p>The red kite</p>
    <h3>Our school trip</h3>
    <h4>I love mangoes.</h4>
36. 36.📋 What number does the browser show next to “Jamun”?
    <ol>
      <li>Litchi</li>
      <li>Papaya</li>
      <li>Grapes</li>
      <li>Mango</li>
      <li>Jamun</li>
    </ol>
37. 37.⚖️ What colour is the text of this element?
    <p class="menu" id="top">Hi</p>
    CSS:
    #top { color: white; }
    .menu { color: blue; } (a) yellow (b) red (c) white (d) blue
38. 38.🏷️ Which is the closing tag for <small>? (a) <\small> (b) <small> (c) </small> (d) <small/>
39. 39.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
40. 40.🖼️ Which attribute of <img> sets how tall it is? (a) width (b) alt (c) src (d) height

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