Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 553 · 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.🚀 You change your code. What should you do to see the change? (a) delete the file (b) save and refresh (c) rename the folder (d) switch off the PC
2. 2.🧩 Which language makes headings and lists? (a) HTML (b) CSS (c) JavaScript
3. 3.🔒 Is the connection to this address scrambled (encrypted)?
   https://www.example.net/news/today.html (a) No (b) Yes
4. 4.⚖️ What colour is the text of this element?
   <p class="red" id="end">Hi</p>
   CSS:
   .red { color: white; }
   #end { color: green; }
   p { color: yellow; } (a) orange (b) white (c) green (d) yellow
5. 5.🔗 Which code links to about.html? (a) <link about.html> (b) <a href="about.html"> (c) <a alt="about.html"> (d) <a src="about.html">
6. 6.📱 The screen is 820px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 20px;
     }
   } (a) Yes (b) No
7. 7.🔠 Which heading shows the BIGGEST text: <h6>, <h3>, <h5> or <h4>? (a) <h3> (b) <h5> (c) <h6> (d) <h4>
8. 8.📝 Which input type hides what you type? (a) radio (b) date (c) password (d) email
9. 9.🎯 What kind of selector is .menu? (a) a class selector (b) an element selector (c) an id selector
10. 10.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
11. 11.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="dog.jpg" alt="A happy dog" width="50"> (a) dog.jpg (b) width (c) A happy dog (d) The full moon
12. 12.Which of these is safe to do online? (a) post your home address (b) tell a trusted adult (c) type a password on http (d) share your password
13. 13.📝 On how many lines does the browser show this paragraph?
    <p>Roses are red<br>Sky is blue<br>Kites fly high<br>Rivers flow</p>
14. 14.📋 Which list shows the steps of a recipe best? (a) <ol> (b) <br> (c) <hr> (d) <ul>
15. 15.🖌️ Where does the text sit on its line?
    li {
      background-color: green;
      text-align: center;
      color: black;
      font-size: 16px;
    } (a) on the left (b) in the middle (c) on the right
16. 16.🔗 Which words do you click on?
    <a href="art.html">Maths fun</a> (a) Maths fun (b) art.html (c) Art corner (d) href
17. 17.🧩 Which language rounds box corners? (a) HTML (b) JavaScript (c) CSS
18. 18.True or false: <td> holds the whole table. (a) True (b) False
19. 19.💬 Which text will NOT show on the page?
    <!-- <p>Good morning!</p> -->
    <p>Our school trip</p>
    <p>Fun facts</p> (a) Our school trip (b) Good morning! (c) Fun facts
20. 20.⚡ What does this code show?
    let name = "Riya";
    alert("Hi, " + name + "!"); (a) Hi, name! (b) name (c) Hi, Riya! (d) Riya
21. 21.♿ Who uses a screen reader? (a) only robots (b) only teachers (c) only coders (d) people who are blind
22. 22.🔗 Which attribute holds the address of a link? (a) alt (b) src (c) id (d) href
23. 23.True or false: <input type="email"> hides what you type. (a) True (b) False
24. 24.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) ; (d) .
25. 25.🌍 Which one is the page’s address? (a) HTTPS (b) the URL (c) the server (d) the browser
26. 26.🔗 Which words do you click on?
    <a href="about.html">Take the quiz</a> (a) Take the quiz (b) about.html (c) Play games (d) href
27. 27.📋 What number does the browser show next to “Papaya”?
    <ol start="5">
      <li>Mango</li>
      <li>Papaya</li>
      <li>Banana</li>
      <li>Grapes</li>
      <li>Jamun</li>
    </ol>
28. 28.⚡ What does this code print? (Look at the quotes!)
    let x = "7";
    let y = 4;
    console.log(x + y); (a) 11 (b) 74 (c) Error
29. 29.What does justify-content: flex-start 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
30. 30.🖌️ What colour is behind the letters?
    h1 {
      background-color: yellow;
      font-size: 16px;
      color: blue;
      text-align: right;
    } (a) green (b) blue (c) yellow
31. 31.True or false: <ol> shows bullet points. (a) False (b) True
32. 32.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) display: flex (c) gap (d) justify-content
33. 33.🌈 Which colour is rgb(0, 255, 0)? (a) yellow (b) red (c) cyan (d) bright green
34. 34.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 280px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
35. 35.🔗 Which tag makes a clickable link? (a) <link> (b) <img> (c) <p> (d) <a>
36. 36.True or false: JavaScript counts down a timer. (a) False (b) True
37. 37.🧩 Which language puts a picture on a page? (a) JavaScript (b) HTML (c) CSS
38. 38.🛡️ Is it safe to use the same password on every site? (a) No (b) Yes
39. 39.⚡ What does JavaScript add to a web page? (a) actions and changes (b) the domain name (c) only colours (d) the page title
40. 40.⚡ What number does this code print?
    let a = 52;
    let b = 10;
    console.log(a - b);

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