Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 167 · 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.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 110px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 50px wide (no margins).
2. 2.🔒 Is the connection to this address scrambled (encrypted)?
   https://kids.example.org/games/chess.html (a) No (b) Yes
3. 3.🚀 Where in index.html does the link to style.css go? (a) in the footer (b) in the head (c) inside a <p> (d) after </html>
4. 4.True or false: to put secrets in comments is not safe. (a) True (b) False
5. 5.Which of these does HTML do? (a) puts a picture on a page (b) sets colours and fonts (c) shows a pop-up message (d) changes the page live
6. 6.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 70px;
     padding: 20px;
     border: 4px solid black;
     margin: 5px;
   }
7. 7.🔗 What does target="_blank" do to a link? (a) makes it blank (b) makes it bold (c) opens it in a new tab (d) hides the link
8. 8.🎨 Which tag holds CSS inside the head? (a) <script> (b) <body> (c) <style> (d) <css>
9. 9.Which of these goes in the body? (a) <title> (b) <style> (c) <table> (d) <link rel="stylesheet">
10. 10.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 470px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
11. 11.Which of these is margin? (a) the gap to other boxes (b) the line round the box (c) the text or picture (d) the gap round content
12. 12.Which of these is a closing tag? (a) <b> (b) <body> (c) </title> (d) <p>
13. 13.🛡️ Online: is it safe to use a strong password? (a) safe (b) not safe
14. 14.📊 Which tag makes one data cell? (a) <tr> (b) <th> (c) <td> (d) <caption>
15. 15.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 470px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
16. 16.♿ What does good colour contrast mean? (a) many bright colours (b) no colours at all (c) only red text (d) text stands out clearly
17. 17.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
18. 18.📱 What does a media query check? (a) the page title (b) the battery level (c) the time of day (d) the screen width
19. 19.True or false: a web server opens web pages for us. (a) True (b) False
20. 20.🌍 What is the domain name in this URL?
    https://kids.example.org/index.html (a) https (b) school.example.in (c) /index.html (d) kids.example.org
21. 21.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
22. 22.🖌️ Which CSS property makes letters bigger? (a) color (b) background-color (c) font-size (d) text-align
23. 23.🔢 To build and share your first web page, what comes right after “write the HTML”? (a) publish it online (b) plan what to show (c) test in a browser (d) add CSS styles
24. 24.Which of these is a weak password? (a) Blue@Tiger_74 (b) password (c) Rain#Drop_42! (d) Chai$Cup_19x
25. 25.📝 Does <meta> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
26. 26.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 8; i = i + 4) {
      console.log(i);
    }
27. 27.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) makes it harder (b) helps everyone
28. 28.📊 How many cells does this table have in all?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Litchi</td><td>Papaya</td></tr>
    </table>
29. 29.📋 Which list suits a shopping list in any order? (a) <ul> (b) <br> (c) <hr> (d) <ol>
30. 30.What does font-family do? (a) makes letters bigger (b) sets the letter colour (c) picks the font style (d) centres a heading
31. 31.📱 Responsive design means a page ___. (a) has no pictures (b) never changes (c) fits every screen (d) is only for laptops
32. 32.🌈 In #0000da the blue part is the hex number da. What is it as a normal number?
33. 33.🚀 Should file names have spaces, like my page.html? (a) No (b) Yes
34. 34.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 160px;
      padding: 10px;
      border: 4px solid black;
      margin: 10px;
    }
35. 35.🔠 How many headings are in this code?
    <h1>My best friend</h1>
    <p>Rain today</p>
    <p>Our school trip</p>
    <p>The red kite</p>
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: 100px;
      padding: 10px;
      border: 2px solid black;
      margin: 5px;
    }
37. 37.🔁 How many times does this code print “Well done”?
    for (let i = 1; i < 4; i++) {
      console.log("Well done");
    }
38. 38.📝 On how many lines does the browser show this paragraph?
    <p>Roses are red<br>Stars shine<br>Sky is blue</p>
39. 39.♿ Does this help everyone, or make the page harder to use: tiny grey text? (a) makes it harder (b) helps everyone
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).

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