← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 184 · 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 paragraphs show on the page?
    <!-- <p>Cricket is fun.</p> -->
    <p>I love mangoes.</p>
    <p>Our school trip</p>
  2. 2.⚖️ 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
  3. 3.🔗 Which tag makes a clickable link? (a) <img> (b) <p> (c) <a> (d) <link>
  4. 4.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
  5. 5.🎯 Which CSS selector matches this element?
    <div class="note" id="intro">Hello</div>
    (a) #main (b) span (c) div (d) .big
  6. 6.True or false: <ul><li>Art</li></ul> goes in index.html. (a) True (b) False
  7. 7.🎯 Can many elements share the same class? (a) Yes (b) No
  8. 8.🔗 Where does this link open?
    <a href="https://example.com" target="_blank">School news</a>
    (a) in the same tab (b) in a new tab
  9. 9.📝 Which input type is for one line of words? (a) checkbox (b) number (c) text (d) radio
  10. 10.What does justify-content: flex-end do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
  11. 11.🔠 How many heading levels does HTML have? (a) 4 (b) 3 (c) 6 (d) 10
  12. 12.⚡ What does this code show?
    let name = "Zoya";
    alert("Hello, " + name + "!");
    (a) Zoya (b) Hello, name! (c) name (d) Hello, Zoya!
  13. 13.🔍 Which is the odd one out? (a) saves our .html files (b) stores a website’s files (c) colours code to help us (d) shows line numbers
  14. 14.🖼️ How many pixels wide is the picture drawn?
    <img src="tiger.jpg" alt="A tiger asleep" width="250">
  15. 15.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 2 (c) 6 (d) 3
  16. 16.🌍 What is the path in this URL?
    http://www.example.net/about.html
    (a) http (b) www.example.net (c) /maths/tables.html (d) /about.html
  17. 17.💪 Which flexbox property spaces boxes along a row? (a) align-items (b) gap (c) display: flex (d) justify-content
  18. 18.🔁 Which loop repeats code a set number of times? (a) if (b) else (c) let (d) for
  19. 19.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>Our school trip</p> -->
    <p>Good morning!</p>
    <!-- <p>Fun facts</p> -->
  20. 20.🔍 Which is the odd one out? (a) puts a picture on a page (b) checks a quiz answer (c) counts down a timer (d) changes the page live
  21. 21.🔠 Which heading shows the BIGGEST text: <h6>, <h4>, <h5> or <h2>? (a) <h6> (b) <h2> (c) <h4> (d) <h5>
  22. 22.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 380px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
  23. 23.Which of these is safe to do online? (a) meet an online stranger (b) post your home address (c) use a strong password (d) type a password on http
  24. 24.📋 Which tag goes around each item of a list? (a) <p> (b) <li> (c) <ul> (d) <ol>
  25. 25.📱 What does a media query check? (a) the time of day (b) the screen width (c) the battery level (d) the page title
  26. 26.🌈 Which hex code is magenta? (a) #ffff00 (b) #000000 (c) #ff00ff (d) #00ffff
  27. 27.Which of these is a weak password? (a) Kite_Fl1es@Dawn (b) Rain#Drop_42! (c) S0lar!Pen#8 (d) password
  28. 28.Which of these is true of a web server? (a) sends pages over the net (b) shows line numbers (c) shows pages from the web (d) colours code to help us
  29. 29.🧩 Which language makes headings and lists? (a) CSS (b) HTML (c) JavaScript
  30. 30.What does background-color do? (a) picks the font style (b) colours behind the text (c) centres a heading (d) sets the letter colour
  31. 31.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
  32. 32.♿ Who uses a screen reader? (a) only robots (b) only teachers (c) people who are blind (d) only coders
  33. 33.🔢 To build and share your first web page, what comes right after “add CSS styles”? (a) plan what to show (b) publish it online (c) test in a browser (d) write the HTML
  34. 34.🔢 On a typical page, from top to bottom, which comes first: “<nav>” or “<main>”? (a) <nav> (b) <main>
  35. 35.🚀 You change your code. What should you do to see the change? (a) rename the folder (b) switch off the PC (c) save and refresh (d) delete the file
  36. 36.🌈 Which colour is #0000ff? (a) blue (b) red (c) white (d) magenta
  37. 37.📋 Does this list show bullets or numbers?
    <ul>
      <li>Litchi</li>
      <li>Guava</li>
    </ul>
    (a) bullets (b) numbers
  38. 38.⚡ What does this code show?
    let name = "Riya";
    console.log("Welcome, " + name + "!");
    (a) Riya (b) Welcome, Riya! (c) Welcome, name! (d) name
  39. 39.Which of these is not safe to do online? (a) keep passwords secret (b) use a nickname in games (c) put secrets in comments (d) tell a trusted adult
  40. 40.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 10; i = i + 3) {
      console.log(i);
    }

Answer key

  1. 2
  2. the later one
  3. <a>
  4. 50
  5. div
  6. True
  7. Yes
  8. in a new tab
  9. text
  10. packs boxes at the end
  11. 6
  12. Hello, Zoya!
  13. stores a website’s files
  14. 250
  15. 3
  16. /about.html
  17. justify-content
  18. for
  19. 1
  20. puts a picture on a page
  21. <h2>
  22. 20
  23. use a strong password
  24. <li>
  25. the screen width
  26. #ff00ff
  27. password
  28. sends pages over the net
  29. HTML
  30. colours behind the text
  31. equal gaps, none at ends
  32. people who are blind
  33. test in a browser
  34. <nav>
  35. save and refresh
  36. blue
  37. bullets
  38. Welcome, Riya!
  39. put secrets in comments
  40. 9

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