Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 236 · 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.♿ A part of the page is under a <h2> heading. Which tag should its sub-heading use? (a) <h6> (b) <h3> (c) <h4> (d) <h2>
2. 2.🔍 Which is the odd one out? (a) adds space around boxes (b) sets colours and fonts (c) puts a picture on a page (d) rounds box corners
3. 3.🌍 What is the domain name in this URL?
   http://www.example.net/games/chess.html (a) http (b) /games/chess.html (c) www.example.net (d) learn.example.com
4. 4.✍️ How does a CSS comment start? (a) # (b) <!-- (c) // (d) /*
5. 5.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) flex-end (c) center (d) space-between
6. 6.⚖️ What colour is the text of this element?
   <h2 class="note" id="intro">Hi</h2>
   CSS:
   .note { color: orange; }
   #intro { color: green; }
   h2 { color: yellow; } (a) red (b) green (c) yellow (d) orange
7. 7.🎯 Which element does the selector .red style? (a) <p id="red"> (b) <p class="red"> (c) <p class="box"> (d) <h1 class="star">
8. 8.🖼️ The picture cannot load. Which text does the browser show instead?
   <img src="fort.jpg" alt="An old fort" width="200"> (a) fort.jpg (b) width (c) An old fort (d) A tiger asleep
9. 9.🔗 Where does this link open?
   <a href="about.html">Maths fun</a> (a) in a new tab (b) in the same tab
10. 10.🌈 In #000056 the blue part is the hex number 56. What is it as a normal number?
11. 11.🔢 In a basic web page file, which comes first: “</head>” or “<html>”? (a) <html> (b) </head>
12. 12.Which of these has a closing tag? (a) <br> (b) <title> (c) <meta> (d) <input>
13. 13.📊 Where do <td> cells go? (a) inside the <head> (b) inside a <p> (c) inside a <tr> (d) inside a <li>
14. 14.🖼️ How many pixels wide is the picture drawn?
    <img src="kite.png" alt="A red kite" width="400">
15. 15.📊 Which tag makes a heading cell? (a) <tr> (b) <table> (c) <caption> (d) <th>
16. 16.⚖️ What colour is the text of this element?
    <h2 class="menu" id="hero">Hi</h2>
    CSS:
    h2 { color: orange; }
    .menu { color: yellow; } (a) orange (b) green (c) blue (d) yellow
17. 17.♿ Does this help everyone, or make the page harder to use: images with no alt? (a) makes it harder (b) helps everyone
18. 18.🖌️ What colour are the letters?
    h1 {
      text-align: center;
      font-size: 12px;
      background-color: orange;
      color: black;
    } (a) orange (b) green (c) black
19. 19.What does font-weight do? (a) sets the letter colour (b) makes letters bigger (c) centres a heading (d) makes the text bold
20. 20.🖌️ What colour are the letters?
    li {
      font-size: 16px;
      text-align: right;
      color: purple;
      background-color: orange;
    } (a) orange (b) yellow (c) purple
21. 21.🧭 Is <div> semantic or not semantic? (a) not semantic (b) semantic
22. 22.Which colour pair is hard to read? (a) light grey on white (b) white on black (c) black on white (d) white on dark blue
23. 23.Which of these is true of a code editor? (a) turns HTML into a page (b) answers page requests (c) saves our .html files (d) sends pages over the net
24. 24.🌍 Which one shows the page to you? (a) HTTPS (b) the URL (c) the browser (d) the server
25. 25.📝 How many paragraphs does this code make?
    <p>My best friend</p>
    <h2>Hello, world!</h2>
    <h2>I love mangoes.</h2>
26. 26.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Art Gallery</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) index.html (b) I like to read. (c) Art Gallery (d) Welcome!
27. 27.🎯 Which sign starts a class selector? (a) # (b) & (c) . (d) @
28. 28.💬 How many paragraphs show on the page?
    <p>I love mangoes.</p>
    <!-- <p>The red kite</p> -->
    <p>Fun facts</p>
    <p>Cricket is fun.</p>
    <p>My best friend</p>
29. 29.🌈 Which colour is rgb(255, 255, 255)? (a) white (b) red (c) bright green (d) black
30. 30.🔠 Which heading shows the SMALLEST text: <h2>, <h4>, <h3> or <h1>? (a) <h1> (b) <h4> (c) <h2> (d) <h3>
31. 31.🧭 Which semantic tag holds one blog post? (a) <nav> (b) <footer> (c) <header> (d) <article>
32. 32.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
33. 33.📝 Which tag makes a big box for many lines of text? (a) <input> (b) <p> (c) <textarea> (d) <br>
34. 34.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) puts boxes in the middle (d) equal gaps, none at ends
35. 35.True or false: <main> helps you move around. (a) True (b) False
36. 36.💬 How many paragraphs show on the page?
    <!-- <p>My pets</p> -->
    <p>Rain today</p>
    <!-- <p>The red kite</p> -->
37. 37.🔍 One closing tag is missing. Which one?
    <strong>My best friend</strong>
    <h2>Good morning!
    <h3>Cricket is fun.</h3> (a) </h3> (b) </small> (c) </strong> (d) </h2>
38. 38.🎯 Which CSS selector matches this element?
    <div class="big" id="intro">Hello</div> (a) .big (b) .red (c) span (d) .intro
39. 39.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
40. 40.💪 Which flexbox property lines boxes up across? (a) display: flex (b) flex-direction (c) justify-content (d) align-items

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