Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 306 · 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 does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
2. 2.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 210px;
     justify-content: space-between;
   }
   Inside are 3 boxes, each 50px wide (no margins).
3. 3.🔠 Which heading shows the BIGGEST text: <h3>, <h2>, <h5> or <h6>? (a) <h2> (b) <h6> (c) <h5> (d) <h3>
4. 4.🔢 In a basic web page file, which comes first: “</html>” or “</body>”? (a) </html> (b) </body>
5. 5.🖼️ Which picture file does the browser load?
   <img src="cake.jpg" alt="Birthday cake" width="200"> (a) Birthday cake (b) moon.png (c) cake.jpg (d) dog.jpg
6. 6.🔁 What does i++ do? (a) doubles i (b) takes 1 from i (c) prints i (d) adds 1 to i
7. 7.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) align-items (c) justify-content (d) display: flex
8. 8.🔍 Which is the odd one out? (a) checks a quiz answer (b) rounds box corners (c) changes the page live (d) shows a pop-up message
9. 9.📋 Which list tag is an unordered list? (a) <ol> (b) <ul> (c) <li>
10. 10.True or false: <ul> is an empty tag. (a) False (b) True
11. 11.🚀 You change your code. What should you do to see the change? (a) delete the file (b) switch off the PC (c) rename the folder (d) save and refresh
12. 12.🔠 How many <h1> headings should a page usually have? (a) 10 (b) 1 (c) 6 (d) 3
13. 13.📄 What is the first line of an HTML5 page? (a) <!DOCTYPE html> (b) <head> (c) <html> (d) <body>
14. 14.🔁 What does this code print?
    let temp = 45;
    if (temp > 17) {
      console.log("Hot");
    } else {
      console.log("Cool");
    } (a) Hot (b) Cool
15. 15.🔢 On a typical page, from top to bottom, what comes right after “<nav>”? (a) <main> (b) <footer> (c) <header>
16. 16.💬 Why do coders write comments? (a) to leave notes (b) to make links (c) to add colour (d) to show pictures
17. 17.🚀 Which file is best for the colours and fonts? (a) photo.jpg (b) script.js (c) style.css (d) index.html
18. 18.True or false: <img> has a closing tag. (a) False (b) True
19. 19.🌍 Which one stores the site’s files? (a) HTTPS (b) the server (c) the URL (d) the browser
20. 20.Which of these does HTML do? (a) gives the page structure (b) sets colours and fonts (c) changes the page live (d) changes the text size
21. 21.Which of these is an empty tag? (a) <ul> (b) <meta> (c) <h1> (d) <b>
22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: center;
    }
    Inside are 3 boxes, each 60px wide (no margins).
23. 23.🔢 To build and share your first web page, which comes first: “add CSS styles” or “test in a browser”? (a) test in a browser (b) add CSS styles
24. 24.🖌️ What colour are the letters?
    li {
      text-align: right;
      color: orange;
      font-size: 16px;
      background-color: red;
    } (a) red (b) orange (c) green
25. 25.🧭 Is <span> semantic or not semantic? (a) semantic (b) not semantic
26. 26.True or false: HTTPS scrambles data on its way. (a) False (b) True
27. 27.True or false: <main> holds the main content. (a) True (b) False
28. 28.🖌️ Which CSS property colours behind the text? (a) font-family (b) color (c) text-align (d) background-color
29. 29.🎯 What kind of selector is #main? (a) an id selector (b) an element selector (c) a class selector
30. 30.Which of these is a strong password? (a) Mango#Kite29! (b) iloveyou (c) 111111 (d) abcd1234
31. 31.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 255 (c) 1000 (d) 100
32. 32.✍️ What value is given to padding in this rule?
    h1 {
      font-style: italic;
      width: 300px;
      padding: 8px;
    } (a) bold (b) 2px solid (c) 8px (d) padding
33. 33.True or false: body { margin: 0; } goes in index.html. (a) False (b) True
34. 34.🖼️ Which attribute of <img> is read by screen readers? (a) height (b) alt (c) width (d) src
35. 35.Which of these is true of a web browser? (a) opens web pages for us (b) answers page requests (c) sends pages over the net (d) hosts websites online
36. 36.🔁 How many times does this code print “Welcome”?
    for (let i = 0; i <= 7; i++) {
      console.log("Welcome");
    }
37. 37.📝 How many <input> tags are in this form?
    <form>
      <input type="text">
      <input type="checkbox">
      <input type="password">
      <input type="date">
      <input type="number">
      <input type="submit" value="Send">
    </form>
38. 38.⚡ What number does this code print?
    let a = 9;
    let b = 14;
    console.log(a + b);
39. 39.🔠 How many heading levels does HTML have? (a) 3 (b) 6 (c) 10 (d) 4
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