Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 217 · 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.True or false: in <img>, src sets how wide it is. (a) False (b) True
2. 2.🔗 Where does this link open?
   <a href="quiz.html">Take the quiz</a> (a) in the same tab (b) in a new tab
3. 3.📝 On how many lines does the browser show this paragraph?
   <p>Roses are red<br>Stars shine<br>Birds sing</p>
4. 4.📋 What number does the browser show next to “Jamun”?
   <ol start="3">
     <li>Banana</li>
     <li>Jamun</li>
     <li>Litchi</li>
     <li>Papaya</li>
     <li>Mango</li>
     <li>Guava</li>
   </ol>
5. 5.Which of these is a closing tag? (a) </li> (b) <p> (c) <h1> (d) <b>
6. 6.🖌️ Which CSS property picks the font style? (a) background-color (b) font-weight (c) color (d) font-family
7. 7.True or false: <b> is an empty tag. (a) False (b) True
8. 8.📝 What does <p> make? (a) a table (b) a picture (c) a paragraph (d) a link
9. 9.🧩 Which language puts a picture on a page? (a) JavaScript (b) HTML (c) CSS
10. 10.🌍 Which one stores the site’s files? (a) the URL (b) the browser (c) HTTPS (d) the server
11. 11.What is <input type="submit"> for? (a) takes only numbers (b) lets you pick only one (c) sends the form (d) picks a day
12. 12.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    p { color: purple; }
    p { color: orange; } (a) orange (b) purple (c) red (d) black
13. 13.♿ Who uses a screen reader? (a) only robots (b) only teachers (c) only coders (d) people who are blind
14. 14.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    }
15. 15.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
16. 16.🔠 How many headings are in this code?
    <h1>Rain today</h1>
    <p>Good morning!</p>
    <h4>Our school trip</h4>
17. 17.🔠 Which heading shows the BIGGEST text: <h5>, <h1>, <h2> or <h6>? (a) <h5> (b) <h2> (c) <h1> (d) <h6>
18. 18.💬 How many paragraphs show on the page?
    <p>Rain today</p>
    <p>I love mangoes.</p>
    <!-- <p>Our school trip</p> -->
19. 19.🔐 Is S0lar!Pen#8 a strong or a weak password? (a) weak (b) strong
20. 20.🌈 Which colour is #ff0000? (a) yellow (b) red (c) magenta (d) white
21. 21.True or false: .box { padding: 8px; } goes in style.css. (a) False (b) True
22. 22.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) center (c) flex-end (d) flex-start
23. 23.🔍 One closing tag is missing. Which one?
    <strong>The red kite</strong>
    <b>Rain today</b>
    <i>Fun facts (a) </strong> (b) </b> (c) </i> (d) </h3>
24. 24.Which of these is not safe to do online? (a) think before you post (b) type a password on http (c) log out on shared PCs (d) use a nickname in games
25. 25.⚖️ What colour is the text of this element?
    <h2 class="box" id="hero">Hi</h2>
    CSS:
    .box { color: orange; }
    #hero { color: black; }
    h2 { color: yellow; } (a) orange (b) red (c) black (d) yellow
26. 26.🔗 Which code links to about.html? (a) <a src="about.html"> (b) <a alt="about.html"> (c) <a href="about.html"> (d) <link about.html>
27. 27.🎯 Which element does the selector .box style? (a) <div class="star"> (b) <span class="menu"> (c) <div id="box"> (d) <div class="box">
28. 28.🌐 Which one answers page requests? (a) a code editor (b) a web browser (c) a web server
29. 29.⚡ What number does this code print?
    let coins = 13;
    coins = coins + 15;
    coins = coins - 26;
    console.log(coins);
30. 30.🌍 What is the path in this URL?
    http://www.example.com/index.html (a) http (b) /art/gallery.html (c) /index.html (d) www.example.com
31. 31.📋 What number does the browser show next to “Guava”?
    <ol start="9">
      <li>Banana</li>
      <li>Guava</li>
      <li>Papaya</li>
      <li>Grapes</li>
    </ol>
32. 32.💪 Which flexbox property lines boxes up across? (a) flex-direction (b) align-items (c) gap (d) justify-content
33. 33.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 350px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 80px wide (no margins).
34. 34.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 180px;
      padding: 5px;
      border: 3px solid black;
      margin: 5px;
    }
35. 35.💪 Which flexbox property turns on flexbox? (a) display: flex (b) align-items (c) flex-direction (d) justify-content
36. 36.🧩 Which language gives the page structure? (a) CSS (b) JavaScript (c) HTML
37. 37.🛡️ Online: is it safe to log out on shared PCs? (a) not safe (b) safe
38. 38.True or false: <input type="password"> is for an email address. (a) True (b) False
39. 39.🔗 Where does this link open?
    <a href="https://example.com">Take the quiz</a> (a) in the same tab (b) in a new tab
40. 40.📋 What number does the browser show next to “Litchi”?
    <ol start="7">
      <li>Banana</li>
      <li>Litchi</li>
      <li>Guava</li>
    </ol>

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