Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 467 · 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.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 3 (b) 2 (c) 6 (d) 4
2. 2.True or false: to ask before downloading is not safe. (a) False (b) True
3. 3.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 24px;
     }
   }
4. 4.🔗 Where does this link open?
   <a href="art.html">About us</a> (a) in the same tab (b) in a new tab
5. 5.📊 How many cells are in each row?
   <table>
     <tr><th>Name</th><th>Fruit</th></tr>
     <tr><td>Papaya</td><td>Mango</td></tr>
     <tr><td>Papaya</td><td>Grapes</td></tr>
     <tr><td>Mango</td><td>Mango</td></tr>
   </table>
6. 6.📄 Which part holds everything you see on the page? (a) the head (b) the title (c) the body (d) the doctype
7. 7.🔗 What does HyperText mean? (a) secret text (b) very big text (c) text with links (d) text in colour
8. 8.🖌️ Where does the text sit on its line?
   h1 {
     text-align: right;
     background-color: red;
     font-size: 40px;
     color: orange;
   } (a) in the middle (b) on the left (c) on the right
9. 9.🖼️ How many pixels wide is the picture drawn?
   <img src="tiger.jpg" alt="A tiger asleep" width="150">
10. 10.💪 Which flexbox property lines boxes up across? (a) flex-direction (b) align-items (c) gap (d) justify-content
11. 11.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-end (c) center (d) flex-start
12. 12.⚡ What number does this code print?
    let a = 40;
    let b = 29;
    console.log(a - b);
13. 13.📋 Which list tag shows bullet points? (a) <ul> (b) <li> (c) <ol>
14. 14.Which of these is the content? (a) a solid or dotted edge (b) space inside the border (c) the gap to other boxes (d) the text or picture
15. 15.What does text-align do? (a) sets the letter colour (b) makes letters bigger (c) centres a heading (d) makes the text bold
16. 16.🔠 Which heading shows the SMALLEST text: <h2>, <h1>, <h6> or <h5>? (a) <h2> (b) <h5> (c) <h6> (d) <h1>
17. 17.🔗 Which address opens when you click this link?
    <a href="about.html">Visit the site</a> (a) about.html (b) https://example.com (c) contact.html (d) Visit the site
18. 18.🔁 What does this code print?
    let marks = 16;
    if (marks < 44) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Pass (b) Try again
19. 19.📝 On how many lines does the browser show this paragraph?
    <p>Sky is blue<br>Roses are red</p>
20. 20.🖌️ What colour is behind the letters?
    h1 {
      background-color: black;
      color: green;
      font-size: 36px;
      text-align: right;
    } (a) red (b) green (c) black
21. 21.🔗 Which words do you click on?
    <a href="quiz.html">Maths fun</a> (a) Art corner (b) quiz.html (c) Maths fun (d) href
22. 22.⚡ What does this code show?
    let name = "Zoya";
    console.log("Welcome, " + name + "!"); (a) Zoya (b) name (c) Welcome, Zoya! (d) Welcome, name!
23. 23.True or false: <li> lists steps in order. (a) True (b) False
24. 24.📊 How many cells does this table have in all?
    <table>
      <tr><td>Litchi</td><td>Grapes</td></tr>
      <tr><td>Jamun</td><td>Papaya</td></tr>
    </table>
25. 25.🌈 Which hex code is cyan? (a) #ffffff (b) #ff0000 (c) #ff00ff (d) #00ffff
26. 26.True or false: in <img>, height sets how tall it is. (a) True (b) False
27. 27.True or false: <article> holds one blog post. (a) True (b) False
28. 28.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 260px;
      padding: 15px;
      border: 1px solid black;
      margin: 0px;
    }
29. 29.🔢 When you open a web page, which comes FIRST? (a) DNS finds the server (b) the server sends files (c) you type the URL (d) the browser shows it
30. 30.🏷️ Which is the closing tag for <i>? (a) <i/> (b) <i> (c) </i> (d) <\i>
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 290px;
      padding: 10px;
      border: 1px solid black;
      margin: 0px;
    }
32. 32.🔁 What does this code print?
    let score = 14;
    if (score > 6) {
      console.log("You win");
    } else {
      console.log("Play again");
    } (a) Play again (b) You win
33. 33.True or false: alert(score); goes in style.css. (a) True (b) False
34. 34.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) center (c) space-between (d) flex-start
35. 35.📄 Can HTML on its own count button clicks? (a) Yes (b) No
36. 36.🧩 Which language makes a link? (a) CSS (b) JavaScript (c) HTML
37. 37.True or false: <link rel="stylesheet"> goes in the body. (a) False (b) True
38. 38.🔠 Which heading shows the SMALLEST text: <h4>, <h6>, <h2> or <h3>? (a) <h6> (b) <h4> (c) <h2> (d) <h3>
39. 39.🌈 Which colour is rgb(255, 255, 255)? (a) blue (b) bright green (c) white (d) black
40. 40.📋 What number does the browser show next to “Papaya”?
    <ol start="8">
      <li>Grapes</li>
      <li>Orange</li>
      <li>Mango</li>
      <li>Guava</li>
      <li>Banana</li>
      <li>Papaya</li>
    </ol>

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