Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 446 · 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 much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 90px;
     padding: 10px;
     border: 3px solid black;
     margin: 5px;
   }
2. 2.🔠 Which heading shows the BIGGEST text: <h1>, <h3>, <h2> or <h6>? (a) <h2> (b) <h6> (c) <h3> (d) <h1>
3. 3.True or false: to download from pop-ups is safe. (a) True (b) False
4. 4.🔗 Which words do you click on?
   <a href="art.html">About us</a> (a) art.html (b) About us (c) href (d) Contact us
5. 5.What does justify-content: flex-start do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
6. 6.💬 Does the browser show comments on the page? (a) No (b) Yes
7. 7.💬 Which text will NOT show on the page?
   <p>My pets</p>
   <p>Hello, world!</p>
   <p>Fun facts</p>
   <!-- <p>Cricket is fun.</p> --> (a) Cricket is fun. (b) Fun facts (c) My pets (d) Hello, world!
8. 8.📝 Which input type picks a day? (a) text (b) password (c) email (d) date
9. 9.📊 Are <th> cells shown bold and centred by default? (a) No (b) Yes
10. 10.🎯 Which element does the selector #intro style? (a) <div class="note"> (b) <li id="main"> (c) <li id="intro"> (d) <li class="intro">
11. 11.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-start (c) space-between (d) flex-end
12. 12.📊 In a table, which tag is a row? (a) <tr> (b) <tb> (c) <th> (d) <td>
13. 13.⚡ What number does this code print?
    let apples = 25;
    apples = apples + 3;
    apples = apples - 3;
    console.log(apples);
14. 14.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
15. 15.🔗 Which words do you click on?
    <a href="https://example.com">Visit the site</a> (a) href (b) Visit the site (c) https://example.com (d) Maths fun
16. 16.🌐 Which one sends pages over the net? (a) a code editor (b) a web server (c) a web browser
17. 17.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) flex-start (c) space-between (d) center
18. 18.True or false: to use a strong password is safe. (a) True (b) False
19. 19.🔍 One closing tag is missing. Which one?
    <i>Hello, world!</i>
    <u>Our school trip
    <b>Good morning!</b> (a) </u> (b) </i> (c) </h1> (d) </b>
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 10px;
      border: 1px solid black;
      margin: 0px;
    }
21. 21.📋 Which list tag is an unordered list? (a) <ol> (b) <li> (c) <ul>
22. 22.🎨 What does CSS stand for? (a) Creative Sheet System (b) Cascading Style Sheets (c) Computer Style Sheets (d) Colourful Site Styles
23. 23.✍️ Which property is set to center in this rule?
    h1 {
      text-align: center;
      font-weight: bold;
    } (a) margin (b) background-color (c) center (d) text-align
24. 24.What does font-weight do? (a) makes the text bold (b) picks the font style (c) makes letters bigger (d) sets the letter colour
25. 25.🚀 Which file is best for the colours and fonts? (a) photo.jpg (b) style.css (c) script.js (d) index.html
26. 26.🛡️ Online: is it safe to keep passwords secret? (a) not safe (b) safe
27. 27.🎯 Which CSS selector matches this element?
    <h2 class="box" id="intro">Hello</h2> (a) #box (b) .star (c) h2 (d) .intro
28. 28.🔗 Which words do you click on?
    <a href="https://example.com">About us</a> (a) href (b) Contact us (c) About us (d) https://example.com
29. 29.🔠 Which heading shows the SMALLEST text: <h6>, <h4>, <h1> or <h2>? (a) <h2> (b) <h4> (c) <h1> (d) <h6>
30. 30.🖌️ What colour are the letters?
    h2 {
      color: purple;
      font-size: 32px;
      text-align: center;
      background-color: green;
    } (a) blue (b) purple (c) green
31. 31.🔗 Which address opens when you click this link?
    <a href="contact.html">Maths fun</a> (a) Maths fun (b) maths.html (c) https://example.com (d) contact.html
32. 32.✍️ Which property is set to bold in this rule?
    li {
      padding: 8px;
      font-weight: bold;
    } (a) border (b) bold (c) font-weight (d) width
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      border: 2px solid;
      margin: 10px;
      font-style: italic;
    }
34. 34.🌈 In #0000b3 the blue part is the hex number b3. What is it as a normal number?
35. 35.🖼️ Which attribute of <img> describes the picture? (a) width (b) src (c) height (d) alt
36. 36.🌈 In #c40000 the red part is the hex number c4. What is it as a normal number?
37. 37.True or false: <th> makes a heading cell. (a) False (b) True
38. 38.What is <input type="date"> for? (a) picks a day (b) hides what you type (c) is for one line of words (d) lets you pick only one
39. 39.🔗 What does target="_blank" do to a link? (a) opens it in a new tab (b) hides the link (c) makes it bold (d) makes it blank
40. 40.🖼️ Which attribute of <img> tells which image to load? (a) width (b) height (c) src (d) alt

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