Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 713 · 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: <ol> shows 1, 2, 3 numbers. (a) True (b) False
2. 2.✍️ Which property is set to 300px in this rule?
   .box {
     font-size: 20px;
     width: 300px;
     padding: 8px;
     font-weight: bold;
   } (a) width (b) font-style (c) 300px (d) color
3. 3.🎯 Which element does the selector h1 style? (a) <div id="top"> (b) <h2> (c) <li class="menu"> (d) <h1 class="menu">
4. 4.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 28px;
     }
   }
5. 5.🧩 An opening tag + content + a closing tag together make an ___. (a) element (b) address (c) editor (d) attribute
6. 6.🌗 Is red on green easy or hard to read? (a) easy to read (b) hard to read
7. 7.📝 Which tag holds a whole form? (a) <form> (b) <input> (c) <ol> (d) <table>
8. 8.📋 Which list tag lists steps in order? (a) <ul> (b) <ol> (c) <li>
9. 9.True or false: h1 is an element selector. (a) True (b) False
10. 10.📝 How many paragraphs does this code make?
    <p>Cricket is fun.</p>
    <h2>Cricket is fun.</h2>
    <h2>Good morning!</h2>
11. 11.🌈 Which colour is #ffffff? (a) white (b) magenta (c) black (d) cyan
12. 12.🖼️ Which attribute of <img> describes the picture? (a) width (b) height (c) alt (d) src
13. 13.🖼️ Which tag puts a picture on a page? (a) <p> (b) <img> (c) <pic> (d) <a>
14. 14.🔍 Which is the odd one out? (a) sets colours and fonts (b) counts down a timer (c) checks a quiz answer (d) reacts to a button click
15. 15.📋 Which list suits a shopping list in any order? (a) <br> (b) <ul> (c) <hr> (d) <ol>
16. 16.🌈 In #930000 the red part is the hex number 93. What is it as a normal number?
17. 17.⚡ What does alert() show? (a) a picture (b) a new tab (c) a table (d) a pop-up box
18. 18.🎯 Which CSS selector matches this element?
    <div class="note" id="main">Hello</div> (a) span (b) .main (c) #logo (d) div
19. 19.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) blue (c) red (d) black
20. 20.🔗 Which address opens when you click this link?
    <a href="maths.html">Play games</a> (a) art.html (b) news.html (c) Play games (d) maths.html
21. 21.🌐 Which one saves our .html files? (a) a web browser (b) a web server (c) a code editor
22. 22.💬 Why do coders write comments? (a) to make links (b) to leave notes (c) to show pictures (d) to add colour
23. 23.Which of these is true of a web browser? (a) stores a website’s files (b) has an address bar (c) colours code to help us (d) saves our .html files
24. 24.🖌️ What colour are the letters?
    h1 {
      background-color: purple;
      text-align: left;
      font-size: 28px;
      color: red;
    } (a) purple (b) red (c) blue
25. 25.📝 What does <p> make? (a) a picture (b) a table (c) a link (d) a paragraph
26. 26.🔠 Which heading shows the BIGGEST text: <h6>, <h3>, <h5> or <h2>? (a) <h6> (b) <h5> (c) <h2> (d) <h3>
27. 27.🎯 Which CSS selector matches this element?
    <p class="star" id="top">Hello</p> (a) .menu (b) p (c) #star (d) .top
28. 28.💬 Which text will NOT show on the page?
    <!-- <p>The red kite</p> -->
    <p>Cricket is fun.</p>
    <p>Fun facts</p> (a) The red kite (b) Fun facts (c) Cricket is fun.
29. 29.💬 How many paragraphs show on the page?
    <!-- <p>Hello, world!</p> -->
    <!-- <p>My pets</p> -->
    <p>Good morning!</p>
    <p>Rain today</p>
30. 30.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) gap (c) display: flex (d) justify-content
31. 31.Which of these goes in the head? (a) <ul> (b) <style> (c) <p> (d) <img>
32. 32.⚡ What number does this code print?
    let a = 3;
    let b = 10;
    console.log(a * b);
33. 33.🚀 Which file should this code go in: <img src="cat.png"> (a) style.css (b) script.js (c) index.html
34. 34.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-weight: bold;
      font-size: 20px;
    }
35. 35.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) white (c) blue (d) green
36. 36.🔁 What does this code print?
    let age = 40;
    if (age >= 5) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) child (b) teen
37. 37.🖌️ What colour is behind the letters?
    h1 {
      font-size: 32px;
      color: yellow;
      background-color: red;
      text-align: left;
    } (a) red (b) blue (c) yellow
38. 38.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 15px;
      border: 4px solid black;
      margin: 20px;
    }
39. 39.🎯 What kind of selector is .note? (a) an element selector (b) a class selector (c) an id selector
40. 40.⚡ What number does this code print?
    let a = 53;
    let b = 34;
    console.log(a + b);

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