Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 680 · 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.🔗 Where does this link open?
   <a href="quiz.html" target="_blank">Play games</a> (a) in a new tab (b) in the same tab
2. 2.📋 Which list tag is one item of a list? (a) <ul> (b) <li> (c) <ol>
3. 3.🔍 One closing tag is missing. Which one?
   <small>My pets</small>
   <strong>Fun facts</strong>
   <h3>Good morning! (a) </h1> (b) </h3> (c) </small> (d) </strong>
4. 4.🔗 Where does this link open?
   <a href="maths.html" target="_blank">Art corner</a> (a) in the same tab (b) in a new tab
5. 5.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) 800px or wider (d) turned off
6. 6.🎯 What kind of selector is #top? (a) an element selector (b) a class selector (c) an id selector
7. 7.🔠 How many <h1> headings should a page usually have? (a) 10 (b) 1 (c) 6 (d) 3
8. 8.🔠 How many headings are in this code?
   <h1>Rain today</h1>
   <h4>My pets</h4>
   <p>Fun facts</p>
   <p>The red kite</p>
   <h4>Our school trip</h4>
9. 9.🔠 Which heading shows the BIGGEST text: <h2>, <h1>, <h5> or <h4>? (a) <h5> (b) <h1> (c) <h2> (d) <h4>
10. 10.🔢 In a basic web page file, which comes first: “</head>” or “</html>”? (a) </html> (b) </head>
11. 11.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) 600px or wider (c) exactly 1000px (d) turned off
12. 12.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) type the password (b) click it twice (c) share it with friends (d) close it, tell an adult
13. 13.📦 In the box model, which part is space outside the border? (a) border (b) margin (c) padding (d) content
14. 14.🌗 Is dark grey on white easy or hard to read? (a) hard to read (b) easy to read
15. 15.🖌️ How big is the text, in px?
    h1 {
      background-color: white;
      color: yellow;
      font-size: 16px;
      text-align: left;
    }
16. 16.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      background-color: yellow;
      font-style: italic;
    }
17. 17.🌐 Which one opens web pages for us? (a) a code editor (b) a web browser (c) a web server
18. 18.🔠 Which heading shows the BIGGEST text: <h1>, <h2>, <h6> or <h3>? (a) <h6> (b) <h3> (c) <h1> (d) <h2>
19. 19.Which of these is true of <nav>? (a) holds one blog post (b) helps you move around (c) sits at the very top (d) holds the main content
20. 20.🚀 Which file is best for code that reacts to clicks? (a) index.html (b) script.js (c) notes.txt (d) style.css
21. 21.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 20px;
      border: 4px solid black;
      margin: 5px;
    }
22. 22.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    }
23. 23.⚡ What does this code show?
    let name = "Riya";
    console.log("Hi, " + name + "!"); (a) Riya (b) name (c) Hi, name! (d) Hi, Riya!
24. 24.📋 Does this list show bullets or numbers?
    <ol>
      <li>Banana</li>
      <li>Guava</li>
    </ol> (a) bullets (b) numbers
25. 25.🚀 Which file should this code go in: h1 { font-size: 32px; } (a) script.js (b) style.css (c) index.html
26. 26.📊 Are <th> cells shown bold and centred by default? (a) No (b) Yes
27. 27.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
28. 28.🎨 Which attribute adds CSS inside one tag? (a) href (b) alt (c) src (d) style
29. 29.🚀 What is the home page file of a website usually called? (a) start.js (b) index.html (c) home.css (d) main.png
30. 30.🔍 Which line is missing its closing tag?
    line 1: <em>Cricket is fun.
    line 2: <small>Good morning!</small>
    line 3: <p>Our school trip</p> (a) line 2 (b) line 3 (c) line 1
31. 31.🔐 Is Mango#Kite29! a strong or a weak password? (a) strong (b) weak
32. 32.📋 What number does the browser show next to “Jamun”?
    <ol>
      <li>Litchi</li>
      <li>Mango</li>
      <li>Jamun</li>
    </ol>
33. 33.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 470px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).
34. 34.True or false: HTML puts a picture on a page. (a) True (b) False
35. 35.🎯 Which element does the selector li style? (a) <div> (b) <span class="menu"> (c) <li class="menu"> (d) <p id="hero">
36. 36.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) center (c) space-between (d) flex-start
37. 37.🎯 How many elements on a page should have the same id? (a) 1 (b) any number (c) 5 (d) 2
38. 38.🖼️ Which picture file does the browser load?
    <img src="map.png" alt="Map of India" width="50"> (a) cake.jpg (b) Map of India (c) dog.jpg (d) map.png
39. 39.True or false: .note is an id selector. (a) False (b) True
40. 40.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }

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