← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 717 · 40 questions
TalentJR

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.

NameDateTime takenScore ___ / 40
  1. 1.🌐 Which one colours code to help us? (a) a web browser (b) a code editor (c) a web server
  2. 2.🚀 Which file is best for code that reacts to clicks? (a) script.js (b) style.css (c) index.html (d) notes.txt
  3. 3.💬 How many paragraphs show on the page?
    <p>My best friend</p>
    <!-- <p>Rain today</p> -->
    <p>I love mangoes.</p>
  4. 4.🔗 Which words do you click on?
    <a href="news.html">Visit the site</a>     (a) Maths fun (b) news.html (c) href (d) Visit the site
  5. 5.🔁 Which loop repeats code a set number of times? (a) for (b) else (c) if (d) let
  6. 6.True or false: a web browser opens web pages for us. (a) True (b) False
  7. 7.📋 Which tag goes around each item of a list? (a) <ul> (b) <li> (c) <p> (d) <ol>
  8. 8.📊 How many cells are in each row?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Papaya</td><td>Jamun</td><td>Jamun</td><td>Mango</td></tr>
    </table>
  9. 9.💬 Which text will NOT show on the page?
    <p>Good morning!</p>
    <p>My best friend</p>
    <!-- <p>My pets</p> -->     (a) My best friend (b) My pets (c) Good morning!
  10. 10.🏷️ Which is the closing tag for <small>? (a) <small/> (b) </small> (c) <\small> (d) <small>
  11. 11.True or false: <style> goes in the body. (a) True (b) False
  12. 12.🌍 What is the protocol in this URL?
    https://school.example.in/index.html     (a) /index.html (b) http (c) https (d) school.example.in
  13. 13.🚀 You change your code. What should you do to see the change? (a) switch off the PC (b) rename the folder (c) save and refresh (d) delete the file
  14. 14.True or false: the browser shows the page to you. (a) False (b) True
  15. 15.🔁 When does the else part run? (a) when if is false (b) never (c) when if is true (d) always
  16. 16.⚡ Which JavaScript word runs code when true? (a) alert() (b) console.log() (c) if (d) for
  17. 17.🖌️ What colour are the letters?
    p {
      text-align: center;
      font-size: 24px;
      color: orange;
      background-color: yellow;
    }     (a) orange (b) yellow (c) purple
  18. 18.🔠 Are headings shown in bold by default? (a) No (b) Yes
  19. 19.🔗 Which words do you click on?
    <a href="art.html">Visit the site</a>     (a) href (b) art.html (c) Maths fun (d) Visit the site
  20. 20.Which of these does CSS do? (a) checks a quiz answer (b) rounds box corners (c) makes headings and lists (d) makes a form box
  21. 21.🎨 Which attribute adds CSS inside one tag? (a) style (b) alt (c) href (d) src
  22. 22.True or false: HTML on its own cannot make links to pages. (a) False (b) True
  23. 23.True or false: <input type="number"> takes only numbers. (a) False (b) True
  24. 24.🌈 Which hex code is yellow? (a) #ff0000 (b) #00ffff (c) #ffff00 (d) #000000
  25. 25.⚡ What number does this code print?
    let coins = 13;
    coins = coins + 16;
    coins = coins - 23;
    console.log(coins);
  26. 26.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) turned off (c) exactly 100px (d) 800px or wider
  27. 27.True or false: <caption> gives the table a title. (a) False (b) True
  28. 28.🚀 What is the home page file of a website usually called? (a) index.html (b) home.css (c) main.png (d) start.js
  29. 29.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) black (c) red (d) blue
  30. 30.True or false: <input type="password"> lets you tick many. (a) True (b) False
  31. 31.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }     (a) No (b) Yes
  32. 32.✍️ What is the selector in this CSS rule?
    h2 {
      text-align: center;
      border: 2px solid;
      padding: 8px;
      color: red;
    }     (a) text-align (b) h1 (c) h2 (d) 2px solid
  33. 33.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 160px;
      padding: 5px;
      border: 2px solid black;
      margin: 20px;
    }
  34. 34.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
  35. 35.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    h2 { color: orange; }
    h2 { color: black; }     (a) orange (b) black (c) white (d) blue
  36. 36.📋 What number does the browser show next to “Guava”?
    <ol>
      <li>Grapes</li>
      <li>Litchi</li>
      <li>Guava</li>
      <li>Papaya</li>
      <li>Jamun</li>
    </ol>
  37. 37.⚡ Which JavaScript word repeats code? (a) console.log() (b) for (c) alert() (d) if
  38. 38.⚡ Which word makes a new variable? (a) give (b) let (c) make (d) put
  39. 39.🖌️ How big is the text, in px?
    h1 {
      background-color: white;
      text-align: left;
      font-size: 24px;
      color: black;
    }
  40. 40.📊 Are <th> cells shown bold and centred by default? (a) No (b) Yes

Answer key

  1. a code editor
  2. script.js
  3. 2
  4. Visit the site
  5. for
  6. True
  7. <li>
  8. 4
  9. My pets
  10. </small>
  11. False
  12. https
  13. save and refresh
  14. True
  15. when if is false
  16. if
  17. orange
  18. Yes
  19. Visit the site
  20. rounds box corners
  21. style
  22. False
  23. True
  24. #ffff00
  25. 6
  26. 800px or wider
  27. True
  28. index.html
  29. red
  30. False
  31. No
  32. h2
  33. 174
  34. an id selector
  35. black
  36. 3
  37. for
  38. let
  39. 24
  40. Yes

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