Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 329 · 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.🎯 Which CSS selector matches this element?
   <span class="star" id="top">Hello</span> (a) .top (b) #intro (c) span (d) p
2. 2.🎨 Which tag connects an outside CSS file? (a) <img> (b) <link> (c) <a> (d) <css>
3. 3.⚖️ What colour is the text of this element?
   <h2 class="box" id="logo">Hi</h2>
   CSS:
   h2 { color: white; }
   .box { color: red; } (a) black (b) yellow (c) white (d) red
4. 4.🎯 Which element does the selector #intro style? (a) <li id="intro"> (b) <li class="intro"> (c) <div class="note"> (d) <li id="main">
5. 5.🏷️ Which is the closing tag for <small>? (a) <small/> (b) <small> (c) </small> (d) <\small>
6. 6.📝 Does <meta> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
7. 7.🔁 When does the else part run? (a) always (b) never (c) when if is false (d) when if is true
8. 8.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 1000 (c) 255 (d) 100
9. 9.True or false: <p> has a closing tag. (a) False (b) True
10. 10.True or false: to ask before downloading is not safe. (a) True (b) False
11. 11.Which of these does CSS do? (a) checks a quiz answer (b) makes headings and lists (c) sets colours and fonts (d) puts a picture on a page
12. 12.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 140px;
      padding: 5px;
      border: 4px solid black;
      margin: 15px;
    }
13. 13.📋 Which list tag is one item of a list? (a) <li> (b) <ol> (c) <ul>
14. 14.🌍 What finds the server for a domain name like example.com? (a) CSS (b) HTML (c) DNS (d) alt
15. 15.Which of these is a strong password? (a) qwerty (b) 123456 (c) password (d) Rain#Drop_42!
16. 16.True or false: <img> goes in the head. (a) True (b) False
17. 17.🎯 Which CSS selector matches this element?
    <h1 class="star" id="top">Hello</h1> (a) .menu (b) #top (c) #star (d) .top
18. 18.Which of these is an opening tag? (a) </title> (b) </body> (c) <title> (d) </b>
19. 19.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
20. 20.🔠 Which tag is the least important heading? (a) <h1> (b) <h6> (c) <h3> (d) <p>
21. 21.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <p>My best friend</p>
    <p>The red kite</p>
22. 22.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
23. 23.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    }
24. 24.🎯 Which element does the selector #top style? (a) <div class="top"> (b) <span class="star"> (c) <div id="intro"> (d) <div id="top">
25. 25.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
26. 26.🔗 Which code links to about.html? (a) <a href="about.html"> (b) <a src="about.html"> (c) <a alt="about.html"> (d) <link about.html>
27. 27.📝 Which tag gives a form box a name you can click? (a) <title> (b) <hr> (c) <h1> (d) <label>
28. 28.📊 Which tag holds the whole table? (a) <caption> (b) <tr> (c) <table> (d) <td>
29. 29.💬 How many paragraphs show on the page?
    <!-- <p>Rain today</p> -->
    <!-- <p>My best friend</p> -->
    <!-- <p>The red kite</p> -->
    <p>Cricket is fun.</p>
30. 30.🖼️ Which attribute of <img> names the picture file? (a) alt (b) src (c) width (d) height
31. 31.📄 What is the first line of an HTML5 page? (a) <html> (b) <!DOCTYPE html> (c) <body> (d) <head>
32. 32.📊 Are <th> cells shown bold and centred by default? (a) No (b) Yes
33. 33.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h3> → <h2> (a) Yes (b) No
34. 34.🔠 Are headings shown in bold by default? (a) No (b) Yes
35. 35.🧭 Which semantic tag sits at the bottom? (a) <footer> (b) <article> (c) <nav> (d) <header>
36. 36.What does justify-content: center do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
37. 37.🎯 Which CSS selector matches this element?
    <h1 class="note" id="intro">Hello</h1> (a) .big (b) #intro (c) h2 (d) #main
38. 38.🖌️ Which CSS property centres a heading? (a) font-family (b) background-color (c) font-weight (d) text-align
39. 39.🔢 On a typical page, from top to bottom, what comes right after “<header>”? (a) <nav> (b) <footer> (c) <main>
40. 40.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector

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