Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 667 · 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 picture cannot load. Which text does the browser show instead?
   <img src="tiger.jpg" alt="A tiger asleep" width="250"> (a) A red kite (b) width (c) tiger.jpg (d) A tiger asleep
2. 2.🔐 Is qwerty a strong or a weak password? (a) strong (b) weak
3. 3.📝 Which input type hides what you type? (a) email (b) password (c) number (d) text
4. 4.🌈 In #210000 the red part is the hex number 21. What is it as a normal number?
5. 5.⚡ What number does this code print?
   let a = 56;
   let b = 12;
   console.log(a + b);
6. 6.🔗 Which words do you click on?
   <a href="contact.html">About us</a> (a) contact.html (b) Contact us (c) href (d) About us
7. 7.📱 The screen is 820px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 18px;
     }
   } (a) No (b) Yes
8. 8.📦 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: 25px;
     border: 2px solid black;
     margin: 5px;
   }
9. 9.🔠 How many headings are in this code?
   <h1>Rain today</h1>
   <h4>Good morning!</h4>
   <h3>I love mangoes.</h3>
   <p>Hello, world!</p>
10. 10.📋 Which list tag is one item of a list? (a) <ol> (b) <ul> (c) <li>
11. 11.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
12. 12.♿ Does this help everyone, or make the page harder to use: colour as the only clue? (a) helps everyone (b) makes it harder
13. 13.🔠 Which heading shows the BIGGEST text: <h5>, <h2>, <h6> or <h1>? (a) <h5> (b) <h1> (c) <h6> (d) <h2>
14. 14.🧩 Which language checks a quiz answer? (a) JavaScript (b) CSS (c) HTML
15. 15.🔢 To build and share your first web page, what comes right after “plan what to show”? (a) publish it online (b) add CSS styles (c) test in a browser (d) write the HTML
16. 16.True or false: <td> makes a heading cell. (a) False (b) True
17. 17.🔢 On a typical page, from top to bottom, what comes right after “<header>”? (a) <footer> (b) <nav> (c) <main>
18. 18.⚡ What does this code show?
    let name = "Kabir";
    console.log("Welcome, " + name + "!"); (a) Kabir (b) Welcome, Kabir! (c) name (d) Welcome, name!
19. 19.Which of these is true of <main>? (a) sits at the bottom (b) holds one blog post (c) is the page’s key part (d) holds the menu of links
20. 20.🔍 Which is the odd one out? (a) opens web pages for us (b) answers page requests (c) sends pages over the net (d) stores a website’s files
21. 21.🖼️ Which attribute of <img> names the picture file? (a) src (b) alt (c) width (d) height
22. 22.🔁 Which word runs code only when something is true? (a) let (b) for (c) log (d) if
23. 23.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    .note { color: red; }
    .note { color: purple; } (a) red (b) white (c) purple (d) black
24. 24.True or false: <header> holds copyright notes. (a) False (b) True
25. 25.🌗 Is pink on red easy or hard to read? (a) hard to read (b) easy to read
26. 26.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Creative Sheet System (c) Computer Style Sheets (d) Colourful Site Styles
27. 27.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the br tag (c) the hr tag (d) the viewport meta tag
28. 28.Which of these is true of <nav>? (a) holds extra side notes (b) helps you move around (c) is the page’s key part (d) sits at the bottom
29. 29.🔗 Where does this link open?
    <a href="contact.html">About us</a> (a) in a new tab (b) in the same tab
30. 30.True or false: padding is the gap round content. (a) True (b) False
31. 31.📋 Which list suits a shopping list in any order? (a) <ul> (b) <ol> (c) <hr> (d) <br>
32. 32.📝 Which tag makes a drop-down list? (a) <ul> (b) <select> (c) <li> (d) <ol>
33. 33.True or false: the browser asks for a web page. (a) True (b) False
34. 34.🔒 Is the connection to this address scrambled (encrypted)?
    https://school.example.in/about.html (a) No (b) Yes
35. 35.💬 How many paragraphs show on the page?
    <p>Our school trip</p>
    <!-- <p>I love mangoes.</p> -->
    <p>My best friend</p>
36. 36.♿ Does this help everyone, or make the page harder to use: tiny grey text? (a) makes it harder (b) helps everyone
37. 37.📱 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;
      }
    }
38. 38.💬 Which text will NOT show on the page?
    <!-- <p>Rain today</p> -->
    <p>Fun facts</p>
    <p>I love mangoes.</p>
    <p>My pets</p> (a) Rain today (b) My pets (c) I love mangoes. (d) Fun facts
39. 39.⚡ What does this code show?
    let name = "Arjun";
    alert("Hello, " + name + "!"); (a) Hello, name! (b) Arjun (c) name (d) Hello, Arjun!
40. 40.⚡ What does this code print? (Look at the quotes!)
    let x = "5";
    let y = 2;
    console.log(x + y); (a) Error (b) 7 (c) 52

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