Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 462 · 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.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
2. 2.📝 Does <br> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
3. 3.🔁 What is the LAST number this code prints?
   for (let i = 0; i < 5; i = i + 3) {
     console.log(i);
   }
4. 4.✍️ Which sign goes between a property and its value? (a) ; (b) = (c) - (d) :
5. 5.💪 Which flexbox property lines boxes up across? (a) align-items (b) display: flex (c) flex-direction (d) gap
6. 6.Which of these is safe to do online? (a) check for https first (b) download from pop-ups (c) post your home address (d) share your password
7. 7.♿ Does this help everyone, or make the page harder to use: link text “click here”? (a) makes it harder (b) helps everyone
8. 8.🎯 Which element does the selector li style? (a) <p id="intro"> (b) <span class="big"> (c) <li class="big"> (d) <div>
9. 9.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 220px;
     padding: 20px;
     border: 2px solid black;
     margin: 20px;
   }
10. 10.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) { } (d) < >
11. 11.⚖️ What colour is the text of this element?
    <p class="box" id="logo">Hi</p>
    CSS:
    p { color: white; }
    #logo { color: black; } (a) orange (b) white (c) black (d) yellow
12. 12.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) fits every screen (d) has no pictures
13. 13.True or false: <meta> has a closing tag. (a) False (b) True
14. 14.🌈 Which colour is rgb(255, 0, 0)? (a) bright green (b) red (c) cyan (d) white
15. 15.🔠 Which tag is the least important heading? (a) <h3> (b) <h6> (c) <h1> (d) <p>
16. 16.Which of these goes in the head? (a) <img> (b) <table> (c) <h1> (d) <meta charset="utf-8">
17. 17.⚡ What does JavaScript add to a web page? (a) only colours (b) the domain name (c) actions and changes (d) the page title
18. 18.True or false: JavaScript checks a quiz answer. (a) False (b) True
19. 19.🖼️ Which picture file does the browser load?
    <img src="kite.png" alt="A red kite" width="200"> (a) cake.jpg (b) A red kite (c) kite.png (d) map.png
20. 20.🚀 Which file should this code go in: <p>Hello!</p> (a) style.css (b) script.js (c) index.html
21. 21.Which of these is the content? (a) the gap to other boxes (b) the text or picture (c) the gap round content (d) a solid or dotted edge
22. 22.📄 Can HTML on its own make bullet lists? (a) Yes (b) No
23. 23.🔠 Which heading shows the BIGGEST text: <h2>, <h4>, <h3> or <h5>? (a) <h3> (b) <h5> (c) <h4> (d) <h2>
24. 24.🖼️ Why do we add alt text to an image? (a) to make it bigger (b) to describe the image (c) to colour it (d) to load it faster
25. 25.🧩 Which language puts a picture on a page? (a) HTML (b) CSS (c) JavaScript
26. 26.🔍 Which is the odd one out? (a) puts a picture on a page (b) checks a quiz answer (c) makes a form box (d) makes headings and lists
27. 27.🔢 On a typical page, from top to bottom, which comes FIRST? (a) <header> (b) <footer> (c) <main> (d) <nav>
28. 28.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h2> → <h3> (a) No (b) Yes
29. 29.True or false: <li> is an unordered list. (a) False (b) True
30. 30.True or false: “images with no alt” helps everyone use the page. (a) True (b) False
31. 31.♿ Which link text is clearest? (a) here (b) Read the fruit facts (c) link (d) click here
32. 32.🎨 Which tag holds CSS inside the head? (a) <css> (b) <style> (c) <body> (d) <script>
33. 33.⚡ What number does this code print?
    let a = 15;
    let b = 33;
    console.log(a + b);
34. 34.📝 Which input type is for an email address? (a) text (b) number (c) email (d) radio
35. 35.⚡ Where does console.log() show its output? (a) on the title bar (b) on the printer (c) in the console (d) in the address bar
36. 36.🔗 Where does this link open?
    <a href="maths.html">School news</a> (a) in a new tab (b) in the same tab
37. 37.🧭 Who is helped most by semantic tags? (a) only the printer (b) nobody (c) screen-reader users (d) only the server
38. 38.📝 On how many lines does the browser show this paragraph?
    <p>Kites fly high<br>Birds sing<br>Roses are red<br>Sky is blue<br>Rivers flow</p>
39. 39.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) center (d) flex-start
40. 40.🎨 Which attribute adds CSS inside one tag? (a) alt (b) href (c) style (d) src

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