Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 464 · 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.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) neither (d) the later one
2. 2.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 50px;
     padding: 20px;
     border: 1px solid black;
     margin: 5px;
   }
3. 3.Which of these is an opening tag? (a) </li> (b) <li> (c) </title> (d) </b>
4. 4.🌈 In #004f00 the green part is the hex number 4f. What is it as a normal number?
5. 5.What does font-family do? (a) sets the letter colour (b) colours behind the text (c) picks the font style (d) makes the text bold
6. 6.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
7. 7.📊 Which tag makes one data cell? (a) <th> (b) <td> (c) <table> (d) <caption>
8. 8.🌗 Is yellow on white easy or hard to read? (a) hard to read (b) easy to read
9. 9.🖼️ Which tag puts a picture on a page? (a) <a> (b) <pic> (c) <p> (d) <img>
10. 10.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="sport"> Hockey
      <input type="radio" name="sport"> Chess
      <input type="radio" name="sport"> Cricket
      <input type="radio" name="sport"> Football
    </form>
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      padding: 8px;
      background-color: yellow;
      border: 2px solid;
      text-align: center;
    }
12. 12.🌐 Which one stores a website’s files? (a) a web browser (b) a web server (c) a code editor
13. 13.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
14. 14.📊 Are <th> cells shown bold and centred by default? (a) No (b) Yes
15. 15.⚖️ What colour is the text of this element?
    <h2 class="big" id="main">Hi</h2>
    CSS:
    h2 { color: orange; }
    h2 { color: blue; } (a) orange (b) blue (c) white (d) yellow
16. 16.⚡ What number does this code print?
    let coins = 24;
    coins = coins + 14;
    coins = coins - 24;
    console.log(coins);
17. 17.🎯 Which element does the selector .box style? (a) <h2 class="box"> (b) <h2 class="star"> (c) <h2 id="box"> (d) <li class="menu">
18. 18.💬 How does an HTML comment end? (a) // (b) >> (c) */ (d) -->
19. 19.🧭 Is <header> semantic or not semantic? (a) not semantic (b) semantic
20. 20.What does text-align do? (a) picks the font style (b) sets the letter colour (c) centres a heading (d) colours behind the text
21. 21.🔠 Which heading shows the SMALLEST text: <h1>, <h4>, <h2> or <h3>? (a) <h3> (b) <h4> (c) <h2> (d) <h1>
22. 22.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 14px;
      }
    }
23. 23.🔁 What does this code print?
    let age = 29;
    if (age >= 29) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) child (b) teen
24. 24.📋 Does this list show bullets or numbers?
    <ol>
      <li>Jamun</li>
      <li>Mango</li>
      <li>Litchi</li>
    </ol> (a) numbers (b) bullets
25. 25.🔁 How many numbers does this code print?
    for (let i = 0; i < 9; i = i + 2) {
      console.log(i);
    }
26. 26.🔢 When you open a web page, what comes right after “DNS finds the server”? (a) the browser asks it (b) the browser shows it (c) you type the URL (d) the server sends files
27. 27.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 7; i = i + 2) {
      console.log(i);
    }
28. 28.🔢 To build and share your first web page, what comes right after “plan what to show”? (a) publish it online (b) write the HTML (c) add CSS styles (d) test in a browser
29. 29.✍️ Which property is set to 2px solid in this rule?
    h2 {
      border: 2px solid;
      text-align: center;
    } (a) font-style (b) border (c) width (d) 2px solid
30. 30.✍️ In color: blue; which part is the property? (a) : (b) color (c) ; (d) blue
31. 31.🧭 Which semantic tag holds the main content? (a) <footer> (b) <main> (c) <article> (d) <header>
32. 32.True or false: to download from pop-ups is not safe. (a) True (b) False
33. 33.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) close it, tell an adult (b) type the password (c) click it twice (d) share it with friends
34. 34.⚡ What number does this code print?
    let marks = 10;
    marks = marks + 20;
    marks = marks - 4;
    console.log(marks);
35. 35.📊 Which tag holds the whole table? (a) <td> (b) <tr> (c) <caption> (d) <table>
36. 36.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    .big { color: green; }
    #top { color: black; } (a) white (b) green (c) black (d) blue
37. 37.🔢 In a basic web page file, which comes LAST? (a) </head> (b) <body> (c) </body> (d) </html>
38. 38.⚖️ What colour is the text of this element?
    <h2 class="star" id="main">Hi</h2>
    CSS:
    .star { color: white; }
    #main { color: orange; }
    h2 { color: red; } (a) white (b) red (c) yellow (d) orange
39. 39.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Guava</td><td>Grapes</td></tr>
    </table>
40. 40.💬 Which text will NOT show on the page?
    <p>My best friend</p>
    <p>Hello, world!</p>
    <p>Fun facts</p>
    <!-- <p>The red kite</p> --> (a) Hello, world! (b) My best friend (c) The red kite (d) Fun facts

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