Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 584 · 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.🌗 Is yellow on white easy or hard to read? (a) easy to read (b) hard to read
2. 2.True or false: p is an element selector. (a) False (b) True
3. 3.💪 Which flexbox property lines boxes up across? (a) flex-direction (b) display: flex (c) align-items (d) gap
4. 4.True or false: li is a class selector. (a) False (b) True
5. 5.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 170px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 40px wide (no margins).
6. 6.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
7. 7.🔗 Where does this link open?
   <a href="games.html" target="_blank">Take the quiz</a> (a) in the same tab (b) in a new tab
8. 8.Which of these is true of <aside>? (a) holds a side box of tips (b) holds one blog post (c) holds a news story (d) sits at the bottom
9. 9.🌈 Which colour is rgb(0, 255, 0)? (a) cyan (b) white (c) magenta (d) bright green
10. 10.🔍 Which is the odd one out? (a) shows pages from the web (b) colours code to help us (c) saves our .html files (d) shows line numbers
11. 11.True or false: <ol> lists things in any order. (a) True (b) False
12. 12.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) 800px or wider (c) exactly 100px (d) turned off
13. 13.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 30px;
      border: 2px solid black;
      margin: 15px;
    }
14. 14.🚀 Which file should this code go in: h1 { font-size: 32px; } (a) script.js (b) index.html (c) style.css
15. 15.📝 What does a password box show instead of letters? (a) numbers (b) dots (c) emojis (d) capital letters
16. 16.🖌️ What colour is behind the letters?
    li {
      font-size: 12px;
      background-color: red;
      color: yellow;
      text-align: right;
    } (a) red (b) orange (c) yellow
17. 17.🔗 Where does this link open?
    <a href="art.html" target="_blank">Contact us</a> (a) in a new tab (b) in the same tab
18. 18.📝 How many <input> tags are in this form?
    <form>
      <input type="date">
      <input type="number">
      <input type="password">
      <input type="text">
      <input type="email">
      <input type="submit" value="Send">
    </form>
19. 19.💬 Which text will NOT show on the page?
    <p>My best friend</p>
    <p>Rain today</p>
    <!-- <p>My pets</p> -->
    <p>Hello, world!</p> (a) Rain today (b) My pets (c) Hello, world! (d) My best friend
20. 20.True or false: CSS sets colours and fonts. (a) False (b) True
21. 21.🔤 In “HTML”, what do the letters HT stand for? (a) HyperText (b) Home Text (c) Hot Tags (d) High Tech
22. 22.✍️ Which property is set to red in this rule?
    p {
      text-align: center;
      color: red;
      font-style: italic;
      border: 2px solid;
    } (a) font-size (b) text-align (c) color (d) red
23. 23.✍️ Which property is set to yellow in this rule?
    p {
      font-style: italic;
      background-color: yellow;
      width: 300px;
      margin: 10px;
    } (a) padding (b) yellow (c) background-color (d) margin
24. 24.🎯 Which element does the selector .star style? (a) <div class="menu"> (b) <div class="star"> (c) <div id="star"> (d) <span class="note">
25. 25.🔗 Which code links to about.html? (a) <a alt="about.html"> (b) <a src="about.html"> (c) <link about.html> (d) <a href="about.html">
26. 26.🔠 Which heading shows the BIGGEST text: <h4>, <h5>, <h1> or <h6>? (a) <h6> (b) <h5> (c) <h4> (d) <h1>
27. 27.📋 Which list tag goes inside ul or ol? (a) <li> (b) <ol> (c) <ul>
28. 28.🎯 Which sign starts a class selector? (a) # (b) . (c) @ (d) &
29. 29.📄 Where does <p> go: in the head or in the body? (a) in the head (b) in the body
30. 30.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
31. 31.Which of these is true of <footer>? (a) holds one blog post (b) holds copyright notes (c) holds the main content (d) holds a side box of tips
32. 32.🔢 In a basic web page file, which comes FIRST? (a) <html> (b) <!DOCTYPE html> (c) </html> (d) </head>
33. 33.🔍 Which is the odd one out? (a) sends pages over the net (b) stores a website’s files (c) hosts websites online (d) has an address bar
34. 34.Which of these is true of a web browser? (a) answers page requests (b) colours code to help us (c) opens web pages for us (d) saves our .html files
35. 35.💬 Which text will NOT show on the page?
    <p>Good morning!</p>
    <p>The red kite</p>
    <!-- <p>Our school trip</p> -->
    <p>I love mangoes.</p> (a) I love mangoes. (b) The red kite (c) Good morning! (d) Our school trip
36. 36.True or false: <ul> goes in the body. (a) False (b) True
37. 37.📝 How many paragraphs does this code make?
    <p>My best friend</p>
    <p>My best friend</p>
    <h2>Hello, world!</h2>
    <p>The red kite</p>
38. 38.✍️ Which property is set to italic in this rule?
    .note {
      padding: 8px;
      font-style: italic;
      width: 300px;
    } (a) italic (b) color (c) font-size (d) font-style
39. 39.✍️ Which property is set to red in this rule?
    li {
      font-size: 20px;
      color: red;
    } (a) font-size (b) text-align (c) color (d) red
40. 40.True or false: <ul><li>Art</li></ul> goes in style.css. (a) True (b) False

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