Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 313 · 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 text-align do? (a) makes the text bold (b) sets the letter colour (c) picks the font style (d) centres a heading
2. 2.📝 Which tag holds a whole form? (a) <table> (b) <form> (c) <ol> (d) <input>
3. 3.🔁 What is the LAST number this code prints?
   for (let i = 0; i < 13; i = i + 3) {
     console.log(i);
   }
4. 4.✍️ CSS declarations go inside which brackets? (a) ( ) (b) { } (c) [ ] (d) < >
5. 5.True or false: <aside> holds extra side notes. (a) True (b) False
6. 6.🔢 To build and share your first web page, which comes FIRST? (a) publish it online (b) add CSS styles (c) write the HTML (d) plan what to show
7. 7.Which of these is a strong password? (a) riya2014 (b) iloveyou (c) 123456 (d) Blue@Tiger_74
8. 8.🌈 Which colour is rgb(0, 0, 255)? (a) blue (b) magenta (c) cyan (d) white
9. 9.💪 Which flexbox property picks row or column? (a) display: flex (b) flex-direction (c) align-items (d) justify-content
10. 10.✍️ What is the selector in this CSS rule?
    h2 {
      font-weight: bold;
      font-size: 20px;
    } (a) h1 (b) h2 (c) 20px (d) font-weight
11. 11.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
12. 12.What is <input type="submit"> for? (a) is for one line of words (b) sends the form (c) lets you tick many (d) takes only numbers
13. 13.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) center (d) flex-end
14. 14.📊 In a table, which tag is a row? (a) <tb> (b) <tr> (c) <td> (d) <th>
15. 15.🎯 Which CSS selector matches this element?
    <li class="note" id="intro">Hello</li> (a) #intro (b) #main (c) .intro (d) #note
16. 16.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 50px wide (no margins).
17. 17.True or false: .star is an id selector. (a) False (b) True
18. 18.📝 Does <meta> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
19. 19.🌍 What is the path in this URL?
    https://school.example.in/games/chess.html (a) https (b) /games/chess.html (c) /about.html (d) school.example.in
20. 20.🔗 Where does this link open?
    <a href="games.html">Contact us</a> (a) in the same tab (b) in a new tab
21. 21.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h2> → <h2> (a) No (b) Yes
22. 22.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 6; i++) {
      total = total + 8;
    }
    console.log(total);
23. 23.📊 Which tag makes one data cell? (a) <tr> (b) <td> (c) <table> (d) <caption>
24. 24.💬 Which text will NOT show on the page?
    <p>Fun facts</p>
    <!-- <p>My pets</p> -->
    <p>My best friend</p> (a) My pets (b) Fun facts (c) My best friend
25. 25.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 60px wide (no margins).
26. 26.🖌️ What colour are the letters?
    h1 {
      font-size: 20px;
      text-align: right;
      color: red;
      background-color: yellow;
    } (a) yellow (b) black (c) red
27. 27.🔠 Which heading shows the BIGGEST text: <h6>, <h4>, <h5> or <h1>? (a) <h4> (b) <h1> (c) <h5> (d) <h6>
28. 28.📊 Where do <td> cells go? (a) inside a <p> (b) inside a <tr> (c) inside the <head> (d) inside a <li>
29. 29.🎨 A CSS file usually ends with which extension? (a) .js (b) .png (c) .css (d) .html
30. 30.📝 Which tag makes a big box for many lines of text? (a) <p> (b) <input> (c) <textarea> (d) <br>
31. 31.🔍 Which line is missing its closing tag?
    line 1: <i>My pets</i>
    line 2: <small>Good morning!
    line 3: <b>The red kite</b> (a) line 1 (b) line 3 (c) line 2
32. 32.True or false: .note is a class selector. (a) False (b) True
33. 33.True or false: the server sends the page back. (a) False (b) True
34. 34.Which colour pair is easy to read? (a) pink on red (b) red on green (c) light grey on white (d) white on black
35. 35.Which of these is true of a code editor? (a) turns HTML into a page (b) is where we type code (c) shows pages from the web (d) has an address bar
36. 36.🎯 Which CSS selector matches this element?
    <span class="box" id="main">Hello</span> (a) p (b) .star (c) .main (d) .box
37. 37.True or false: #logo is an element selector. (a) False (b) True
38. 38.🧭 Which semantic tag helps you move around? (a) <header> (b) <article> (c) <nav> (d) <footer>
39. 39.⚡ What does this code show?
    let name = "Meera";
    console.log("Hello, " + name + "!"); (a) Meera (b) Hello, name! (c) name (d) Hello, Meera!
40. 40.🎯 Which sign starts a class selector? (a) # (b) & (c) . (d) @

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