Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 300 · 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: padding is the gap round content. (a) True (b) False
2. 2.🚀 Which file should this code go in: <ul><li>Art</li></ul> (a) style.css (b) index.html (c) script.js
3. 3.🔍 Which line is missing its closing tag?
   line 1: <i>Fun facts</i>
   line 2: <h1>Cricket is fun.</h1>
   line 3: <b>Our school trip (a) line 2 (b) line 3 (c) line 1
4. 4.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 24px;
     }
   }
5. 5.⚡ Which JavaScript word runs code when true? (a) for (b) console.log() (c) alert() (d) if
6. 6.🔗 Which words do you click on?
   <a href="quiz.html">Play games</a> (a) Play games (b) href (c) quiz.html (d) About us
7. 7.📦 In the box model, which part is space outside the border? (a) padding (b) content (c) margin (d) border
8. 8.🛡️ Online: is it safe to tell a trusted adult? (a) safe (b) not safe
9. 9.True or false: to post your home address is safe. (a) False (b) True
10. 10.💪 Which flexbox property spaces boxes along a row? (a) gap (b) flex-direction (c) display: flex (d) justify-content
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      background-color: yellow;
      width: 300px;
      font-style: italic;
      text-align: center;
    }
12. 12.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
13. 13.🔗 Which words do you click on?
    <a href="contact.html">Maths fun</a> (a) Art corner (b) href (c) Maths fun (d) contact.html
14. 14.🔗 Which address opens when you click this link?
    <a href="art.html">About us</a> (a) quiz.html (b) art.html (c) About us (d) news.html
15. 15.📄 Where does <img> go: in the head or in the body? (a) in the head (b) in the body
16. 16.🎯 Which CSS selector matches this element?
    <li class="note" id="intro">Hello</li> (a) #intro (b) .big (c) div (d) .intro
17. 17.🔗 What does target="_blank" do to a link? (a) makes it blank (b) hides the link (c) makes it bold (d) opens it in a new tab
18. 18.🧭 Is <aside> semantic or not semantic? (a) semantic (b) not semantic
19. 19.📋 Which list tag is an ordered list? (a) <li> (b) <ul> (c) <ol>
20. 20.🌈 In #00001e the blue part is the hex number 1e. What is it as a normal number?
21. 21.🖌️ Where does the text sit on its line?
    h1 {
      text-align: center;
      color: white;
      font-size: 20px;
      background-color: green;
    } (a) on the left (b) on the right (c) in the middle
22. 22.📝 How many paragraphs does this code make?
    <p>I love mangoes.</p>
    <h2>The red kite</h2>
    <p>The red kite</p>
    <p>The red kite</p>
    <p>My pets</p>
    <h2>The red kite</h2>
23. 23.💬 How many paragraphs show on the page?
    <p>Good morning!</p>
    <p>My best friend</p>
    <p>Rain today</p>
    <!-- <p>Hello, world!</p> -->
24. 24.True or false: <ol> lists things in any order. (a) True (b) False
25. 25.🔠 Which heading shows the SMALLEST text: <h2>, <h4>, <h3> or <h6>? (a) <h3> (b) <h2> (c) <h4> (d) <h6>
26. 26.True or false: a web browser is where we type code. (a) True (b) False
27. 27.🌈 Which colour of light is strongest in rgb(108, 54, 206)? (a) green (b) red (c) blue
28. 28.🔗 Which words do you click on?
    <a href="https://example.com">Visit the site</a> (a) href (b) Maths fun (c) Visit the site (d) https://example.com
29. 29.True or false: the browser shows the page to you. (a) True (b) False
30. 30.📄 Can HTML on its own make tables? (a) No (b) Yes
31. 31.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
32. 32.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
33. 33.True or false: a web browser sends pages over the net. (a) False (b) True
34. 34.📊 Which tag makes one table row? (a) <tr> (b) <td> (c) <table> (d) <th>
35. 35.🔢 On a typical page, from top to bottom, which comes first: “<main>” or “<header>”? (a) <main> (b) <header>
36. 36.Which of these is safe to do online? (a) post your home address (b) share your password (c) tell a trusted adult (d) meet an online stranger
37. 37.Which of these goes in the body? (a) <meta charset="utf-8"> (b) <style> (c) <ul> (d) <title>
38. 38.⚡ Which JavaScript word makes a new variable? (a) let (b) alert() (c) for (d) console.log()
39. 39.🔠 Which heading shows the BIGGEST text: <h3>, <h6>, <h1> or <h2>? (a) <h6> (b) <h3> (c) <h1> (d) <h2>
40. 40.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h3> → <h3> (a) No (b) Yes

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