Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 44 · 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 words do you click on?
   <a href="games.html">About us</a> (a) href (b) About us (c) games.html (d) Contact us
2. 2.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 24px;
     }
   }
3. 3.♿ What does good colour contrast mean? (a) only red text (b) no colours at all (c) many bright colours (d) text stands out clearly
4. 4.🌈 Which colour is #00ff00? (a) bright green (b) black (c) red (d) white
5. 5.🎨 Which tag connects an outside CSS file? (a) <a> (b) <link> (c) <img> (d) <css>
6. 6.🔗 Which address opens when you click this link?
   <a href="maths.html">Play games</a> (a) Play games (b) maths.html (c) art.html (d) news.html
7. 7.⚖️ What colour is the text of this element?
   <p class="note" id="hero">Hi</p>
   CSS:
   #hero { color: purple; }
   p { color: orange; }
   .note { color: white; } (a) purple (b) black (c) orange (d) white
8. 8.💬 How many paragraphs show on the page?
   <p>Hello, world!</p>
   <!-- <p>My pets</p> -->
   <p>Cricket is fun.</p>
9. 9.✍️ What value is given to font-weight in this rule?
   li {
     color: red;
     text-align: center;
     font-weight: bold;
   } (a) 2px solid (b) bold (c) 300px (d) font-weight
10. 10.Which of these is true of <nav>? (a) is the page’s key part (b) holds a news story (c) holds the logo and title (d) holds the menu of links
11. 11.🔢 When you open a web page, which comes first: “the server sends files” or “the browser asks it”? (a) the browser asks it (b) the server sends files
12. 12.🌈 Which colour is rgb(0, 255, 255)? (a) blue (b) black (c) yellow (d) cyan
13. 13.What does justify-content: center do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
14. 14.🎯 What kind of selector is h1? (a) an id selector (b) an element selector (c) a class selector
15. 15.📄 Where does <title> go: in the head or in the body? (a) in the head (b) in the body
16. 16.🖌️ How big is the text, in px?
    h1 {
      text-align: center;
      background-color: blue;
      font-size: 28px;
      color: green;
    }
17. 17.🎯 What kind of selector is .card? (a) an element selector (b) an id selector (c) a class selector
18. 18.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the later one (d) the shorter one
19. 19.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>Thanks for visiting.</p>
    </body>
    </html> (a) index.html (b) Welcome! (c) Class 7 Blog (d) Thanks for visiting.
20. 20.🔠 Which heading shows the SMALLEST text: <h5>, <h4>, <h3> or <h1>? (a) <h4> (b) <h5> (c) <h1> (d) <h3>
21. 21.True or false: HTML on its own can run a game loop. (a) True (b) False
22. 22.🧭 Which semantic tag holds the menu of links? (a) <header> (b) <aside> (c) <nav> (d) <article>
23. 23.📊 In a table, which tag is a row? (a) <td> (b) <tr> (c) <tb> (d) <th>
24. 24.💪 Which flexbox property turns on flexbox? (a) justify-content (b) align-items (c) gap (d) display: flex
25. 25.⚖️ What colour is the text of this element?
    <h2 class="red" id="hero">Hi</h2>
    CSS:
    .red { color: black; }
    h2 { color: red; } (a) yellow (b) purple (c) red (d) black
26. 26.⚡ What number does this code print?
    let runs = 5;
    runs = runs + 15;
    runs = runs - 15;
    console.log(runs);
27. 27.📋 Which list tag shows 1, 2, 3 numbers? (a) <li> (b) <ul> (c) <ol>
28. 28.✍️ Which property is set to 8px in this rule?
    p {
      padding: 8px;
      margin: 10px;
    } (a) 8px (b) padding (c) border (d) font-weight
29. 29.True or false: <li> is an ordered list. (a) False (b) True
30. 30.📝 How many paragraphs does this code make?
    <p>Good morning!</p>
    <p>Fun facts</p>
    <p>Cricket is fun.</p>
    <p>My pets</p>
    <p>I love mangoes.</p>
    <p>Our school trip</p>
31. 31.Which of these is true of a web server? (a) shows pages from the web (b) opens web pages for us (c) saves our .html files (d) sends pages over the net
32. 32.⚡ A JavaScript file usually ends with which extension? (a) .html (b) .jpg (c) .js (d) .css
33. 33.⚡ Which JavaScript word repeats code? (a) alert() (b) if (c) let (d) for
34. 34.🛡️ Before typing a password on a site, check the address starts with ___. (a) http (b) www (c) ftp (d) https
35. 35.📊 Are <th> cells shown bold and centred by default? (a) No (b) Yes
36. 36.🖼️ Which picture file does the browser load?
    <img src="bus.jpg" alt="Our school bus" width="100"> (a) Our school bus (b) fort.jpg (c) tiger.jpg (d) bus.jpg
37. 37.📊 How many cells are in each row?
    <table>
      <tr><td>Litchi</td><td>Litchi</td><td>Mango</td></tr>
      <tr><td>Banana</td><td>Papaya</td><td>Mango</td></tr>
    </table>
38. 38.True or false: <caption> makes one data cell. (a) True (b) False
39. 39.True or false: CSS sets colours and fonts. (a) True (b) False
40. 40.🔁 What does this code print?
    let age = 17;
    if (age > 12) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) child (b) teen

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