Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 875 · 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 domain name in this URL?
   http://www.example.com/news/today.html (a) http (b) /news/today.html (c) www.example.com (d) kids.example.org
2. 2.True or false: <ol> is an ordered list. (a) True (b) False
3. 3.🚀 Which file should this code go in: <p>Hello!</p> (a) style.css (b) index.html (c) script.js
4. 4.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) flex-end (c) center (d) space-between
5. 5.🔁 How many times does this code print “Hello”?
   for (let i = 0; i <= 8; i++) {
     console.log("Hello");
   }
6. 6.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 130px;
     padding: 25px;
     border: 5px solid black;
     margin: 15px;
   }
7. 7.🔗 Where does this link open?
   <a href="quiz.html">Art corner</a> (a) in the same tab (b) in a new tab
8. 8.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) exactly 1000px (c) 600px or wider (d) 600px or narrower
9. 9.💬 How many paragraphs show on the page?
   <!-- <p>My pets</p> -->
   <!-- <p>My best friend</p> -->
   <p>Good morning!</p>
   <p>The red kite</p>
10. 10.⚖️ What colour is the text of this element?
    <h2 class="menu" id="main">Hi</h2>
    CSS:
    #main { color: yellow; }
    h2 { color: black; }
    .menu { color: purple; } (a) purple (b) orange (c) yellow (d) black
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-style: italic;
      width: 300px;
      padding: 8px;
    }
12. 12.True or false: <aside> holds a news story. (a) False (b) True
13. 13.🔁 How many times does this code print “Hello”?
    for (let i = 1; i < 6; i++) {
      console.log("Hello");
    }
14. 14.🖌️ How big is the text, in px?
    li {
      color: white;
      text-align: center;
      background-color: green;
      font-size: 24px;
    }
15. 15.📄 Can HTML on its own make bullet lists? (a) Yes (b) No
16. 16.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
17. 17.📄 Where does <ul> go: in the head or in the body? (a) in the head (b) in the body
18. 18.Which of these has a closing tag? (a) <hr> (b) <meta> (c) <input> (d) <b>
19. 19.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Art Gallery</title>
    </head>
    <body>
      <h1>All about me</h1>
      <p>We won by 5 runs.</p>
    </body>
    </html> (a) All about me (b) We won by 5 runs. (c) Art Gallery (d) body
20. 20.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 120px;
      padding: 15px;
      border: 4px solid black;
      margin: 5px;
    }
21. 21.⚡ What number does this code print?
    let a = 15;
    let b = 13;
    console.log(a + b);
22. 22.🔗 Which attribute holds the address of a link? (a) href (b) id (c) alt (d) src
23. 23.🖌️ Which CSS property makes the text bold? (a) font-family (b) font-weight (c) text-align (d) color
24. 24.🌗 Is black on white easy or hard to read? (a) easy to read (b) hard to read
25. 25.📝 How many paragraphs does this code make?
    <p>Hello, world!</p>
    <p>My pets</p>
    <h2>I love mangoes.</h2>
    <p>Good morning!</p>
    <h2>My pets</h2>
26. 26.Which colour pair is easy to read? (a) yellow on white (b) white on dark blue (c) light grey on white (d) red on green
27. 27.True or false: in <img>, src sets how wide it is. (a) False (b) True
28. 28.Which colour pair is easy to read? (a) blue on purple (b) pink on red (c) dark grey on white (d) yellow on white
29. 29.🎨 Which tag holds CSS inside the head? (a) <body> (b) <style> (c) <css> (d) <script>
30. 30.True or false: <article> sits at the bottom. (a) True (b) False
31. 31.🎯 Which CSS selector matches this element?
    <p class="big" id="intro">Hello</p> (a) #intro (b) .red (c) #big (d) #main
32. 32.⚖️ What colour is the text of this element?
    <p class="star" id="end">Hi</p>
    CSS:
    .star { color: green; }
    .star { color: blue; } (a) blue (b) yellow (c) green (d) black
33. 33.🔗 Which tag makes a clickable link? (a) <p> (b) <img> (c) <link> (d) <a>
34. 34.📊 How many rows does this table have?
    <table>
      <tr><td>Grapes</td><td>Banana</td><td>Mango</td><td>Jamun</td></tr>
      <tr><td>Banana</td><td>Grapes</td><td>Papaya</td><td>Mango</td></tr>
    </table>
35. 35.🔗 Which address opens when you click this link?
    <a href="art.html">Maths fun</a> (a) art.html (b) news.html (c) Maths fun (d) quiz.html
36. 36.⚡ Where does console.log() show its output? (a) on the title bar (b) in the address bar (c) on the printer (d) in the console
37. 37.🔢 When you open a web page, what comes right after “the browser asks it”? (a) the server sends files (b) you type the URL (c) DNS finds the server (d) the browser shows it
38. 38.📝 How many <input> tags are in this form?
    <form>
      <input type="email">
      <input type="text">
      <input type="number">
      <input type="password">
      <input type="date">
      <input type="submit" value="Send">
    </form>
39. 39.📄 Can HTML on its own make links to pages? (a) No (b) Yes
40. 40.True or false: padding is a solid or dotted edge. (a) True (b) False

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