← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 134 · 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.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 6px;
      }
    }
  2. 2.True or false: .menu is a class selector. (a) False (b) True
  3. 3.True or false: <a> goes in the head. (a) False (b) True
  4. 4.🌈 In #00001a the blue part is the hex number 1a. What is it as a normal number?
  5. 5.🧩 Which language rounds box corners? (a) CSS (b) HTML (c) JavaScript
  6. 6.True or false: in <img>, src tells which image to load. (a) True (b) False
  7. 7.📝 Which tag makes a drop-down list? (a) <ol> (b) <select> (c) <li> (d) <ul>
  8. 8.🧭 Which semantic tag holds a side box of tips? (a) <nav> (b) <article> (c) <aside> (d) <main>
  9. 9.🎯 Which element does the selector .star style? (a) <span class="menu"> (b) <p class="note"> (c) <span class="star"> (d) <span id="star">
  10. 10.Which of these is true of a web browser? (a) shows pages from the web (b) answers page requests (c) is where we type code (d) sends pages over the net
  11. 11.🌍 What is the protocol in this URL?
    https://kids.example.org/about.html     (a) kids.example.org (b) http (c) https (d) /about.html
  12. 12.🔁 What does this code print?
    let temp = 48;
    if (temp < 34) {
      console.log("Hot");
    } else {
      console.log("Cool");
    }     (a) Cool (b) Hot
  13. 13.📋 Which list tag is an ordered list? (a) <ol> (b) <li> (c) <ul>
  14. 14.Which colour pair is hard to read? (a) dark grey on white (b) yellow on black (c) light grey on white (d) black on white
  15. 15.🔢 To build and share your first web page, what comes right after “plan what to show”? (a) test in a browser (b) write the HTML (c) add CSS styles (d) publish it online
  16. 16.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      border: 2px solid;
    }
  17. 17.⚖️ What colour is the text of this element?
    <h1 class="star" id="end">Hi</h1>
    CSS:
    h1 { color: purple; }
    #end { color: black; }     (a) black (b) white (c) purple (d) yellow
  18. 18.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      background-color: yellow;
      color: red;
      text-align: center;
    }
  19. 19.True or false: HTML gives the page structure. (a) True (b) False
  20. 20.📋 Which list suits a shopping list in any order? (a) <hr> (b) <ol> (c) <ul> (d) <br>
  21. 21.⚖️ What colour is the text of this element?
    <h1 class="menu" id="intro">Hi</h1>
    CSS:
    h1 { color: purple; }
    .menu { color: green; }
    #intro { color: yellow; }     (a) purple (b) green (c) blue (d) yellow
  22. 22.✍️ What value is given to font-weight in this rule?
    h2 {
      font-style: italic;
      border: 2px solid;
      font-weight: bold;
      color: red;
    }     (a) 300px (b) font-weight (c) bold (d) 2px solid
  23. 23.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
  24. 24.🔢 In a basic web page file, which comes LAST? (a) </head> (b) </body> (c) </html> (d) <!DOCTYPE html>
  25. 25.🎯 Which sign starts a class selector? (a) @ (b) # (c) . (d) &
  26. 26.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 130px;
      padding: 5px;
      border: 3px solid black;
      margin: 0px;
    }
  27. 27.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) has no pictures (d) is only for laptops
  28. 28.True or false: <p> goes in the body. (a) False (b) True
  29. 29.What does justify-content: space-between do? (a) packs boxes at the end (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the start
  30. 30.📝 Which input type is for one line of words? (a) radio (b) submit (c) password (d) text
  31. 31.🎯 Which CSS selector matches this element?
    <p class="big" id="hero">Hello</p>     (a) .big (b) h1 (c) .hero (d) #big
  32. 32.📋 Which list shows the steps of a recipe best? (a) <ol> (b) <hr> (c) <br> (d) <ul>
  33. 33.🔐 Is S0lar!Pen#8 a strong or a weak password? (a) weak (b) strong
  34. 34.💬 How many paragraphs show on the page?
    <!-- <p>Hello, world!</p> -->
    <!-- <p>Our school trip</p> -->
    <p>My best friend</p>
    <!-- <p>Good morning!</p> -->
    <!-- <p>The red kite</p> -->
  35. 35.🌈 Which colour of light is strongest in rgb(4, 156, 122)? (a) red (b) green (c) blue
  36. 36.🌈 Which hex code is red? (a) #000000 (b) #00ff00 (c) #ff0000 (d) #ff00ff
  37. 37.Which of these is a strong password? (a) qwerty (b) 111111 (c) 123456 (d) Rain#Drop_42!
  38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 440px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).
  39. 39.🔡 Are HTML tag names usually written in small letters? (a) No (b) Yes
  40. 40.✍️ What is the selector in this CSS rule?
    #top {
      font-style: italic;
      color: red;
    }     (a) li (b) font-style (c) red (d) #top

Answer key

  1. 6
  2. True
  3. False
  4. 26
  5. CSS
  6. True
  7. <select>
  8. <aside>
  9. <span class="star">
  10. shows pages from the web
  11. https
  12. Cool
  13. <ol>
  14. light grey on white
  15. write the HTML
  16. 1
  17. black
  18. 3
  19. True
  20. <ul>
  21. yellow
  22. bold
  23. Yes
  24. </html>
  25. .
  26. 146
  27. fits every screen
  28. True
  29. equal gaps, none at ends
  30. text
  31. .big
  32. <ol>
  33. strong
  34. 1
  35. green
  36. #ff0000
  37. Rain#Drop_42!
  38. 40
  39. Yes
  40. #top

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