Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 644 · 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.⚖️ What colour is the text of this element?
   <h2 class="menu" id="top">Hi</h2>
   CSS:
   h2 { color: black; }
   h2 { color: blue; } (a) black (b) purple (c) white (d) blue
2. 2.Which of these is true of <aside>? (a) helps you move around (b) holds extra side notes (c) holds a news story (d) holds one blog post
3. 3.♿ A part of the page is under a <h3> heading. Which tag should its sub-heading use? (a) <h4> (b) <h5> (c) <h6> (d) <h1>
4. 4.⚖️ What colour is the text of this element?
   <h2 class="star" id="top">Hi</h2>
   CSS:
   #top { color: black; }
   #top { color: yellow; } (a) white (b) orange (c) yellow (d) black
5. 5.🌈 Hex digits go 0 to 9, then A to which letter? (a) F (b) J (c) Z (d) G
6. 6.🛡️ Online: is it safe to use a nickname in games? (a) safe (b) not safe
7. 7.🖼️ Which attribute of <img> shows if the image fails? (a) alt (b) height (c) width (d) src
8. 8.🔠 How many headings are in this code?
   <h1>Our school trip</h1>
   <p>My best friend</p>
   <h4>Rain today</h4>
9. 9.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
10. 10.🧭 Is <nav> semantic or not semantic? (a) not semantic (b) semantic
11. 11.🧭 Who is helped most by semantic tags? (a) only the printer (b) only the server (c) nobody (d) screen-reader users
12. 12.🖼️ Which attribute of <img> sets how wide it is? (a) src (b) alt (c) height (d) width
13. 13.🧭 Which semantic tag sits at the very top? (a) <header> (b) <nav> (c) <aside> (d) <main>
14. 14.True or false: p { color: red; } goes in style.css. (a) False (b) True
15. 15.🔢 To build and share your first web page, what comes right after “plan what to show”? (a) publish it online (b) test in a browser (c) write the HTML (d) add CSS styles
16. 16.📊 How many cells are in each row?
    <table>
      <tr><td>Jamun</td><td>Orange</td><td>Guava</td><td>Mango</td></tr>
      <tr><td>Litchi</td><td>Mango</td><td>Litchi</td><td>Orange</td></tr>
    </table>
17. 17.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 30px;
      }
    } (a) No (b) Yes
18. 18.📋 Which list shows the steps of a recipe best? (a) <hr> (b) <ol> (c) <ul> (d) <br>
19. 19.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="fort.jpg" alt="An old fort" width="400"> (a) A tiger asleep (b) An old fort (c) fort.jpg (d) width
20. 20.Which of these is a strong password? (a) abcd1234 (b) Chai$Cup_19x (c) qwerty (d) 111111
21. 21.✍️ In color: blue; which part is the property? (a) : (b) blue (c) color (d) ;
22. 22.📄 Can HTML on its own make a form? (a) Yes (b) No
23. 23.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
24. 24.🔍 Which line is missing its closing tag?
    line 1: <h1>My pets</h1>
    line 2: <strong>The red kite
    line 3: <b>Fun facts</b> (a) line 2 (b) line 1 (c) line 3
25. 25.🖌️ Which CSS property makes letters bigger? (a) color (b) font-size (c) background-color (d) font-weight
26. 26.What is <input type="email"> for? (a) lets you tick many (b) takes only numbers (c) is for an email address (d) hides what you type
27. 27.What is <input type="text"> for? (a) is for one line of words (b) takes only numbers (c) lets you tick many (d) is for an email address
28. 28.Which of these is an empty tag? (a) <hr> (b) <ul> (c) <h1> (d) <li>
29. 29.🖌️ What colour is behind the letters?
    li {
      font-size: 20px;
      background-color: black;
      text-align: right;
      color: red;
    } (a) purple (b) red (c) black
30. 30.True or false: JavaScript puts a picture on a page. (a) False (b) True
31. 31.True or false: <li> goes inside ul or ol. (a) True (b) False
32. 32.🌈 In #000049 the blue part is the hex number 49. What is it as a normal number?
33. 33.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) turned off (c) exactly 100px (d) 800px or wider
34. 34.🔠 How many <h1> headings should a page usually have? (a) 10 (b) 1 (c) 3 (d) 6
35. 35.💬 How does an HTML comment start? (a) // (b) <!-- (c) # (d) /*
36. 36.🔗 Where does this link open?
    <a href="about.html">Art corner</a> (a) in a new tab (b) in the same tab
37. 37.🎯 Which CSS selector matches this element?
    <div class="box" id="logo">Hello</div> (a) span (b) div (c) .logo (d) #box
38. 38.🔠 Which heading shows the SMALLEST text: <h6>, <h1>, <h2> or <h5>? (a) <h2> (b) <h6> (c) <h1> (d) <h5>
39. 39.🌗 Is pink on red easy or hard to read? (a) easy to read (b) hard to read
40. 40.Which of these is true of a code editor? (a) has an address bar (b) shows pages from the web (c) saves our .html files (d) hosts websites online

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