Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 14 · 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 is the selector in this CSS rule?
   #top {
     border: 2px solid;
     font-size: 20px;
     margin: 10px;
   } (a) li (b) 20px (c) border (d) #top
2. 2.📋 Which list tag shows bullet points? (a) <ol> (b) <ul> (c) <li>
3. 3.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 3; i++) {
     total = total + 7;
   }
   console.log(total);
4. 4.⚡ Which JavaScript word runs code when true? (a) console.log() (b) alert() (c) for (d) if
5. 5.True or false: the URL shows the page to you. (a) True (b) False
6. 6.🌍 Which one asks for a web page? (a) the browser (b) the URL (c) HTTPS (d) the server
7. 7.🔗 Which tag makes a clickable link? (a) <p> (b) <link> (c) <a> (d) <img>
8. 8.🔠 Which heading shows the SMALLEST text: <h4>, <h1>, <h3> or <h6>? (a) <h4> (b) <h6> (c) <h1> (d) <h3>
9. 9.🔁 What does this code print?
   let score = 3;
   if (score < 42) {
     console.log("You win");
   } else {
     console.log("Play again");
   } (a) Play again (b) You win
10. 10.🧩 Which language makes a link? (a) JavaScript (b) HTML (c) CSS
11. 11.Which of these does HTML do? (a) shows a pop-up message (b) changes the page live (c) makes a link (d) rounds box corners
12. 12.🖌️ Where does the text sit on its line?
    p {
      background-color: purple;
      font-size: 40px;
      color: yellow;
      text-align: center;
    } (a) on the left (b) in the middle (c) on the right
13. 13.🔠 Which heading shows the SMALLEST text: <h3>, <h4>, <h5> or <h1>? (a) <h1> (b) <h5> (c) <h4> (d) <h3>
14. 14.💬 Which text will NOT show on the page?
    <p>My pets</p>
    <!-- <p>Our school trip</p> -->
    <p>Fun facts</p> (a) Our school trip (b) Fun facts (c) My pets
15. 15.🖼️ How many pixels wide is the picture drawn?
    <img src="fort.jpg" alt="An old fort" width="150">
16. 16.📄 Which part holds everything you see on the page? (a) the head (b) the doctype (c) the title (d) the body
17. 17.True or false: in <img>, width sets how wide it is. (a) False (b) True
18. 18.🌈 Which hex code is magenta? (a) #000000 (b) #00ff00 (c) #ffff00 (d) #ff00ff
19. 19.True or false: <input type="text"> lets you tick many. (a) True (b) False
20. 20.🚀 Should file names have spaces, like my page.html? (a) No (b) Yes
21. 21.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 4; i++) {
      total = total + i;
    }
    console.log(total);
22. 22.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 17; i = i + 3) {
      console.log(i);
    }
23. 23.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) flex-start (c) center (d) space-between
24. 24.🌗 Is red on green easy or hard to read? (a) hard to read (b) easy to read
25. 25.📝 Which tag gives a form box a name you can click? (a) <label> (b) <hr> (c) <title> (d) <h1>
26. 26.True or false: padding is the text or picture. (a) True (b) False
27. 27.🔗 Which attribute holds the address of a link? (a) src (b) alt (c) id (d) href
28. 28.♿ Who uses a screen reader? (a) people who are blind (b) only teachers (c) only robots (d) only coders
29. 29.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
30. 30.🔠 How many heading levels does HTML have? (a) 4 (b) 3 (c) 10 (d) 6
31. 31.Which of these is safe to do online? (a) post your home address (b) share your password (c) ask before downloading (d) put secrets in comments
32. 32.🧭 Which semantic tag holds extra side notes? (a) <nav> (b) <main> (c) <header> (d) <aside>
33. 33.🔍 Which is the odd one out? (a) puts a picture on a page (b) adds space around boxes (c) makes a link (d) gives the page structure
34. 34.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    p { color: red; }
    p { color: purple; } (a) red (b) purple (c) blue (d) white
35. 35.Which colour pair is hard to read? (a) white on dark blue (b) white on black (c) light grey on white (d) dark grey on white
36. 36.Which of these has a closing tag? (a) <br> (b) <meta> (c) <img> (d) <ul>
37. 37.🔍 One closing tag is missing. Which one?
    <h3>Our school trip
    <em>Cricket is fun.</em>
    <p>My best friend</p> (a) </h2> (b) </p> (c) </h3> (d) </em>
38. 38.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Riya’s Recipes</title>
    </head>
    <body>
      <h1>My drawings</h1>
      <p>We won by 5 runs.</p>
    </body>
    </html> (a) Riya’s Recipes (b) We won by 5 runs. (c) My drawings (d) body
39. 39.🎯 Can many elements share the same class? (a) Yes (b) No
40. 40.What does color do? (a) makes the text bold (b) centres a heading (c) sets the letter colour (d) makes letters bigger

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