Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 472 · 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.📝 Which input type is for one line of words? (a) checkbox (b) submit (c) text (d) radio
2. 2.True or false: .box { padding: 8px; } goes in style.css. (a) False (b) True
3. 3.True or false: in <img>, src sets how wide it is. (a) False (b) True
4. 4.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 100px;
     padding: 10px;
     border: 2px solid black;
     margin: 5px;
   }
5. 5.Which of these goes in the head? (a) <ul> (b) <table> (c) <title> (d) <h1>
6. 6.True or false: <img src="cat.png"> goes in index.html. (a) False (b) True
7. 7.🎯 Which element does the selector .note style? (a) <h1 class="big"> (b) <h2 class="red"> (c) <h1 id="note"> (d) <h1 class="note">
8. 8.🔍 Which is the odd one out? (a) has an address bar (b) shows pages from the web (c) turns HTML into a page (d) hosts websites online
9. 9.🛡️ Online: is it safe to ask before downloading? (a) safe (b) not safe
10. 10.🔍 Which is the odd one out? (a) adds space around boxes (b) rounds box corners (c) lays out the page (d) checks a quiz answer
11. 11.True or false: <caption> makes a heading cell. (a) False (b) True
12. 12.True or false: the border is the gap to other boxes. (a) True (b) False
13. 13.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
14. 14.🎯 Which sign starts an id selector? (a) & (b) # (c) . (d) @
15. 15.🔁 What does this code print?
    let marks = 49;
    if (marks >= 29) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Try again (b) Pass
16. 16.⚖️ What colour is the text of this element?
    <p class="star" id="main">Hi</p>
    CSS:
    p { color: white; }
    p { color: yellow; } (a) purple (b) white (c) black (d) yellow
17. 17.📋 Which list shows the steps of a recipe best? (a) <hr> (b) <br> (c) <ul> (d) <ol>
18. 18.Which of these is true of a web browser? (a) stores a website’s files (b) sends pages over the net (c) answers page requests (d) turns HTML into a page
19. 19.🚀 Which file should this code go in: h1 { font-size: 32px; } (a) style.css (b) script.js (c) index.html
20. 20.💬 Which text will NOT show on the page?
    <!-- <p>The red kite</p> -->
    <p>Hello, world!</p>
    <p>Our school trip</p>
    <p>My best friend</p> (a) Hello, world! (b) The red kite (c) Our school trip (d) My best friend
21. 21.🔠 Which heading shows the BIGGEST text: <h3>, <h6>, <h2> or <h1>? (a) <h3> (b) <h1> (c) <h6> (d) <h2>
22. 22.📋 Which list tag is one item of a list? (a) <ol> (b) <ul> (c) <li>
23. 23.✍️ What value is given to margin in this rule?
    body {
      font-style: italic;
      color: red;
      margin: 10px;
    } (a) margin (b) 8px (c) bold (d) 10px
24. 24.🛡️ Online: is it safe to share your password? (a) not safe (b) safe
25. 25.🎨 Which tag holds CSS inside the head? (a) <body> (b) <css> (c) <script> (d) <style>
26. 26.📦 In the box model, which part is the gap round content? (a) padding (b) content (c) border (d) margin
27. 27.🧭 Why use <nav> instead of <div> for a menu? (a) it adds pictures (b) it makes text red (c) it tells its meaning (d) it loads faster
28. 28.♿ Which link text is clearest? (a) link (b) here (c) click here (d) Read the fruit facts
29. 29.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-weight: bold;
      text-align: center;
      font-size: 20px;
    }
30. 30.🔗 Where does this link open?
    <a href="news.html" target="_blank">Visit the site</a> (a) in the same tab (b) in a new tab
31. 31.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) turned off (c) exactly 100px (d) 800px or narrower
32. 32.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) the shorter one (d) neither
33. 33.💬 How many paragraphs show on the page?
    <p>I love mangoes.</p>
    <!-- <p>Good morning!</p> -->
    <p>Hello, world!</p>
    <p>My pets</p>
    <p>The red kite</p>
34. 34.💬 How many paragraphs show on the page?
    <p>My best friend</p>
    <p>Rain today</p>
    <!-- <p>My pets</p> -->
    <p>Our school trip</p>
    <p>I love mangoes.</p>
35. 35.💬 How does an HTML comment end? (a) >> (b) --> (c) */ (d) //
36. 36.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
37. 37.🔢 To build and share your first web page, which comes FIRST? (a) add CSS styles (b) plan what to show (c) test in a browser (d) publish it online
38. 38.🖼️ How many pixels wide is the picture drawn?
    <img src="tiger.jpg" alt="A tiger asleep" width="200">
39. 39.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    .big { color: purple; }
    .big { color: green; } (a) purple (b) black (c) red (d) green
40. 40.✍️ In color: blue; which part is the property? (a) : (b) blue (c) ; (d) color

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