Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 421 · 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 attribute of <img> is read by screen readers? (a) width (b) src (c) alt (d) height
2. 2.🏷️ Which is the closing tag for <h3>? (a) <\h3> (b) <h3/> (c) <h3> (d) </h3>
3. 3.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is a game (b) the site is fast (c) the site is free (d) the data is scrambled
4. 4.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 6; i++) {
     total = total + i;
   }
   console.log(total);
5. 5.📱 The screen is 820px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 10px;
     }
   } (a) Yes (b) No
6. 6.🌗 Is dark grey on white easy or hard to read? (a) easy to read (b) hard to read
7. 7.🔠 Which heading shows the SMALLEST text: <h3>, <h5>, <h2> or <h1>? (a) <h5> (b) <h1> (c) <h3> (d) <h2>
8. 8.🧭 Is <nav> semantic or not semantic? (a) not semantic (b) semantic
9. 9.⚡ What does this code print? (Look at the quotes!)
   let x = "5";
   let y = 8;
   console.log(x + y); (a) Error (b) 58 (c) 13
10. 10.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    }
11. 11.🔠 Which heading shows the SMALLEST text: <h4>, <h2>, <h5> or <h6>? (a) <h4> (b) <h2> (c) <h5> (d) <h6>
12. 12.💬 Which text will NOT show on the page?
    <!-- <p>Cricket is fun.</p> -->
    <p>I love mangoes.</p>
    <p>The red kite</p> (a) I love mangoes. (b) The red kite (c) Cricket is fun.
13. 13.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
14. 14.Which of these goes in the head? (a) <img> (b) <table> (c) <meta charset="utf-8"> (d) <p>
15. 15.🔢 When you open a web page, which comes first: “you type the URL” or “the browser asks it”? (a) you type the URL (b) the browser asks it
16. 16.📋 Which list suits a shopping list in any order? (a) <ul> (b) <ol> (c) <br> (d) <hr>
17. 17.🚀 Should file names have spaces, like my page.html? (a) No (b) Yes
18. 18.🔗 Which attribute holds the address of a link? (a) src (b) href (c) alt (d) id
19. 19.📝 On how many lines does the browser show this paragraph?
    <p>Birds sing<br>Rivers flow</p>
20. 20.⚖️ What colour is the text of this element?
    <h1 class="note" id="top">Hi</h1>
    CSS:
    .note { color: red; }
    h1 { color: purple; }
    #top { color: yellow; } (a) purple (b) red (c) white (d) yellow
21. 21.🌈 Which colour is rgb(0, 255, 255)? (a) red (b) white (c) cyan (d) bright green
22. 22.🌗 Is red on green easy or hard to read? (a) hard to read (b) easy to read
23. 23.📦 In the box model, which part is space inside the border? (a) margin (b) padding (c) border (d) content
24. 24.⚡ What number does this code print?
    let books = 10;
    books = books + 15;
    books = books - 12;
    console.log(books);
25. 25.🌍 What is the domain name in this URL?
    https://learn.example.com/maths/tables.html (a) www.example.com (b) /maths/tables.html (c) learn.example.com (d) https
26. 26.🎯 Which CSS selector matches this element?
    <p class="red" id="top">Hello</p> (a) h1 (b) .top (c) .box (d) #top
27. 27.Which of these is true of a web server? (a) hosts websites online (b) colours code to help us (c) saves our .html files (d) shows pages from the web
28. 28.🔍 One closing tag is missing. Which one?
    <h1>I love mangoes.</h1>
    <h2>Hello, world!</h2>
    <u>My best friend (a) </h2> (b) </i> (c) </u> (d) </h1>
29. 29.📋 Which list tag is an unordered list? (a) <ol> (b) <li> (c) <ul>
30. 30.🔁 How many numbers does this code print?
    for (let i = 0; i < 5; i = i + 2) {
      console.log(i);
    }
31. 31.🎨 One CSS file can style how many pages? (a) many pages (b) only one word (c) no pages (d) only one image
32. 32.⚡ What does this code show?
    let name = "Zoya";
    alert("Well done, " + name + "!"); (a) name (b) Well done, Zoya! (c) Well done, name! (d) Zoya
33. 33.🔢 In a basic web page file, which comes first: “<html>” or “</head>”? (a) <html> (b) </head>
34. 34.True or false: HTML on its own can make tables. (a) False (b) True
35. 35.🔢 On a typical page, from top to bottom, which comes first: “<footer>” or “<nav>”? (a) <nav> (b) <footer>
36. 36.📦 In the box model, which part is the gap round content? (a) padding (b) border (c) margin (d) content
37. 37.🖌️ What colour is behind the letters?
    li {
      text-align: right;
      font-size: 28px;
      color: white;
      background-color: black;
    } (a) black (b) white (c) blue
38. 38.True or false: <tr> holds the whole table. (a) False (b) True
39. 39.🧭 Is <article> semantic or not semantic? (a) not semantic (b) semantic
40. 40.🧭 Is <footer> semantic or not semantic? (a) not semantic (b) semantic

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