← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 614 · 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.🔁 How many times does this code print “Welcome”?
    for (let i = 1; i < 6; i++) {
      console.log("Welcome");
    }
  2. 2.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Computer Style Sheets (c) Colourful Site Styles (d) Creative Sheet System
  3. 3.✍️ What is the selector in this CSS rule?
    body {
      color: red;
      font-size: 20px;
    }
    (a) color (b) .box (c) body (d) 20px
  4. 4.🌈 Which hex code is bright green? (a) #00ffff (b) #ffff00 (c) #000000 (d) #00ff00
  5. 5.🌍 What is the domain name in this URL?
    http://www.example.com/index.html
    (a) www.example.com (b) kids.example.org (c) /index.html (d) http
  6. 6.💪 Which flexbox property turns on flexbox? (a) align-items (b) justify-content (c) display: flex (d) gap
  7. 7.True or false: HTML makes headings and lists. (a) True (b) False
  8. 8.📝 What does <hr> draw? (a) a line across the page (b) a picture (c) a link (d) a table
  9. 9.True or false: “colour as the only clue” helps everyone use the page. (a) True (b) False
  10. 10.🔍 Which is the odd one out? (a) changes the page live (b) checks a quiz answer (c) makes a form box (d) reacts to a button click
  11. 11.🔠 How many <h1> headings should a page usually have? (a) 3 (b) 1 (c) 10 (d) 6
  12. 12.📋 Which list tag lists steps in order? (a) <li> (b) <ul> (c) <ol>
  13. 13.🎯 Which CSS selector matches this element?
    <p class="note" id="top">Hello</p>
    (a) .big (b) .note (c) h1 (d) #intro
  14. 14.True or false: .big is an element selector. (a) True (b) False
  15. 15.♿ Does this help everyone, or make the page harder to use: colour as the only clue? (a) makes it harder (b) helps everyone
  16. 16.What does font-family do? (a) colours behind the text (b) centres a heading (c) makes the text bold (d) picks the font style
  17. 17.💬 How many paragraphs show on the page?
    <!-- <p>The red kite</p> -->
    <p>Good morning!</p>
    <p>I love mangoes.</p>
    <p>My pets</p>
    <p>Rain today</p>
  18. 18.🔍 Which is the odd one out? (a) makes a link (b) puts a picture on a page (c) makes a form box (d) shows a pop-up message
  19. 19.📄 Can HTML on its own keep a high score? (a) No (b) Yes
  20. 20.🔁 What does this code print?
    let age = 38;
    if (age >= 27) {
      console.log("teen");
    } else {
      console.log("child");
    }
    (a) teen (b) child
  21. 21.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    #intro { color: yellow; }
    #intro { color: black; }
    (a) blue (b) yellow (c) red (d) black
  22. 22.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h4> → <h4>
    (a) No (b) Yes
  23. 23.📋 Which list tag shows 1, 2, 3 numbers? (a) <li> (b) <ol> (c) <ul>
  24. 24.Which of these is true of a code editor? (a) stores a website’s files (b) turns HTML into a page (c) is where we type code (d) opens web pages for us
  25. 25.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Orange</td><td>Litchi</td></tr>
    </table>
  26. 26.📝 How many paragraphs does this code make?
    <p>My best friend</p>
    <p>Fun facts</p>
    <p>I love mangoes.</p>
  27. 27.🌈 Which colour is #ff0000? (a) black (b) red (c) blue (d) cyan
  28. 28.🧭 Which semantic tag holds the logo and title? (a) <aside> (b) <article> (c) <nav> (d) <header>
  29. 29.📊 Are <th> cells shown bold and centred by default? (a) Yes (b) No
  30. 30.🚀 Which file should this code go in: alert(score); (a) script.js (b) style.css (c) index.html
  31. 31.📝 What does <p> make? (a) a picture (b) a paragraph (c) a link (d) a table
  32. 32.🎯 What kind of selector is .big? (a) an element selector (b) a class selector (c) an id selector
  33. 33.Which of these is the border? (a) space inside the border (b) the gap to other boxes (c) space outside the border (d) the line round the box
  34. 34.🌈 Which hex code is white? (a) #ff0000 (b) #ffffff (c) #0000ff (d) #ffff00
  35. 35.📋 Does this list show bullets or numbers?
    <ol>
      <li>Grapes</li>
      <li>Mango</li>
    </ol>
    (a) bullets (b) numbers
  36. 36.📊 In a table, which tag is a row? (a) <th> (b) <td> (c) <tr> (d) <tb>
  37. 37.🔠 How many headings are in this code?
    <h1>Hello, world!</h1>
    <p>I love mangoes.</p>
    <p>Our school trip</p>
    <h2>I love mangoes.</h2>
  38. 38.🌍 Which one scrambles data on its way? (a) the URL (b) the browser (c) the server (d) HTTPS
  39. 39.📊 Which tag makes a heading cell? (a) <td> (b) <caption> (c) <table> (d) <th>
  40. 40.🔍 Which is the odd one out? (a) colours code to help us (b) saves our .html files (c) sends pages over the net (d) is where we type code

Answer key

  1. 5
  2. Cascading Style Sheets
  3. body
  4. #00ff00
  5. www.example.com
  6. display: flex
  7. True
  8. a line across the page
  9. False
  10. makes a form box
  11. 1
  12. <ol>
  13. .note
  14. False
  15. makes it harder
  16. picks the font style
  17. 4
  18. shows a pop-up message
  19. No
  20. teen
  21. black
  22. No
  23. <ol>
  24. is where we type code
  25. 2
  26. 3
  27. red
  28. <header>
  29. Yes
  30. script.js
  31. a paragraph
  32. a class selector
  33. the line round the box
  34. #ffffff
  35. numbers
  36. <tr>
  37. 2
  38. HTTPS
  39. <th>
  40. sends pages over the net

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