Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 591 · 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.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 12px;
     }
   }
2. 2.🌍 What is the path in this URL?
   http://www.example.com/news/today.html (a) /games/chess.html (b) www.example.com (c) /news/today.html (d) http
3. 3.🖼️ The picture cannot load. Which text does the browser show instead?
   <img src="moon.png" alt="The full moon" width="350"> (a) Our school bus (b) width (c) moon.png (d) The full moon
4. 4.True or false: body { margin: 0; } goes in style.css. (a) False (b) True
5. 5.📋 Which tag goes around each item of a list? (a) <ol> (b) <p> (c) <li> (d) <ul>
6. 6.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 2 (c) 3 (d) 4
7. 7.⚡ Which word makes a new variable? (a) give (b) put (c) make (d) let
8. 8.⚡ What does this code print? (Look at the quotes!)
   let x = "7";
   let y = 1;
   console.log(x + y); (a) 71 (b) 8 (c) Error
9. 9.True or false: <input> has a closing tag. (a) True (b) False
10. 10.🔠 Which heading shows the SMALLEST text: <h5>, <h2>, <h4> or <h6>? (a) <h4> (b) <h5> (c) <h6> (d) <h2>
11. 11.📊 How many cells does this table have in all?
    <table>
      <tr><td>Banana</td><td>Guava</td><td>Grapes</td><td>Jamun</td></tr>
      <tr><td>Orange</td><td>Banana</td><td>Litchi</td><td>Jamun</td></tr>
    </table>
12. 12.🔢 To build and share your first web page, what comes right after “plan what to show”? (a) publish it online (b) test in a browser (c) write the HTML (d) add CSS styles
13. 13.🌈 Which hex code is blue? (a) #00ff00 (b) #00ffff (c) #ffffff (d) #0000ff
14. 14.⚡ Which JavaScript word repeats code? (a) console.log() (b) for (c) if (d) alert()
15. 15.🧭 Is <section> semantic or not semantic? (a) not semantic (b) semantic
16. 16.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <h3>Cricket is fun.</h3>
    <h2>The red kite</h2>
17. 17.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="kite.png" alt="A red kite" width="300"> (a) kite.png (b) Map of India (c) width (d) A red kite
18. 18.🔠 Which heading shows the BIGGEST text: <h6>, <h4>, <h5> or <h2>? (a) <h4> (b) <h5> (c) <h2> (d) <h6>
19. 19.💪 Which flexbox property lines boxes up across? (a) display: flex (b) gap (c) flex-direction (d) align-items
20. 20.⚖️ What colour is the text of this element?
    <h1 class="note" id="hero">Hi</h1>
    CSS:
    .note { color: white; }
    .note { color: yellow; } (a) yellow (b) orange (c) black (d) white
21. 21.True or false: the URL asks for a web page. (a) False (b) True
22. 22.🌈 Which colour is #0000ff? (a) black (b) white (c) blue (d) red
23. 23.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-size: 20px;
      font-weight: bold;
    }
24. 24.💬 Which text will NOT show on the page?
    <p>My pets</p>
    <!-- <p>Rain today</p> -->
    <p>My best friend</p>
    <p>I love mangoes.</p> (a) My best friend (b) Rain today (c) My pets (d) I love mangoes.
25. 25.🚀 Which program lets you see your web page while you build it? (a) a calculator (b) a music player (c) a web browser (d) a photo viewer
26. 26.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    .box { color: white; }
    h2 { color: green; } (a) green (b) white (c) purple (d) black
27. 27.🔗 Which words do you click on?
    <a href="games.html">Contact us</a> (a) Visit the site (b) Contact us (c) href (d) games.html
28. 28.🖌️ What colour are the letters?
    p {
      background-color: purple;
      color: red;
      text-align: left;
      font-size: 12px;
    } (a) purple (b) red (c) orange
29. 29.🔗 Where does this link open?
    <a href="https://example.com">Maths fun</a> (a) in the same tab (b) in a new tab
30. 30.✍️ Which sign goes between a property and its value? (a) = (b) - (c) ; (d) :
31. 31.♿ Does this help everyone, or make the page harder to use: images with no alt? (a) makes it harder (b) helps everyone
32. 32.💬 Which text will NOT show on the page?
    <p>Cricket is fun.</p>
    <p>Fun facts</p>
    <p>Rain today</p>
    <!-- <p>Hello, world!</p> --> (a) Hello, world! (b) Cricket is fun. (c) Rain today (d) Fun facts
33. 33.📄 Where does <table> go: in the head or in the body? (a) in the head (b) in the body
34. 34.True or false: score = score + 1; goes in script.js. (a) True (b) False
35. 35.🔗 What does HyperText mean? (a) secret text (b) text in colour (c) text with links (d) very big text
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 25px;
      border: 2px solid black;
      margin: 20px;
    }
37. 37.🔍 One closing tag is missing. Which one?
    <em>Good morning!</em>
    <small>Rain today
    <h3>Fun facts</h3> (a) </u> (b) </small> (c) </h3> (d) </em>
38. 38.🌍 Which one sends the page back? (a) the URL (b) the browser (c) HTTPS (d) the server
39. 39.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) share it with friends (b) type the password (c) close it, tell an adult (d) click it twice
40. 40.🔁 How many times does this code print “Welcome”?
    for (let i = 2; i <= 4; i++) {
      console.log("Welcome");
    }

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