Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 718 · 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.📝 On how many lines does the browser show this paragraph?
   <p>Sky is blue<br>Birds sing<br>Roses are red<br>Stars shine</p>
2. 2.🖌️ How big is the text, in px?
   p {
     background-color: white;
     text-align: right;
     color: black;
     font-size: 12px;
   }
3. 3.True or false: <input type="radio"> is for one line of words. (a) True (b) False
4. 4.📄 Where does <style> go: in the head or in the body? (a) in the body (b) in the head
5. 5.⚡ What does JavaScript add to a web page? (a) only colours (b) the domain name (c) the page title (d) actions and changes
6. 6.🔁 How many times does this code print “Hello”?
   for (let i = 3; i <= 11; i++) {
     console.log("Hello");
   }
7. 7.🔁 What does this code print?
   let age = 44;
   if (age >= 41) {
     console.log("teen");
   } else {
     console.log("child");
   } (a) teen (b) child
8. 8.📝 On how many lines does the browser show this paragraph?
   <p>Sky is blue<br>Stars shine</p>
9. 9.🔠 How many headings are in this code?
   <h1>Good morning!</h1>
   <h2>Good morning!</h2>
   <p>Fun facts</p>
10. 10.📄 Can HTML on its own make bullet lists? (a) Yes (b) No
11. 11.🖌️ Where does the text sit on its line?
    h1 {
      background-color: orange;
      font-size: 20px;
      color: green;
      text-align: right;
    } (a) on the left (b) in the middle (c) on the right
12. 12.🌈 Which colour is #ffff00? (a) white (b) yellow (c) red (d) magenta
13. 13.🏷️ Every HTML tag starts with which sign? (a) [ (b) { (c) < (d) (
14. 14.🌍 What is the path in this URL?
    http://learn.example.com/games/chess.html (a) /about.html (b) http (c) learn.example.com (d) /games/chess.html
15. 15.🖌️ What colour is behind the letters?
    p {
      text-align: right;
      font-size: 16px;
      color: yellow;
      background-color: green;
    } (a) green (b) yellow (c) white
16. 16.Which of these is true of <main>? (a) holds a side box of tips (b) sits at the very top (c) is the page’s key part (d) holds one blog post
17. 17.🌍 What is the path in this URL?
    https://www.example.com/games/chess.html (a) www.example.com (b) /games/chess.html (c) https (d) /about.html
18. 18.🎯 What kind of selector is #end? (a) an id selector (b) a class selector (c) an element selector
19. 19.Which of these is the border? (a) the line round the box (b) the gap round content (c) the text or picture (d) space inside the border
20. 20.🔗 Where does this link open?
    <a href="maths.html" target="_blank">Art corner</a> (a) in a new tab (b) in the same tab
21. 21.🛡️ Online: is it safe to tell a trusted adult? (a) safe (b) not safe
22. 22.📝 How many paragraphs does this code make?
    <p>Rain today</p>
    <p>Cricket is fun.</p>
    <p>I love mangoes.</p>
    <h2>My pets</h2>
    <h2>I love mangoes.</h2>
    <h2>Rain today</h2>
23. 23.What does background-color do? (a) centres a heading (b) makes the text bold (c) colours behind the text (d) picks the font style
24. 24.✍️ What is the selector in this CSS rule?
    #top {
      font-style: italic;
      padding: 8px;
      font-weight: bold;
      color: red;
    } (a) li (b) font-style (c) #top (d) 8px
25. 25.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) center (c) flex-start (d) flex-end
26. 26.⚖️ What colour is the text of this element?
    <h2 class="menu" id="logo">Hi</h2>
    CSS:
    .menu { color: white; }
    .menu { color: blue; } (a) blue (b) red (c) white (d) purple
27. 27.📝 What do we need to write HTML? (a) a printer (b) a plain text editor (c) a paintbrush (d) a microphone
28. 28.🔢 In a basic web page file, which comes FIRST? (a) </body> (b) </head> (c) <!DOCTYPE html> (d) <html>
29. 29.Which colour pair is easy to read? (a) light grey on white (b) yellow on white (c) white on black (d) red on green
30. 30.🔢 When you open a web page, which comes FIRST? (a) the browser asks it (b) you type the URL (c) DNS finds the server (d) the browser shows it
31. 31.🔠 Which heading shows the BIGGEST text: <h1>, <h5>, <h6> or <h4>? (a) <h5> (b) <h4> (c) <h6> (d) <h1>
32. 32.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) fits every screen (d) has no pictures
33. 33.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Art Gallery</title>
    </head>
    <body>
      <h1>Easy snacks</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) Art Gallery (b) Easy snacks (c) body (d) Mars is red.
34. 34.True or false: “write clear link text” makes the page harder to use. (a) True (b) False
35. 35.True or false: <b> has a closing tag. (a) False (b) True
36. 36.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
37. 37.📦 In the box model, which part is the line round the box? (a) margin (b) content (c) border (d) padding
38. 38.🎯 Which sign starts an id selector? (a) & (b) @ (c) # (d) .
39. 39.True or false: margin is the text or picture. (a) False (b) True
40. 40.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 340px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 100px wide (no margins).

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