Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 2 · 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 declarations (property: value pairs) are in this rule?
   p {
     border: 2px solid;
   }
2. 2.🔗 Which address opens when you click this link?
   <a href="art.html">Contact us</a> (a) news.html (b) Contact us (c) quiz.html (d) art.html
3. 3.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 150px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 40px wide (no margins).
4. 4.💬 Which text will NOT show on the page?
   <p>Cricket is fun.</p>
   <p>I love mangoes.</p>
   <!-- <p>Fun facts</p> --> (a) Cricket is fun. (b) I love mangoes. (c) Fun facts
5. 5.🌈 Which colour of light is strongest in rgb(140, 229, 93)? (a) red (b) blue (c) green
6. 6.🖼️ Which tag puts a picture on a page? (a) <a> (b) <pic> (c) <p> (d) <img>
7. 7.⚖️ What colour is the text of this element?
   <h2 class="box" id="end">Hi</h2>
   CSS:
   .box { color: purple; }
   .box { color: blue; } (a) red (b) white (c) purple (d) blue
8. 8.Which of these is true of <article>? (a) holds a news story (b) is the page’s key part (c) holds a side box of tips (d) holds extra side notes
9. 9.Which of these is an empty tag? (a) <input> (b) <ul> (c) <h1> (d) <li>
10. 10.📝 On how many lines does the browser show this paragraph?
    <p>Roses are red<br>Rivers flow<br>Kites fly high<br>Birds sing</p>
11. 11.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="cake.jpg" alt="Birthday cake" width="300"> (a) A happy dog (b) width (c) Birthday cake (d) cake.jpg
12. 12.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
13. 13.📝 Does <li> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
14. 14.🌈 Which colour of light is strongest in rgb(16, 162, 23)? (a) red (b) blue (c) green
15. 15.📝 How many paragraphs does this code make?
    <p>Hello, world!</p>
    <h2>Good morning!</h2>
    <p>I love mangoes.</p>
16. 16.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 6px;
      }
    }
17. 17.🔗 Which words do you click on?
    <a href="games.html">Art corner</a> (a) School news (b) games.html (c) href (d) Art corner
18. 18.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    p { color: white; }
    .star { color: red; } (a) yellow (b) black (c) white (d) red
19. 19.📝 Does <h1> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
20. 20.⚖️ What colour is the text of this element?
    <h1 class="big" id="main">Hi</h1>
    CSS:
    .big { color: red; }
    h1 { color: blue; }
    #main { color: black; } (a) orange (b) red (c) blue (d) black
21. 21.🔗 Where does this link open?
    <a href="contact.html">Play games</a> (a) in the same tab (b) in a new tab
22. 22.🔗 Which attribute holds the address of a link? (a) src (b) alt (c) id (d) href
23. 23.✍️ Which property is set to 10px in this rule?
    #top {
      margin: 10px;
      color: red;
    } (a) 10px (b) padding (c) font-weight (d) margin
24. 24.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) align-items (c) display: flex (d) gap
25. 25.🔡 Are HTML tag names usually written in small letters? (a) Yes (b) No
26. 26.🔗 Where does this link open?
    <a href="art.html">Art corner</a> (a) in the same tab (b) in a new tab
27. 27.🔗 Where does this link open?
    <a href="games.html">Visit the site</a> (a) in a new tab (b) in the same tab
28. 28.🔠 Which heading shows the SMALLEST text: <h3>, <h4>, <h5> or <h1>? (a) <h5> (b) <h1> (c) <h3> (d) <h4>
29. 29.🌐 Which one has an address bar? (a) a code editor (b) a web server (c) a web browser
30. 30.⚡ What number does this code print?
    let a = 14;
    let b = 14;
    console.log(a + b);
31. 31.🛡️ Online: is it safe to download from pop-ups? (a) safe (b) not safe
32. 32.📄 Where does <img> go: in the head or in the body? (a) in the head (b) in the body
33. 33.True or false: <tr> makes one data cell. (a) True (b) False
34. 34.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
35. 35.Which of these does HTML do? (a) counts down a timer (b) changes the page live (c) makes a form box (d) sets colours and fonts
36. 36.What does color do? (a) sets the letter colour (b) colours behind the text (c) makes letters bigger (d) picks the font style
37. 37.🎯 Which element does the selector .red style? (a) <li class="red"> (b) <li id="red"> (c) <div class="star"> (d) <li class="box">
38. 38.Which of these is safe to do online? (a) type a password on http (b) share your password (c) click prize links (d) tell a trusted adult
39. 39.🏷️ Is </b> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
40. 40.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    } (a) Yes (b) No

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