Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 985 · 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.💪 Which flexbox property picks row or column? (a) flex-direction (b) align-items (c) gap (d) justify-content
2. 2.True or false: a web server opens web pages for us. (a) True (b) False
3. 3.📝 On how many lines does the browser show this paragraph?
   <p>Roses are red<br>Sky is blue<br>Rivers flow<br>Birds sing<br>Kites fly high</p>
4. 4.Which colour pair is hard to read? (a) black on white (b) yellow on black (c) white on dark blue (d) blue on purple
5. 5.⚖️ What colour is the text of this element?
   <h1 class="menu" id="intro">Hi</h1>
   CSS:
   h1 { color: red; }
   #intro { color: green; }
   .menu { color: white; } (a) green (b) white (c) black (d) red
6. 6.🔍 One closing tag is missing. Which one?
   <strong>Good morning!</strong>
   <i>Fun facts</i>
   <h2>Cricket is fun. (a) </strong> (b) </h2> (c) </i> (d) </h1>
7. 7.Which of these is true of <header>? (a) sits at the very top (b) holds a news story (c) is the page’s key part (d) holds copyright notes
8. 8.✍️ In color: blue; which part is the value? (a) color (b) blue (c) : (d) ;
9. 9.True or false: padding is the gap round content. (a) True (b) False
10. 10.🔢 In a basic web page file, which comes FIRST? (a) <body> (b) </body> (c) <head> (d) <!DOCTYPE html>
11. 11.🖼️ Which attribute of <img> names the picture file? (a) height (b) width (c) alt (d) src
12. 12.✍️ CSS declarations go inside which brackets? (a) [ ] (b) ( ) (c) < > (d) { }
13. 13.🔠 Which heading shows the SMALLEST text: <h3>, <h4>, <h5> or <h2>? (a) <h5> (b) <h2> (c) <h3> (d) <h4>
14. 14.True or false: CSS makes a link. (a) False (b) True
15. 15.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 25px;
      border: 1px solid black;
      margin: 5px;
    }
16. 16.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) type the password (b) click it twice (c) share it with friends (d) close it, tell an adult
17. 17.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 15px;
      border: 1px solid black;
      margin: 10px;
    }
18. 18.📋 Which tag goes around each item of a list? (a) <p> (b) <li> (c) <ul> (d) <ol>
19. 19.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
20. 20.🔠 Are headings shown in bold by default? (a) Yes (b) No
21. 21.🚀 Which file should this code go in: p { color: red; } (a) script.js (b) index.html (c) style.css
22. 22.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 4 (c) 2 (d) 3
23. 23.🖌️ Which CSS property picks the font style? (a) font-weight (b) color (c) background-color (d) font-family
24. 24.⚡ What does this code print? (Look at the quotes!)
    let x = "3";
    let y = 1;
    console.log(x + y); (a) 31 (b) Error (c) 4
25. 25.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
26. 26.📋 Which list tag lists steps in order? (a) <ul> (b) <ol> (c) <li>
27. 27.✍️ In color: blue; which part is the property? (a) color (b) : (c) blue (d) ;
28. 28.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) center (d) flex-end
29. 29.🔢 To build and share your first web page, which comes first: “publish it online” or “plan what to show”? (a) plan what to show (b) publish it online
30. 30.🔁 How many times does this code print “Welcome”?
    for (let i = 3; i < 6; i++) {
      console.log("Welcome");
    }
31. 31.True or false: “colour as the only clue” makes the page harder to use. (a) True (b) False
32. 32.🖌️ How big is the text, in px?
    h2 {
      font-size: 12px;
      text-align: left;
      color: black;
      background-color: orange;
    }
33. 33.Which of these is a weak password? (a) Rain#Drop_42! (b) 111111 (c) Blue@Tiger_74 (d) Mango#Kite29!
34. 34.🏷️ Which is the closing tag for <h3>? (a) </h3> (b) <h3> (c) <h3/> (d) <\h3>
35. 35.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Mango</td><td>Guava</td></tr>
      <tr><td>Orange</td><td>Papaya</td></tr>
      <tr><td>Orange</td><td>Guava</td></tr>
    </table>
36. 36.🔍 One closing tag is missing. Which one?
    <em>Fun facts
    <u>Good morning!</u>
    <h1>I love mangoes.</h1> (a) </u> (b) </h1> (c) </h2> (d) </em>
37. 37.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h4> → <h4> (a) Yes (b) No
38. 38.🎯 Which CSS selector matches this element?
    <h2 class="big" id="end">Hello</h2> (a) h2 (b) li (c) .end (d) #hero
39. 39.🌈 In #de0000 the red part is the hex number de. What is it as a normal number?
40. 40.True or false: the server stores the site’s files. (a) False (b) True

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