Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 11 · 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.🎯 What kind of selector is .menu? (a) an element selector (b) an id selector (c) a class selector
2. 2.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the first one (d) the later one
3. 3.⚖️ What colour is the text of this element?
   <h2 class="note" id="logo">Hi</h2>
   CSS:
   h2 { color: red; }
   h2 { color: white; } (a) red (b) black (c) white (d) orange
4. 4.💬 How does an HTML comment start? (a) # (b) /* (c) <!-- (d) //
5. 5.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 8px;
     }
   } (a) Yes (b) No
6. 6.Which of these is true of <header>? (a) holds extra side notes (b) holds copyright notes (c) holds the logo and title (d) is the page’s key part
7. 7.True or false: the browser asks for a web page. (a) False (b) True
8. 8.🔁 What does this code print?
   let age = 30;
   if (age > 39) {
     console.log("teen");
   } else {
     console.log("child");
   } (a) child (b) teen
9. 9.⚡ A JavaScript file usually ends with which extension? (a) .html (b) .js (c) .css (d) .jpg
10. 10.🔠 Which heading shows the SMALLEST text: <h4>, <h1>, <h5> or <h2>? (a) <h4> (b) <h5> (c) <h2> (d) <h1>
11. 11.True or false: #top is a class selector. (a) False (b) True
12. 12.🔠 Which tag is the least important heading? (a) <h6> (b) <h3> (c) <p> (d) <h1>
13. 13.♿ Is this heading order correct (no level skipped)?
    <h1> → <h3> → <h3> → <h4> (a) No (b) Yes
14. 14.✍️ What value is given to font-size in this rule?
    #top {
      background-color: yellow;
      font-size: 20px;
    } (a) center (b) yellow (c) 20px (d) font-size
15. 15.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) makes it harder (b) helps everyone
16. 16.🚀 Which file should this code go in: h1 { font-size: 32px; } (a) index.html (b) script.js (c) style.css
17. 17.📊 How many cells are in each row?
    <table>
      <tr><td>Papaya</td><td>Grapes</td></tr>
      <tr><td>Banana</td><td>Banana</td></tr>
      <tr><td>Litchi</td><td>Jamun</td></tr>
    </table>
18. 18.🚀 Which file is best for code that reacts to clicks? (a) style.css (b) notes.txt (c) index.html (d) script.js
19. 19.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 380px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 80px wide (no margins).
20. 20.🌍 What is the protocol in this URL?
    http://school.example.in/art/gallery.html (a) school.example.in (b) /art/gallery.html (c) https (d) http
21. 21.🌐 Which one has an address bar? (a) a code editor (b) a web browser (c) a web server
22. 22.💬 How many paragraphs show on the page?
    <p>Fun facts</p>
    <!-- <p>Our school trip</p> -->
    <p>The red kite</p>
    <!-- <p>My best friend</p> -->
23. 23.📝 How many paragraphs does this code make?
    <p>Rain today</p>
    <h2>Fun facts</h2>
    <h2>I love mangoes.</h2>
    <p>My best friend</p>
    <h2>Our school trip</h2>
24. 24.🎯 What kind of selector is #top? (a) an id selector (b) an element selector (c) a class selector
25. 25.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 200px;
      padding: 25px;
      border: 5px solid black;
      margin: 15px;
    }
26. 26.Which of these is a weak password? (a) iloveyou (b) S0lar!Pen#8 (c) Blue@Tiger_74 (d) Mango#Kite29!
27. 27.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 2 (c) 6 (d) 3
28. 28.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h2> → <h3> (a) Yes (b) No
29. 29.🖌️ Which CSS property centres a heading? (a) font-weight (b) text-align (c) font-size (d) font-family
30. 30.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is free (b) the data is scrambled (c) the site is a game (d) the site is fast
31. 31.📊 How many cells does this table have in all?
    <table>
      <tr><td>Guava</td><td>Grapes</td></tr>
      <tr><td>Grapes</td><td>Mango</td></tr>
    </table>
32. 32.🏷️ Which is the closing tag for <em>? (a) <\em> (b) <em> (c) <em/> (d) </em>
33. 33.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 4 boxes, each 40px wide (no margins).
34. 34.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) justify-content (c) gap (d) align-items
35. 35.⚖️ What colour is the text of this element?
    <p class="menu" id="top">Hi</p>
    CSS:
    .menu { color: orange; }
    p { color: white; } (a) green (b) yellow (c) white (d) orange
36. 36.🔁 What does this code print?
    let temp = 50;
    if (temp >= 22) {
      console.log("Hot");
    } else {
      console.log("Cool");
    } (a) Cool (b) Hot
37. 37.🔗 Where does this link open?
    <a href="art.html" target="_blank">School news</a> (a) in the same tab (b) in a new tab
38. 38.True or false: CSS makes a form box. (a) False (b) True
39. 39.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    h2 { color: red; }
    h2 { color: black; } (a) yellow (b) red (c) white (d) black
40. 40.💬 Which text will NOT show on the page?
    <p>Good morning!</p>
    <p>Cricket is fun.</p>
    <!-- <p>My best friend</p> --> (a) Cricket is fun. (b) Good morning! (c) My best friend

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