Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 761 · 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.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 18px;
     }
   } (a) No (b) Yes
2. 2.🔁 What is the LAST number this code prints?
   for (let i = 0; i < 15; i = i + 2) {
     console.log(i);
   }
3. 3.🔍 One closing tag is missing. Which one?
   <h1>Rain today</h1>
   <small>Fun facts
   <h2>My pets</h2> (a) </h2> (b) </small> (c) </u> (d) </h1>
4. 4.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 420px;
     justify-content: center;
   }
   Inside are 4 boxes, each 100px wide (no margins).
5. 5.⚡ What does this code show?
   let name = "Arjun";
   console.log("Hello, " + name + "!"); (a) Hello, name! (b) name (c) Arjun (d) Hello, Arjun!
6. 6.True or false: h1 is an id selector. (a) False (b) True
7. 7.🛡️ Should you share your password with your best friend? (a) No (b) Yes
8. 8.True or false: to click prize links is not safe. (a) True (b) False
9. 9.What does color do? (a) picks the font style (b) sets the letter colour (c) centres a heading (d) colours behind the text
10. 10.🔒 What does the lock (HTTPS) in the address bar mean? (a) the data is scrambled (b) the site is free (c) the site is a game (d) the site is fast
11. 11.What is <input type="date"> for? (a) is for an email address (b) lets you pick only one (c) lets you tick many (d) picks a day
12. 12.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the head (b) in the body
13. 13.True or false: <ul><li>Art</li></ul> goes in index.html. (a) False (b) True
14. 14.Which of these does JavaScript do? (a) sets colours and fonts (b) changes the page live (c) adds space around boxes (d) changes the text size
15. 15.🌍 What is the path in this URL?
    https://kids.example.org/games/chess.html (a) https (b) kids.example.org (c) /games/chess.html (d) /about.html
16. 16.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
17. 17.🖌️ How big is the text, in px?
    p {
      background-color: white;
      font-size: 24px;
      color: green;
      text-align: center;
    }
18. 18.🔠 Which heading shows the BIGGEST text: <h1>, <h3>, <h6> or <h2>? (a) <h6> (b) <h1> (c) <h3> (d) <h2>
19. 19.🧭 Is <footer> semantic or not semantic? (a) semantic (b) not semantic
20. 20.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) space-between (c) center (d) flex-end
21. 21.⚡ What does this code show?
    let name = "Arjun";
    console.log("Hi, " + name + "!"); (a) Arjun (b) name (c) Hi, Arjun! (d) Hi, name!
22. 22.🧭 Which semantic tag holds the menu of links? (a) <main> (b) <article> (c) <nav> (d) <aside>
23. 23.🌍 What is the path in this URL?
    http://school.example.in/maths/tables.html (a) /maths/tables.html (b) http (c) /index.html (d) school.example.in
24. 24.🔗 Which words do you click on?
    <a href="about.html">Take the quiz</a> (a) Take the quiz (b) href (c) about.html (d) Play games
25. 25.🎯 Which element does the selector #intro style? (a) <div id="main"> (b) <div id="intro"> (c) <div class="intro"> (d) <span class="note">
26. 26.Which of these is true of <nav>? (a) holds the main content (b) sits at the bottom (c) holds one blog post (d) holds the menu of links
27. 27.True or false: in <img>, height tells which image to load. (a) False (b) True
28. 28.🔗 Which words do you click on?
    <a href="https://example.com">School news</a> (a) Take the quiz (b) School news (c) https://example.com (d) href
29. 29.⚖️ What colour is the text of this element?
    <p class="red" id="intro">Hi</p>
    CSS:
    #intro { color: orange; }
    p { color: yellow; }
    .red { color: purple; } (a) purple (b) yellow (c) green (d) orange
30. 30.🖼️ Which attribute of <img> shows if the image fails? (a) src (b) height (c) width (d) alt
31. 31.📋 Which list shows the steps of a recipe best? (a) <br> (b) <hr> (c) <ul> (d) <ol>
32. 32.⚡ Which JavaScript word runs code when true? (a) if (b) let (c) for (d) alert()
33. 33.🔁 Which loop repeats code a set number of times? (a) for (b) else (c) if (d) let
34. 34.🖌️ How big is the text, in px?
    li {
      font-size: 36px;
      color: blue;
      background-color: red;
      text-align: center;
    }
35. 35.🚀 Should file names have spaces, like my page.html? (a) Yes (b) No
36. 36.🔐 Is password a strong or a weak password? (a) strong (b) weak
37. 37.🧭 Is <main> semantic or not semantic? (a) not semantic (b) semantic
38. 38.✍️ What is the selector in this CSS rule?
    li {
      font-style: italic;
      font-size: 20px;
    } (a) 20px (b) font-style (c) body (d) li
39. 39.🖼️ How many pixels wide is the picture drawn?
    <img src="fort.jpg" alt="An old fort" width="50">
40. 40.🌍 What is the path in this URL?
    http://learn.example.com/art/gallery.html (a) http (b) learn.example.com (c) /news/today.html (d) /art/gallery.html

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