Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 278 · 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.📦 In the box model, which part is the gap round content? (a) margin (b) content (c) padding (d) border
2. 2.🚀 Which file should this code go in: console.log(5 + 2); (a) index.html (b) script.js (c) style.css
3. 3.🚀 Where in index.html does the link to style.css go? (a) in the head (b) after </html> (c) in the footer (d) inside a <p>
4. 4.✍️ Which sign goes between a property and its value? (a) - (b) = (c) ; (d) :
5. 5.True or false: CSS counts down a timer. (a) False (b) True
6. 6.Which of these is true of <header>? (a) holds extra side notes (b) sits at the very top (c) holds one blog post (d) holds a side box of tips
7. 7.🔒 Is the connection to this address scrambled (encrypted)?
   https://www.example.com/games/chess.html (a) No (b) Yes
8. 8.🖼️ Which attribute of <img> sets how tall it is? (a) src (b) alt (c) height (d) width
9. 9.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) 600px or narrower (d) exactly 1000px
10. 10.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 60px;
      padding: 10px;
      border: 3px solid black;
      margin: 15px;
    }
11. 11.🖌️ What colour are the letters?
    p {
      font-size: 40px;
      background-color: red;
      text-align: center;
      color: white;
    } (a) purple (b) red (c) white
12. 12.True or false: .menu is an element selector. (a) False (b) True
13. 13.🖼️ Which attribute of <img> tells which image to load? (a) width (b) alt (c) height (d) src
14. 14.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 280px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 100px wide (no margins).
15. 15.🚀 Which file should this code go in: .box { padding: 8px; } (a) script.js (b) index.html (c) style.css
16. 16.🔢 To build and share your first web page, which comes first: “publish it online” or “add CSS styles”? (a) add CSS styles (b) publish it online
17. 17.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>Match report</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) I like to read. (b) index.html (c) Match report (d) My Hobbies
18. 18.🔍 One closing tag is missing. Which one?
    <b>My best friend</b>
    <small>I love mangoes.</small>
    <strong>The red kite (a) </b> (b) </em> (c) </strong> (d) </small>
19. 19.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h3> → <h4> (a) No (b) Yes
20. 20.✍️ What value is given to color in this rule?
    h2 {
      width: 300px;
      color: red;
    } (a) red (b) center (c) color (d) 20px
21. 21.💬 Which text will NOT show on the page?
    <p>I love mangoes.</p>
    <p>Cricket is fun.</p>
    <p>Hello, world!</p>
    <!-- <p>My best friend</p> --> (a) I love mangoes. (b) Cricket is fun. (c) Hello, world! (d) My best friend
22. 22.Which of these goes in the body? (a) <style> (b) <meta charset="utf-8"> (c) <link rel="stylesheet"> (d) <ul>
23. 23.🔢 On a typical page, from top to bottom, what comes right after “<nav>”? (a) <footer> (b) <header> (c) <main>
24. 24.🔁 How many times does this code print “Hello”?
    for (let i = 3; i < 6; i++) {
      console.log("Hello");
    }
25. 25.Which of these is safe to do online? (a) post your home address (b) click prize links (c) ask before downloading (d) type a password on http
26. 26.🔠 Which heading shows the SMALLEST text: <h3>, <h4>, <h6> or <h2>? (a) <h6> (b) <h2> (c) <h3> (d) <h4>
27. 27.✍️ How does a CSS comment start? (a) <!-- (b) /* (c) # (d) //
28. 28.🚀 What is the home page file of a website usually called? (a) index.html (b) start.js (c) home.css (d) main.png
29. 29.📝 What does a password box show instead of letters? (a) emojis (b) dots (c) capital letters (d) numbers
30. 30.🌈 Which colour of light is strongest in rgb(66, 236, 104)? (a) blue (b) green (c) red
31. 31.🌍 What is the domain name in this URL?
    https://learn.example.com/maths/tables.html (a) www.example.com (b) learn.example.com (c) /maths/tables.html (d) https
32. 32.🔁 What does this code print?
    let age = 39;
    if (age > 12) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
33. 33.💬 Which text will NOT show on the page?
    <!-- <p>Hello, world!</p> -->
    <p>Good morning!</p>
    <p>I love mangoes.</p>
    <p>Cricket is fun.</p> (a) Cricket is fun. (b) I love mangoes. (c) Good morning! (d) Hello, world!
34. 34.🌈 Which colour is #ffff00? (a) bright green (b) yellow (c) red (d) white
35. 35.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 240px;
      padding: 20px;
      border: 1px solid black;
      margin: 15px;
    }
36. 36.Which of these does HTML do? (a) changes the text size (b) adds space around boxes (c) makes a link (d) rounds box corners
37. 37.🌈 Which colour is #00ff00? (a) bright green (b) yellow (c) black (d) red
38. 38.🔗 Which address opens when you click this link?
    <a href="about.html">School news</a> (a) about.html (b) School news (c) https://example.com (d) contact.html
39. 39.True or false: in <img>, height shows if the image fails. (a) True (b) False
40. 40.📱 What does a media query check? (a) the page title (b) the screen width (c) the battery level (d) the time of day

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