Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 966 · 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 later one (c) neither (d) the shorter one
2. 2.True or false: “link text “click here”” helps everyone use the page. (a) False (b) True
3. 3.🔤 In “HTML”, what does the M stand for? (a) Mouse (b) Markup (c) Machine (d) Modern
4. 4.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 340px;
     justify-content: flex-start;
   }
   Inside are 4 boxes, each 80px wide (no margins).
5. 5.True or false: HTML on its own cannot run a game loop. (a) False (b) True
6. 6.🖌️ Which CSS property sets the letter colour? (a) font-size (b) background-color (c) color (d) text-align
7. 7.🖼️ Which picture file does the browser load?
   <img src="cake.jpg" alt="Birthday cake" width="200"> (a) moon.png (b) dog.jpg (c) Birthday cake (d) cake.jpg
8. 8.True or false: <ol> shows 1, 2, 3 numbers. (a) True (b) False
9. 9.🏷️ Which is the closing tag for <b>? (a) <b> (b) </b> (c) <b/> (d) <\b>
10. 10.True or false: #hero is a class selector. (a) False (b) True
11. 11.Which of these is the border? (a) the line round the box (b) the gap to other boxes (c) the gap round content (d) space inside the border
12. 12.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Computer Style Sheets (c) Creative Sheet System (d) Cascading Style Sheets
13. 13.📊 Which tag makes one data cell? (a) <th> (b) <td> (c) <tr> (d) <caption>
14. 14.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Litchi
      <input type="checkbox" name="fruit"> Banana
      <input type="checkbox" name="fruit"> Papaya
      <input type="checkbox" name="fruit"> Guava
    </form>
15. 15.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 400px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 100px wide (no margins).
16. 16.⚡ Where does console.log() show its output? (a) in the address bar (b) on the title bar (c) on the printer (d) in the console
17. 17.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
18. 18.True or false: <input type="radio"> lets you pick only one. (a) False (b) True
19. 19.🎯 What kind of selector is body? (a) an element selector (b) an id selector (c) a class selector
20. 20.📋 Which list suits a shopping list in any order? (a) <ol> (b) <br> (c) <hr> (d) <ul>
21. 21.🖌️ How big is the text, in px?
    li {
      color: purple;
      font-size: 36px;
      background-color: blue;
      text-align: left;
    }
22. 22.📝 On how many lines does the browser show this paragraph?
    <p>Stars shine<br>Rivers flow<br>Birds sing<br>Kites fly high</p>
23. 23.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 30px;
      }
    } (a) No (b) Yes
24. 24.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
25. 25.🔗 Which code links to about.html? (a) <link about.html> (b) <a src="about.html"> (c) <a href="about.html"> (d) <a alt="about.html">
26. 26.True or false: a code editor sends pages over the net. (a) False (b) True
27. 27.🌐 Which one is where we type code? (a) a code editor (b) a web server (c) a web browser
28. 28.⚡ What does alert() show? (a) a pop-up box (b) a picture (c) a table (d) a new tab
29. 29.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-size: 20px;
      color: red;
    }
30. 30.True or false: margin is a solid or dotted edge. (a) True (b) False
31. 31.⚡ Which JavaScript word runs code when true? (a) alert() (b) console.log() (c) for (d) if
32. 32.What does text-align do? (a) sets the letter colour (b) centres a heading (c) makes the text bold (d) picks the font style
33. 33.💬 Does the browser show comments on the page? (a) Yes (b) No
34. 34.📝 How many paragraphs does this code make?
    <p>Good morning!</p>
    <h2>Hello, world!</h2>
    <p>My pets</p>
    <p>Cricket is fun.</p>
    <p>Our school trip</p>
35. 35.What does font-size do? (a) sets the letter colour (b) picks the font style (c) makes letters bigger (d) makes the text bold
36. 36.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 30px;
      border: 2px solid black;
      margin: 0px;
    }
37. 37.True or false: <ol> is one item of a list. (a) False (b) True
38. 38.Which of these is the border? (a) space inside the border (b) a solid or dotted edge (c) the text or picture (d) the gap round content
39. 39.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    #intro { color: red; }
    #intro { color: purple; } (a) orange (b) red (c) blue (d) purple
40. 40.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    #top { color: orange; }
    #top { color: blue; } (a) blue (b) orange (c) black (d) yellow

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