Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 871 · 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.🔢 When you open a web page, which comes FIRST? (a) the browser shows it (b) you type the URL (c) the browser asks it (d) the server sends files
2. 2.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 14px;
     }
   } (a) No (b) Yes
3. 3.🎯 Which element does the selector #top style? (a) <p class="red"> (b) <span class="top"> (c) <span id="intro"> (d) <span id="top">
4. 4.🔁 What does this code print?
   let temp = 43;
   if (temp < 15) {
     console.log("Hot");
   } else {
     console.log("Cool");
   } (a) Cool (b) Hot
5. 5.📊 How many cells are in each row?
   <table>
     <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
     <tr><td>Banana</td><td>Banana</td><td>Papaya</td><td>Grapes</td></tr>
     <tr><td>Mango</td><td>Grapes</td><td>Litchi</td><td>Grapes</td></tr>
   </table>
6. 6.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) flex-end (c) space-between (d) center
7. 7.Which of these is true of <footer>? (a) holds a side box of tips (b) holds copyright notes (c) holds a news story (d) sits at the very top
8. 8.What does font-weight do? (a) sets the letter colour (b) picks the font style (c) centres a heading (d) makes the text bold
9. 9.📄 Can HTML on its own make bullet lists? (a) Yes (b) No
10. 10.🔤 In “HTML”, what does the M stand for? (a) Markup (b) Machine (c) Mouse (d) Modern
11. 11.📝 On how many lines does the browser show this paragraph?
    <p>Birds sing<br>Rivers flow<br>Roses are red<br>Sky is blue</p>
12. 12.🎯 What kind of selector is .big? (a) an id selector (b) an element selector (c) a class selector
13. 13.True or false: in <img>, src is read by screen readers. (a) False (b) True
14. 14.Which of these is a closing tag? (a) <body> (b) <h1> (c) </title> (d) <title>
15. 15.⚡ What does this code print? (Look at the quotes!)
    let x = "7";
    let y = 6;
    console.log(x + y); (a) 13 (b) 76 (c) Error
16. 16.📝 How many paragraphs does this code make?
    <p>Our school trip</p>
    <p>My pets</p>
    <h2>My best friend</h2>
17. 17.🛡️ Should you share your password with your best friend? (a) Yes (b) No
18. 18.🎨 Which tag connects an outside CSS file? (a) <img> (b) <css> (c) <a> (d) <link>
19. 19.📋 Which list suits a shopping list in any order? (a) <br> (b) <ul> (c) <ol> (d) <hr>
20. 20.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    h1 { color: blue; }
    #main { color: green; }
    .note { color: white; } (a) white (b) green (c) blue (d) red
21. 21.🏷️ Is <title> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
22. 22.📝 What does <hr> draw? (a) a link (b) a table (c) a line across the page (d) a picture
23. 23.🔗 Which words do you click on?
    <a href="quiz.html">Art corner</a> (a) School news (b) href (c) Art corner (d) quiz.html
24. 24.🔗 Where does this link open?
    <a href="games.html">School news</a> (a) in the same tab (b) in a new tab
25. 25.✍️ Which property is set to 10px in this rule?
    .box {
      font-weight: bold;
      margin: 10px;
    } (a) padding (b) margin (c) 10px (d) font-weight
26. 26.♿ Does this help everyone, or make the page harder to use: add alt text to images? (a) helps everyone (b) makes it harder
27. 27.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 1000 (c) 100 (d) 255
28. 28.💬 Which text will NOT show on the page?
    <p>Our school trip</p>
    <p>Hello, world!</p>
    <p>Fun facts</p>
    <!-- <p>My pets</p> --> (a) Hello, world! (b) Fun facts (c) My pets (d) Our school trip
29. 29.🔗 Which tag makes a clickable link? (a) <link> (b) <p> (c) <a> (d) <img>
30. 30.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
31. 31.⚡ What does this code print? (Look at the quotes!)
    let x = "9";
    let y = 3;
    console.log(x + y); (a) Error (b) 12 (c) 93
32. 32.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Grapes</td><td>Papaya</td><td>Mango</td><td>Jamun</td></tr>
    </table>
33. 33.💬 Why do coders write comments? (a) to leave notes (b) to make links (c) to add colour (d) to show pictures
34. 34.📝 Does <input> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
35. 35.🖌️ How big is the text, in px?
    li {
      text-align: center;
      color: blue;
      background-color: purple;
      font-size: 20px;
    }
36. 36.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Litchi</td><td>Mango</td></tr>
      <tr><td>Orange</td><td>Jamun</td></tr>
      <tr><td>Mango</td><td>Jamun</td></tr>
    </table>
37. 37.🔗 Where does this link open?
    <a href="about.html">School news</a> (a) in the same tab (b) in a new tab
38. 38.📦 In the box model, which part is space outside the border? (a) content (b) padding (c) border (d) margin
39. 39.🔍 Which line is missing its closing tag?
    line 1: <i>Cricket is fun.</i>
    line 2: <h2>The red kite
    line 3: <strong>Hello, world!</strong> (a) line 1 (b) line 2 (c) line 3
40. 40.🎯 Which element does the selector p style? (a) <h1> (b) <li id="main"> (c) <p class="menu"> (d) <h2 class="menu">

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