Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 398 · 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.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>My Hobbies</title>
   </head>
   <body>
     <h1>Welcome!</h1>
     <p>Mars is red.</p>
   </body>
   </html> (a) Mars is red. (b) My Hobbies (c) Welcome! (d) index.html
2. 2.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Space Facts</title>
   </head>
   <body>
     <h1>All about me</h1>
     <p>Here is my best one.</p>
   </body>
   </html> (a) All about me (b) index.html (c) Space Facts (d) Here is my best one.
3. 3.📋 Which list tag shows bullet points? (a) <ol> (b) <ul> (c) <li>
4. 4.True or false: HTTPS scrambles data on its way. (a) True (b) False
5. 5.True or false: the browser asks for a web page. (a) True (b) False
6. 6.🔁 How many numbers does this code print?
   for (let i = 0; i < 20; i = i + 2) {
     console.log(i);
   }
7. 7.🔁 What does this code print?
   let age = 5;
   if (age > 17) {
     console.log("teen");
   } else {
     console.log("child");
   } (a) child (b) teen
8. 8.Which of these is padding? (a) space outside the border (b) the text or picture (c) the line round the box (d) the gap round content
9. 9.🔠 How many headings are in this code?
   <h1>My best friend</h1>
   <h2>My pets</h2>
   <p>Our school trip</p>
10. 10.Which of these is true of a web server? (a) shows line numbers (b) saves our .html files (c) opens web pages for us (d) answers page requests
11. 11.True or false: “skipping heading levels” helps everyone use the page. (a) False (b) True
12. 12.💬 Can anyone read your comments by viewing the page source? (a) No (b) Yes
13. 13.📝 Does <b> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
14. 14.📄 Where does the text of <title> appear? (a) nowhere (b) in a big heading (c) at the bottom (d) on the browser tab
15. 15.🔠 Which tag is used for the main title on a page? (a) <p> (b) <h1> (c) <h6> (d) <br>
16. 16.🚀 Should file names have spaces, like my page.html? (a) No (b) Yes
17. 17.📄 What is the first line of an HTML5 page? (a) <head> (b) <html> (c) <body> (d) <!DOCTYPE html>
18. 18.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) share it with friends (b) click it twice (c) close it, tell an adult (d) type the password
19. 19.🔁 How many times does this code print “Well done”?
    for (let i = 3; i <= 11; i++) {
      console.log("Well done");
    }
20. 20.Which of these goes in the head? (a) <style> (b) <img> (c) <h1> (d) <ul>
21. 21.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 30px;
      }
    }
22. 22.⚖️ What colour is the text of this element?
    <h1 class="big" id="top">Hi</h1>
    CSS:
    .big { color: white; }
    .big { color: red; } (a) blue (b) red (c) white (d) purple
23. 23.Which of these is true of a code editor? (a) hosts websites online (b) shows pages from the web (c) answers page requests (d) colours code to help us
24. 24.True or false: padding is the gap round content. (a) False (b) True
25. 25.💪 Which flexbox property turns on flexbox? (a) align-items (b) flex-direction (c) gap (d) display: flex
26. 26.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 20px;
      border: 4px solid black;
      margin: 20px;
    }
27. 27.⚡ What does this code print? (Look at the quotes!)
    let x = "2";
    let y = 1;
    console.log(x + y); (a) 21 (b) Error (c) 3
28. 28.🔍 Which line is missing its closing tag?
    line 1: <em>My best friend</em>
    line 2: <h3>The red kite</h3>
    line 3: <b>My pets (a) line 3 (b) line 1 (c) line 2
29. 29.🌈 Which colour is rgb(0, 255, 255)? (a) white (b) black (c) red (d) cyan
30. 30.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) flex-start (c) space-between (d) center
31. 31.🎯 Which CSS selector matches this element?
    <span class="red" id="main">Hello</span> (a) .box (b) #red (c) span (d) p
32. 32.🖼️ Why do we add alt text to an image? (a) to describe the image (b) to make it bigger (c) to colour it (d) to load it faster
33. 33.🧩 Which language lays out the page? (a) JavaScript (b) HTML (c) CSS
34. 34.🔠 Which heading shows the SMALLEST text: <h2>, <h3>, <h4> or <h1>? (a) <h3> (b) <h2> (c) <h1> (d) <h4>
35. 35.Which of these is a weak password? (a) S0lar!Pen#8 (b) password (c) Mango#Kite29! (d) Rain#Drop_42!
36. 36.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 200px;
      padding: 15px;
      border: 5px solid black;
      margin: 15px;
    }
37. 37.📦 In the box model, which part is the gap to other boxes? (a) content (b) padding (c) border (d) margin
38. 38.🔍 One closing tag is missing. Which one?
    <u>Fun facts</u>
    <p>Rain today
    <h3>My best friend</h3> (a) </em> (b) </h3> (c) </p> (d) </u>
39. 39.🎨 Which attribute adds CSS inside one tag? (a) href (b) style (c) alt (d) src
40. 40.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the later one (d) the shorter one

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