Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 419 · 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 colour pair is easy to read? (a) pink on red (b) yellow on white (c) yellow on black (d) light grey on white
2. 2.🖌️ What colour is behind the letters?
   li {
     font-size: 12px;
     text-align: right;
     background-color: orange;
     color: black;
   } (a) black (b) purple (c) orange
3. 3.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) white (c) green (d) blue
4. 4.🖌️ Where does the text sit on its line?
   li {
     text-align: center;
     color: red;
     font-size: 40px;
     background-color: orange;
   } (a) in the middle (b) on the left (c) on the right
5. 5.📱 What does a media query check? (a) the time of day (b) the page title (c) the battery level (d) the screen width
6. 6.⚖️ What colour is the text of this element?
   <h2 class="big" id="logo">Hi</h2>
   CSS:
   #logo { color: yellow; }
   h2 { color: green; }
   .big { color: red; } (a) yellow (b) green (c) orange (d) red
7. 7.🔢 In a basic web page file, which comes first: “<!DOCTYPE html>” or “</body>”? (a) </body> (b) <!DOCTYPE html>
8. 8.⚡ What does alert() show? (a) a new tab (b) a picture (c) a table (d) a pop-up box
9. 9.Which of these is true of <aside>? (a) sits at the very top (b) holds extra side notes (c) holds the logo and title (d) is the page’s key part
10. 10.🌈 Which colour is rgb(255, 0, 0)? (a) cyan (b) bright green (c) yellow (d) red
11. 11.Which of these is safe to do online? (a) download from pop-ups (b) meet an online stranger (c) click prize links (d) think before you post
12. 12.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 25px;
      border: 5px solid black;
      margin: 15px;
    }
13. 13.📋 What number does the browser show next to “Jamun”?
    <ol start="9">
      <li>Papaya</li>
      <li>Jamun</li>
      <li>Banana</li>
      <li>Litchi</li>
      <li>Orange</li>
    </ol>
14. 14.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Art Gallery</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) body (b) Welcome! (c) Art Gallery (d) I like to read.
15. 15.🌐 Which one shows pages from the web? (a) a web browser (b) a code editor (c) a web server
16. 16.📊 In a table, which tag is a row? (a) <td> (b) <th> (c) <tb> (d) <tr>
17. 17.Which colour pair is hard to read? (a) white on dark blue (b) yellow on black (c) light grey on white (d) black on white
18. 18.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 32px;
      }
    } (a) Yes (b) No
19. 19.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 210px;
      padding: 15px;
      border: 2px solid black;
      margin: 10px;
    }
20. 20.🔁 What does this code print?
    let temp = 14;
    if (temp < 16) {
      console.log("Hot");
    } else {
      console.log("Cool");
    } (a) Cool (b) Hot
21. 21.📝 Which input type is for one line of words? (a) date (b) password (c) text (d) radio
22. 22.📊 Where do <td> cells go? (a) inside the <head> (b) inside a <tr> (c) inside a <li> (d) inside a <p>
23. 23.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 28px;
      }
    }
24. 24.🔍 One closing tag is missing. Which one?
    <small>My best friend</small>
    <h2>I love mangoes.</h2>
    <u>Good morning! (a) </strong> (b) </u> (c) </small> (d) </h2>
25. 25.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 190px;
      padding: 15px;
      border: 2px solid black;
      margin: 10px;
    }
26. 26.🎨 Which tag holds CSS inside the head? (a) <css> (b) <style> (c) <body> (d) <script>
27. 27.📋 Which list tag shows bullet points? (a) <li> (b) <ul> (c) <ol>
28. 28.True or false: <img> goes in the head. (a) False (b) True
29. 29.🔢 In a basic web page file, which comes first: “<html>” or “<body>”? (a) <html> (b) <body>
30. 30.True or false: HTML makes a link. (a) False (b) True
31. 31.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 3; i++) {
      total = total + 2;
    }
    console.log(total);
32. 32.🌐 Which one shows line numbers? (a) a web server (b) a web browser (c) a code editor
33. 33.True or false: padding is the gap round content. (a) False (b) True
34. 34.🔠 Which heading shows the BIGGEST text: <h2>, <h6>, <h5> or <h4>? (a) <h6> (b) <h5> (c) <h4> (d) <h2>
35. 35.True or false: <li> is one item of a list. (a) True (b) False
36. 36.📝 On how many lines does the browser show this paragraph?
    <p>Roses are red<br>Stars shine<br>Birds sing<br>Kites fly high</p>
37. 37.True or false: the content is space outside the border. (a) True (b) False
38. 38.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Cascading Style Sheets (c) Creative Sheet System (d) Computer Style Sheets
39. 39.True or false: the browser asks for a web page. (a) False (b) True
40. 40.🌐 Which one saves our .html files? (a) a web server (b) a web browser (c) a code editor

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