Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 894 · 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.🖌️ Where does the text sit on its line?
   li {
     font-size: 16px;
     color: purple;
     text-align: left;
     background-color: red;
   } (a) on the left (b) in the middle (c) on the right
2. 2.📝 On how many lines does the browser show this paragraph?
   <p>Kites fly high<br>Sky is blue<br>Roses are red<br>Birds sing<br>Stars shine</p>
3. 3.True or false: <caption> makes one table row. (a) True (b) False
4. 4.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 14px;
     }
   }
5. 5.📊 In a table, which tag is a row? (a) <td> (b) <tr> (c) <th> (d) <tb>
6. 6.🔠 How many headings are in this code?
   <h1>My best friend</h1>
   <p>Fun facts</p>
   <h3>Cricket is fun.</h3>
   <h3>The red kite</h3>
   <p>I love mangoes.</p>
7. 7.🌐 Which one hosts websites online? (a) a code editor (b) a web server (c) a web browser
8. 8.🚀 Which file should this code go in: <h1>My Site</h1> (a) style.css (b) index.html (c) script.js
9. 9.True or false: <td> makes one data cell. (a) True (b) False
10. 10.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 110px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
11. 11.🔠 Which heading shows the BIGGEST text: <h6>, <h1>, <h4> or <h3>? (a) <h3> (b) <h1> (c) <h6> (d) <h4>
12. 12.📝 How many paragraphs does this code make?
    <p>My best friend</p>
    <h2>Good morning!</h2>
    <h2>Hello, world!</h2>
    <h2>Our school trip</h2>
    <p>My pets</p>
    <p>My best friend</p>
13. 13.🖌️ What colour is behind the letters?
    li {
      color: black;
      text-align: right;
      font-size: 40px;
      background-color: red;
    } (a) red (b) purple (c) black
14. 14.📦 In the box model, which part is the gap round content? (a) border (b) padding (c) content (d) margin
15. 15.Which of these does HTML do? (a) reacts to a button click (b) lays out the page (c) sets colours and fonts (d) makes a link
16. 16.🔁 How many times does this code print “Hello”?
    for (let i = 3; i <= 6; i++) {
      console.log("Hello");
    }
17. 17.📝 On how many lines does the browser show this paragraph?
    <p>Stars shine<br>Birds sing<br>Roses are red<br>Rivers flow<br>Kites fly high</p>
18. 18.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
19. 19.⚖️ What colour is the text of this element?
    <h1 class="menu" id="hero">Hi</h1>
    CSS:
    .menu { color: green; }
    .menu { color: blue; } (a) green (b) blue (c) black (d) purple
20. 20.🖌️ What colour are the letters?
    li {
      text-align: center;
      font-size: 40px;
      color: yellow;
      background-color: blue;
    } (a) blue (b) yellow (c) white
21. 21.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 6; i++) {
      total = total + 5;
    }
    console.log(total);
22. 22.🔍 Which is the odd one out? (a) rounds box corners (b) gives the page structure (c) makes a link (d) puts a picture on a page
23. 23.🖼️ Which picture file does the browser load?
    <img src="bus.jpg" alt="Our school bus" width="100"> (a) Our school bus (b) tiger.jpg (c) bus.jpg (d) fort.jpg
24. 24.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) the later one (d) neither
25. 25.🔠 Which heading shows the BIGGEST text: <h1>, <h3>, <h4> or <h6>? (a) <h6> (b) <h3> (c) <h4> (d) <h1>
26. 26.True or false: HTTPS sends the page back. (a) False (b) True
27. 27.⚡ A JavaScript file usually ends with which extension? (a) .html (b) .css (c) .jpg (d) .js
28. 28.Which of these is safe to do online? (a) share your OTP (b) download from pop-ups (c) share your password (d) ask before downloading
29. 29.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is free (b) the data is scrambled (c) the site is fast (d) the site is a game
30. 30.💪 Which flexbox property spaces boxes along a row? (a) gap (b) display: flex (c) align-items (d) justify-content
31. 31.📋 Which list tag is an unordered list? (a) <ol> (b) <ul> (c) <li>
32. 32.🖌️ What colour are the letters?
    h2 {
      text-align: center;
      color: blue;
      font-size: 16px;
      background-color: red;
    } (a) blue (b) red (c) green
33. 33.🔒 Is the connection to this address scrambled (encrypted)?
    https://kids.example.org/about.html (a) No (b) Yes
34. 34.🔗 Where does this link open?
    <a href="games.html">School news</a> (a) in the same tab (b) in a new tab
35. 35.Which of these is true of <footer>? (a) holds one blog post (b) holds the logo and title (c) sits at the very top (d) sits at the bottom
36. 36.🔗 Where does this link open?
    <a href="contact.html" target="_blank">Take the quiz</a> (a) in a new tab (b) in the same tab
37. 37.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    }
38. 38.Which of these does HTML do? (a) makes headings and lists (b) changes the page live (c) lays out the page (d) rounds box corners
39. 39.True or false: to tell a trusted adult is not safe. (a) True (b) False
40. 40.🖌️ Which CSS property picks the font style? (a) text-align (b) background-color (c) font-size (d) font-family

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