Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 967 · 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.✍️ In color: blue; which part is the value? (a) ; (b) color (c) blue (d) :
2. 2.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 170px;
     padding: 20px;
     border: 1px solid black;
     margin: 15px;
   }
3. 3.What is <input type="number"> for? (a) hides what you type (b) is for an email address (c) takes only numbers (d) picks a day
4. 4.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 22px;
     }
   } (a) Yes (b) No
5. 5.✍️ In color: blue; which part is the property? (a) ; (b) color (c) blue (d) :
6. 6.🔗 Where does this link open?
   <a href="quiz.html" target="_blank">About us</a> (a) in a new tab (b) in the same tab
7. 7.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) never changes (d) fits every screen
8. 8.🌗 Is black on white easy or hard to read? (a) hard to read (b) easy to read
9. 9.True or false: the browser shows the page to you. (a) True (b) False
10. 10.🎯 How many elements on a page should have the same id? (a) any number (b) 5 (c) 2 (d) 1
11. 11.⚡ What does this code print? (Look at the quotes!)
    let x = "5";
    let y = 1;
    console.log(x + y); (a) 6 (b) Error (c) 51
12. 12.What does text-align do? (a) sets the letter colour (b) picks the font style (c) makes letters bigger (d) centres a heading
13. 13.🔁 How many times does this code print “Hello”?
    for (let i = 0; i <= 9; i++) {
      console.log("Hello");
    }
14. 14.🔗 Which words do you click on?
    <a href="https://example.com">Maths fun</a> (a) https://example.com (b) href (c) Maths fun (d) Art corner
15. 15.📝 Does <hr> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
16. 16.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <p>Rain today</p>
    <!-- <p>My pets</p> -->
    <!-- <p>Cricket is fun.</p> -->
17. 17.🖌️ What colour is behind the letters?
    li {
      background-color: red;
      font-size: 24px;
      text-align: left;
      color: yellow;
    } (a) red (b) yellow (c) orange
18. 18.💬 Which text will NOT show on the page?
    <!-- <p>Our school trip</p> -->
    <p>I love mangoes.</p>
    <p>Cricket is fun.</p> (a) Cricket is fun. (b) I love mangoes. (c) Our school trip
19. 19.📄 Which part holds everything you see on the page? (a) the doctype (b) the body (c) the title (d) the head
20. 20.🌈 Which colour is rgb(0, 255, 0)? (a) cyan (b) bright green (c) yellow (d) blue
21. 21.What does font-size do? (a) makes letters bigger (b) picks the font style (c) sets the letter colour (d) centres a heading
22. 22.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) center (c) space-between (d) flex-start
23. 23.🔢 In a basic web page file, which comes FIRST? (a) </html> (b) <!DOCTYPE html> (c) <head> (d) </head>
24. 24.📋 Which list shows the steps of a recipe best? (a) <ol> (b) <br> (c) <ul> (d) <hr>
25. 25.🔍 One closing tag is missing. Which one?
    <h3>I love mangoes.
    <em>My best friend</em>
    <h2>Hello, world!</h2> (a) </strong> (b) </h2> (c) </em> (d) </h3>
26. 26.🔁 What does this code print?
    let temp = 45;
    if (temp > 40) {
      console.log("Hot");
    } else {
      console.log("Cool");
    } (a) Hot (b) Cool
27. 27.🔗 Which words do you click on?
    <a href="art.html">About us</a> (a) About us (b) href (c) art.html (d) Contact us
28. 28.🚀 Which file should this code go in: <p>Hello!</p> (a) style.css (b) script.js (c) index.html
29. 29.🌍 What is the domain name in this URL?
    http://www.example.net/about.html (a) learn.example.com (b) http (c) /about.html (d) www.example.net
30. 30.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    p { color: orange; }
    .big { color: white; }
    #end { color: red; } (a) red (b) white (c) orange (d) black
31. 31.True or false: <ul> shows 1, 2, 3 numbers. (a) False (b) True
32. 32.True or false: <title> has a closing tag. (a) False (b) True
33. 33.🔠 Which heading shows the SMALLEST text: <h5>, <h1>, <h3> or <h2>? (a) <h1> (b) <h3> (c) <h2> (d) <h5>
34. 34.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 90px;
      padding: 25px;
      border: 5px solid black;
      margin: 0px;
    }
35. 35.💬 How many paragraphs show on the page?
    <!-- <p>Fun facts</p> -->
    <p>Rain today</p>
    <!-- <p>My pets</p> -->
    <!-- <p>Hello, world!</p> -->
    <p>Cricket is fun.</p>
36. 36.🔗 Which words do you click on?
    <a href="games.html">Visit the site</a> (a) href (b) Visit the site (c) games.html (d) Maths fun
37. 37.🧩 Which language puts a picture on a page? (a) JavaScript (b) CSS (c) HTML
38. 38.⚡ What does this code print? (Look at the quotes!)
    let x = "3";
    let y = 2;
    console.log(x + y); (a) Error (b) 5 (c) 32
39. 39.🔗 Which address opens when you click this link?
    <a href="quiz.html">Art corner</a> (a) about.html (b) Art corner (c) games.html (d) quiz.html
40. 40.🧭 Which semantic tag holds the menu of links? (a) <main> (b) <article> (c) <footer> (d) <nav>

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