Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 268 · 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 colour pair is hard to read? (a) dark grey on white (b) black on white (c) yellow on black (d) blue on purple
2. 2.♿ Does this help everyone, or make the page harder to use: write clear link text? (a) helps everyone (b) makes it harder
3. 3.📝 How many paragraphs does this code make?
   <p>Fun facts</p>
   <h2>Good morning!</h2>
   <p>Good morning!</p>
4. 4.💪 Which flexbox property picks row or column? (a) display: flex (b) gap (c) align-items (d) flex-direction
5. 5.True or false: <meta charset="utf-8"> goes in the body. (a) True (b) False
6. 6.🔁 What does this code print?
   let temp = 48;
   if (temp < 34) {
     console.log("Hot");
   } else {
     console.log("Cool");
   } (a) Cool (b) Hot
7. 7.What does color do? (a) colours behind the text (b) centres a heading (c) makes letters bigger (d) sets the letter colour
8. 8.True or false: in <img>, src tells which image to load. (a) False (b) True
9. 9.True or false: <h1> is an empty tag. (a) False (b) True
10. 10.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) blue (c) white (d) green
11. 11.🌍 What do we call the computer that stores a website? (a) a keyboard (b) a printer (c) a mouse (d) a server
12. 12.⚖️ What colour is the text of this element?
    <h1 class="box" id="hero">Hi</h1>
    CSS:
    .box { color: orange; }
    .box { color: purple; } (a) orange (b) purple (c) red (d) yellow
13. 13.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    p { color: orange; }
    #top { color: yellow; }
    .box { color: purple; } (a) purple (b) yellow (c) orange (d) blue
14. 14.🌍 What is the domain name in this URL?
    https://www.example.com/games/chess.html (a) https (b) www.example.com (c) /games/chess.html (d) kids.example.org
15. 15.📊 Which tag holds the whole table? (a) <th> (b) <tr> (c) <caption> (d) <table>
16. 16.♿ Does this help everyone, or make the page harder to use: link text “click here”? (a) helps everyone (b) makes it harder
17. 17.Which of these does JavaScript do? (a) makes a link (b) makes a form box (c) adds space around boxes (d) checks a quiz answer
18. 18.♿ Does this help everyone, or make the page harder to use: use headings in order? (a) makes it harder (b) helps everyone
19. 19.🌈 Which hex code is magenta? (a) #ffff00 (b) #00ff00 (c) #ff00ff (d) #00ffff
20. 20.♿ Who uses a screen reader? (a) only coders (b) only teachers (c) people who are blind (d) only robots
21. 21.📝 On how many lines does the browser show this paragraph?
    <p>Birds sing<br>Kites fly high</p>
22. 22.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 25px;
      border: 3px solid black;
      margin: 5px;
    }
23. 23.Which of these is true of <header>? (a) sits at the very top (b) holds extra side notes (c) holds the menu of links (d) holds the main content
24. 24.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="tiger.jpg" alt="A tiger asleep" width="300"> (a) width (b) A tiger asleep (c) tiger.jpg (d) A red kite
25. 25.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 440px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
26. 26.🔠 How many headings are in this code?
    <h1>The red kite</h1>
    <p>I love mangoes.</p>
    <h2>I love mangoes.</h2>
    <h3>Fun facts</h3>
27. 27.🧭 How many <main> parts should a page have? (a) three (b) one (c) none (d) ten
28. 28.True or false: <li> is an ordered list. (a) True (b) False
29. 29.🔠 How many headings are in this code?
    <h1>I love mangoes.</h1>
    <h4>Rain today</h4>
    <p>Good morning!</p>
30. 30.🔠 How many <h1> headings should a page usually have? (a) 3 (b) 1 (c) 10 (d) 6
31. 31.🔢 In a basic web page file, which comes first: “<!DOCTYPE html>” or “<body>”? (a) <!DOCTYPE html> (b) <body>
32. 32.⚡ Which JavaScript word makes a new variable? (a) let (b) alert() (c) console.log() (d) for
33. 33.🖌️ Which CSS property makes letters bigger? (a) text-align (b) font-size (c) background-color (d) color
34. 34.🔠 Which heading shows the BIGGEST text: <h4>, <h3>, <h2> or <h1>? (a) <h2> (b) <h4> (c) <h1> (d) <h3>
35. 35.Which of these is not safe to do online? (a) tell a trusted adult (b) use a nickname in games (c) keep passwords secret (d) meet an online stranger
36. 36.True or false: .menu is an element selector. (a) False (b) True
37. 37.True or false: JavaScript makes a form box. (a) False (b) True
38. 38.🔢 To build and share your first web page, which comes first: “plan what to show” or “publish it online”? (a) publish it online (b) plan what to show
39. 39.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
40. 40.🔠 Which heading shows the BIGGEST text: <h2>, <h4>, <h5> or <h1>? (a) <h1> (b) <h2> (c) <h4> (d) <h5>

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