Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 659 · 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.🔍 Which is the odd one out? (a) makes headings and lists (b) puts a picture on a page (c) makes a form box (d) changes the text size
2. 2.⚖️ What colour is the text of this element?
   <h2 class="menu" id="intro">Hi</h2>
   CSS:
   #intro { color: red; }
   #intro { color: black; } (a) green (b) red (c) white (d) black
3. 3.What is <input type="checkbox"> for? (a) takes only numbers (b) hides what you type (c) is for an email address (d) lets you tick many
4. 4.✍️ CSS declarations go inside which brackets? (a) [ ] (b) < > (c) ( ) (d) { }
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 110px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 50px wide (no margins).
6. 6.⚖️ What colour is the text of this element?
   <p class="big" id="main">Hi</p>
   CSS:
   p { color: green; }
   #main { color: red; }
   .big { color: blue; } (a) blue (b) green (c) red (d) purple
7. 7.Which of these is a closing tag? (a) </b> (b) <li> (c) <body> (d) <p>
8. 8.🔠 Which heading shows the BIGGEST text: <h2>, <h1>, <h5> or <h6>? (a) <h2> (b) <h6> (c) <h1> (d) <h5>
9. 9.🔗 Which address opens when you click this link?
   <a href="contact.html">Art corner</a> (a) Art corner (b) contact.html (c) maths.html (d) https://example.com
10. 10.📝 Which tag makes a drop-down list? (a) <li> (b) <ul> (c) <ol> (d) <select>
11. 11.True or false: <table> holds the whole table. (a) False (b) True
12. 12.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 310px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 40px wide (no margins).
13. 13.🔗 Which attribute holds the address of a link? (a) href (b) src (c) id (d) alt
14. 14.🚀 Which file is best for the colours and fonts? (a) style.css (b) index.html (c) photo.jpg (d) script.js
15. 15.🖌️ How big is the text, in px?
    p {
      font-size: 20px;
      color: green;
      background-color: white;
      text-align: right;
    }
16. 16.True or false: in <img>, height sets how tall it is. (a) True (b) False
17. 17.📋 What number does the browser show next to “Mango”?
    <ol start="5">
      <li>Jamun</li>
      <li>Banana</li>
      <li>Mango</li>
      <li>Grapes</li>
    </ol>
18. 18.📝 How many paragraphs does this code make?
    <p>My pets</p>
    <p>My best friend</p>
    <h2>My pets</h2>
    <p>Hello, world!</p>
    <p>The red kite</p>
    <h2>Fun facts</h2>
19. 19.🖌️ What colour are the letters?
    h2 {
      color: yellow;
      font-size: 20px;
      text-align: center;
      background-color: purple;
    } (a) green (b) purple (c) yellow
20. 20.🌍 Which one stores the site’s files? (a) the URL (b) HTTPS (c) the browser (d) the server
21. 21.Which of these is true of a code editor? (a) has an address bar (b) shows line numbers (c) stores a website’s files (d) sends pages over the net
22. 22.🔗 Which words do you click on?
    <a href="games.html">Maths fun</a> (a) href (b) Art corner (c) games.html (d) Maths fun
23. 23.True or false: “images with no alt” helps everyone use the page. (a) True (b) False
24. 24.🌍 What is the domain name in this URL?
    http://school.example.in/games/chess.html (a) http (b) www.example.net (c) /games/chess.html (d) school.example.in
25. 25.📝 Which tag makes a big box for many lines of text? (a) <input> (b) <br> (c) <p> (d) <textarea>
26. 26.💬 How many paragraphs show on the page?
    <p>Good morning!</p>
    <p>Rain today</p>
    <!-- <p>Hello, world!</p> -->
    <p>I love mangoes.</p>
27. 27.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>Rain today</p> -->
    <!-- <p>My pets</p> -->
    <!-- <p>The red kite</p> -->
    <p>Hello, world!</p>
28. 28.🏷️ Every HTML tag starts with which sign? (a) < (b) ( (c) [ (d) {
29. 29.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 6; i++) {
      total = total + i;
    }
    console.log(total);
30. 30.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) turned off (c) exactly 100px (d) 800px or narrower
31. 31.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) red (c) black (d) blue
32. 32.📋 What number does the browser show next to “Guava”?
    <ol start="3">
      <li>Grapes</li>
      <li>Guava</li>
      <li>Banana</li>
    </ol>
33. 33.⚡ What does this code show?
    let name = "Meera";
    alert("Hello, " + name + "!"); (a) Hello, name! (b) Meera (c) Hello, Meera! (d) name
34. 34.🔠 Which heading shows the BIGGEST text: <h5>, <h1>, <h2> or <h3>? (a) <h3> (b) <h5> (c) <h1> (d) <h2>
35. 35.📋 Which list tag lists steps in order? (a) <li> (b) <ul> (c) <ol>
36. 36.📋 What number does the browser show next to “Papaya”?
    <ol>
      <li>Jamun</li>
      <li>Papaya</li>
      <li>Banana</li>
    </ol>
37. 37.Which of these is true of <main>? (a) sits at the very top (b) holds one blog post (c) is the page’s key part (d) holds a side box of tips
38. 38.What does justify-content: center do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
39. 39.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 170px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 60px wide (no margins).
40. 40.True or false: <input type="text"> is for one line of words. (a) True (b) False

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