Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 215 · 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 does this code show?
   let name = "Aman";
   console.log("Hello, " + name + "!"); (a) name (b) Hello, name! (c) Hello, Aman! (d) Aman
2. 2.🚀 Which file is best for the colours and fonts? (a) photo.jpg (b) index.html (c) style.css (d) script.js
3. 3.🖼️ Which picture file does the browser load?
   <img src="moon.png" alt="The full moon" width="300"> (a) moon.png (b) The full moon (c) fort.jpg (d) bus.jpg
4. 4.📋 Which list tag shows 1, 2, 3 numbers? (a) <li> (b) <ol> (c) <ul>
5. 5.⚡ Which JavaScript word shows a pop-up box? (a) if (b) alert() (c) console.log() (d) let
6. 6.What does background-color do? (a) sets the letter colour (b) makes the text bold (c) colours behind the text (d) centres a heading
7. 7.Which of these is not safe to do online? (a) use a nickname in games (b) keep passwords secret (c) click prize links (d) tell a trusted adult
8. 8.🚀 Which tag loads script.js into a page? (a) <a href="script.js"> (b) <link script.js> (c) <script src="script.js"> (d) <js src="script.js">
9. 9.🖼️ The picture cannot load. Which text does the browser show instead?
   <img src="map.png" alt="Map of India" width="150"> (a) Map of India (b) map.png (c) width (d) Birthday cake
10. 10.True or false: <article> holds extra side notes. (a) False (b) True
11. 11.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) green (c) white (d) red
12. 12.✍️ What is the selector in this CSS rule?
    #top {
      text-align: center;
      border: 2px solid;
      background-color: yellow;
    } (a) li (b) 2px solid (c) text-align (d) #top
13. 13.📝 On how many lines does the browser show this paragraph?
    <p>Stars shine<br>Kites fly high<br>Sky is blue<br>Roses are red</p>
14. 14.🏷️ Is </li> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
15. 15.🚀 Which file should this code go in: <ul><li>Art</li></ul> (a) script.js (b) style.css (c) index.html
16. 16.🌐 Which one shows pages from the web? (a) a code editor (b) a web server (c) a web browser
17. 17.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    }
18. 18.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h4> → <h3> (a) Yes (b) No
19. 19.True or false: the border is the gap round content. (a) True (b) False
20. 20.🔗 Where does this link open?
    <a href="about.html">School news</a> (a) in the same tab (b) in a new tab
21. 21.📝 How many paragraphs does this code make?
    <p>Cricket is fun.</p>
    <h2>Hello, world!</h2>
    <p>My best friend</p>
    <h2>My pets</h2>
    <p>My best friend</p>
    <p>Hello, world!</p>
22. 22.True or false: <style> goes in the head. (a) True (b) False
23. 23.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    #top { color: yellow; }
    #top { color: blue; } (a) white (b) yellow (c) purple (d) blue
24. 24.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
25. 25.🔠 How many headings are in this code?
    <h1>Our school trip</h1>
    <p>Good morning!</p>
    <p>I love mangoes.</p>
    <h4>Fun facts</h4>
26. 26.⚡ Which JavaScript word writes in the console? (a) alert() (b) if (c) console.log() (d) for
27. 27.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) click it twice (b) share it with friends (c) close it, tell an adult (d) type the password
28. 28.🖌️ How big is the text, in px?
    h1 {
      text-align: left;
      font-size: 28px;
      color: white;
      background-color: blue;
    }
29. 29.💬 How many paragraphs show on the page?
    <!-- <p>The red kite</p> -->
    <p>Cricket is fun.</p>
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>Rain today</p> -->
    <p>My best friend</p>
30. 30.True or false: <table> holds the whole table. (a) False (b) True
31. 31.🖼️ Which picture file does the browser load?
    <img src="cake.jpg" alt="Birthday cake" width="250"> (a) moon.png (b) cake.jpg (c) dog.jpg (d) Birthday cake
32. 32.🔗 Which words do you click on?
    <a href="quiz.html">Take the quiz</a> (a) Take the quiz (b) quiz.html (c) href (d) Play games
33. 33.🔍 Which line is missing its closing tag?
    line 1: <b>My pets
    line 2: <p>Cricket is fun.</p>
    line 3: <h1>The red kite</h1> (a) line 2 (b) line 3 (c) line 1
34. 34.🔁 How many numbers does this code print?
    for (let i = 0; i < 14; i = i + 4) {
      console.log(i);
    }
35. 35.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 250px;
      padding: 20px;
      border: 4px solid black;
      margin: 20px;
    }
36. 36.🧭 Which semantic tag holds the logo and title? (a) <header> (b) <footer> (c) <article> (d) <nav>
37. 37.🔁 What does i++ do? (a) adds 1 to i (b) doubles i (c) takes 1 from i (d) prints i
38. 38.True or false: the border is the line round the box. (a) False (b) True
39. 39.📄 Where does <a> go: in the head or in the body? (a) in the body (b) in the head
40. 40.📄 Can HTML on its own pick a random number? (a) No (b) Yes

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