Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 704 · 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.True or false: .box { padding: 8px; } goes in script.js. (a) True (b) False
2. 2.Which of these has a closing tag? (a) <h1> (b) <hr> (c) <meta> (d) <br>
3. 3.🏷️ Is </title> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
4. 4.🔢 To build and share your first web page, what comes right after “test in a browser”? (a) publish it online (b) add CSS styles (c) write the HTML (d) plan what to show
5. 5.♿ Who uses a screen reader? (a) people who are blind (b) only teachers (c) only robots (d) only coders
6. 6.🔠 Which heading shows the SMALLEST text: <h4>, <h6>, <h1> or <h3>? (a) <h1> (b) <h6> (c) <h4> (d) <h3>
7. 7.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-start (d) flex-end
8. 8.True or false: the URL shows the page to you. (a) True (b) False
9. 9.📝 Does <p> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
10. 10.📋 Which list tag goes inside ul or ol? (a) <ol> (b) <ul> (c) <li>
11. 11.📋 Which list shows the steps of a recipe best? (a) <ul> (b) <br> (c) <hr> (d) <ol>
12. 12.🎯 Which CSS selector matches this element?
    <p class="note" id="logo">Hello</p> (a) .big (b) #logo (c) .logo (d) h1
13. 13.🌈 Which colour of light is strongest in rgb(228, 20, 70)? (a) blue (b) red (c) green
14. 14.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 290px;
      padding: 5px;
      border: 5px solid black;
      margin: 10px;
    }
15. 15.⚖️ What colour is the text of this element?
    <h1 class="note" id="top">Hi</h1>
    CSS:
    h1 { color: orange; }
    h1 { color: green; } (a) blue (b) purple (c) orange (d) green
16. 16.⚡ What does this code print? (Look at the quotes!)
    let x = "9";
    let y = 7;
    console.log(x + y); (a) 16 (b) Error (c) 97
17. 17.Which of these goes in the head? (a) <ul> (b) <link rel="stylesheet"> (c) <h1> (d) <a>
18. 18.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Colourful Site Styles (c) Computer Style Sheets (d) Creative Sheet System
19. 19.📦 In the box model, which part is space inside the border? (a) border (b) padding (c) margin (d) content
20. 20.📝 Which input type sends the form? (a) submit (b) password (c) date (d) text
21. 21.⚖️ What colour is the text of this element?
    <h2 class="menu" id="hero">Hi</h2>
    CSS:
    #hero { color: red; }
    h2 { color: blue; } (a) white (b) purple (c) red (d) blue
22. 22.📦 In the box model, which part is the gap to other boxes? (a) content (b) padding (c) border (d) margin
23. 23.🧭 Which semantic tag sits at the very top? (a) <aside> (b) <header> (c) <nav> (d) <main>
24. 24.True or false: in <img>, src tells which image to load. (a) False (b) True
25. 25.Which of these is true of <aside>? (a) holds a news story (b) holds the logo and title (c) holds extra side notes (d) holds copyright notes
26. 26.💬 Which text will NOT show on the page?
    <p>I love mangoes.</p>
    <p>My pets</p>
    <!-- <p>Cricket is fun.</p> -->
    <p>Fun facts</p> (a) I love mangoes. (b) Cricket is fun. (c) My pets (d) Fun facts
27. 27.🔗 Which words do you click on?
    <a href="about.html">About us</a> (a) About us (b) about.html (c) Contact us (d) href
28. 28.What does color do? (a) colours behind the text (b) makes letters bigger (c) sets the letter colour (d) picks the font style
29. 29.⚖️ What colour is the text of this element?
    <p class="box" id="end">Hi</p>
    CSS:
    p { color: black; }
    p { color: purple; } (a) black (b) blue (c) red (d) purple
30. 30.True or false: to ask before downloading is safe. (a) True (b) False
31. 31.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    }
32. 32.🔗 Which code links to about.html? (a) <a alt="about.html"> (b) <a href="about.html"> (c) <link about.html> (d) <a src="about.html">
33. 33.🌈 Which colour is #00ffff? (a) blue (b) yellow (c) cyan (d) black
34. 34.🔢 In a basic web page file, which comes first: “</html>” or “<body>”? (a) <body> (b) </html>
35. 35.📋 What number does the browser show next to “Mango”?
    <ol>
      <li>Orange</li>
      <li>Mango</li>
      <li>Banana</li>
    </ol>
36. 36.⚖️ What colour is the text of this element?
    <p class="note" id="main">Hi</p>
    CSS:
    #main { color: blue; }
    #main { color: green; } (a) blue (b) green (c) yellow (d) purple
37. 37.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 250px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 80px wide (no margins).
38. 38.🌈 In #720000 the red part is the hex number 72. What is it as a normal number?
39. 39.🔗 Which words do you click on?
    <a href="art.html">School news</a> (a) href (b) Take the quiz (c) School news (d) art.html
40. 40.🔠 Which heading shows the SMALLEST text: <h5>, <h6>, <h2> or <h4>? (a) <h5> (b) <h2> (c) <h4> (d) <h6>

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