Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 540 · 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.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 3; i++) {
     total = total + i;
   }
   console.log(total);
2. 2.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) turned off (c) 800px or wider (d) exactly 100px
3. 3.True or false: in <img>, alt describes the picture. (a) False (b) True
4. 4.🔍 One closing tag is missing. Which one?
   <h1>My best friend
   <u>Cricket is fun.</u>
   <small>The red kite</small> (a) </h1> (b) </small> (c) </i> (d) </u>
5. 5.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is free (b) the site is fast (c) the site is a game (d) the data is scrambled
6. 6.🔐 Is 123456 a strong or a weak password? (a) weak (b) strong
7. 7.Which colour pair is hard to read? (a) white on dark blue (b) dark grey on white (c) pink on red (d) yellow on black
8. 8.Which of these is not safe to do online? (a) tell a trusted adult (b) put secrets in comments (c) log out on shared PCs (d) ask before downloading
9. 9.💬 Which text will NOT show on the page?
   <!-- <p>Rain today</p> -->
   <p>I love mangoes.</p>
   <p>Fun facts</p>
   <p>Good morning!</p> (a) I love mangoes. (b) Fun facts (c) Good morning! (d) Rain today
10. 10.🎯 What kind of selector is .menu? (a) an element selector (b) an id selector (c) a class selector
11. 11.💪 Which flexbox property lines boxes up across? (a) display: flex (b) gap (c) justify-content (d) align-items
12. 12.⚡ What number does this code print?
    let a = 44;
    let b = 39;
    console.log(a - b);
13. 13.📝 Which input type hides what you type? (a) number (b) email (c) checkbox (d) password
14. 14.What does justify-content: center do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end
15. 15.🚀 Which program lets you see your web page while you build it? (a) a calculator (b) a photo viewer (c) a music player (d) a web browser
16. 16.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 15; i = i + 4) {
      console.log(i);
    }
17. 17.True or false: <footer> holds copyright notes. (a) False (b) True
18. 18.🎨 Which tag connects an outside CSS file? (a) <a> (b) <img> (c) <css> (d) <link>
19. 19.🔠 How many headings are in this code?
    <h1>Our school trip</h1>
    <h3>Hello, world!</h3>
    <p>The red kite</p>
    <h3>Good morning!</h3>
    <p>Cricket is fun.</p>
20. 20.📋 Which list shows the steps of a recipe best? (a) <ul> (b) <br> (c) <hr> (d) <ol>
21. 21.📝 What does <hr> draw? (a) a line across the page (b) a table (c) a link (d) a picture
22. 22.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 9; i++) {
      total = total + 2;
    }
    console.log(total);
23. 23.💬 Which text will NOT show on the page?
    <p>Cricket is fun.</p>
    <p>Rain today</p>
    <p>The red kite</p>
    <!-- <p>I love mangoes.</p> --> (a) I love mangoes. (b) Cricket is fun. (c) Rain today (d) The red kite
24. 24.🔠 How many headings are in this code?
    <h1>Our school trip</h1>
    <h2>The red kite</h2>
    <h2>Cricket is fun.</h2>
25. 25.🔠 Are headings shown in bold by default? (a) No (b) Yes
26. 26.True or false: <main> is the page’s key part. (a) False (b) True
27. 27.Which of these is not safe to do online? (a) check for https first (b) tell a trusted adult (c) use a strong password (d) share your OTP
28. 28.✍️ What value is given to border in this rule?
    li {
      font-size: 20px;
      border: 2px solid;
    } (a) 300px (b) 2px solid (c) italic (d) border
29. 29.Which of these is true of <footer>? (a) holds copyright notes (b) holds extra side notes (c) holds the main content (d) holds one blog post
30. 30.📋 Does this list show bullets or numbers?
    <ol>
      <li>Mango</li>
      <li>Litchi</li>
      <li>Orange</li>
    </ol> (a) bullets (b) numbers
31. 31.True or false: <input type="submit"> picks a day. (a) True (b) False
32. 32.⚖️ What colour is the text of this element?
    <h2 class="menu" id="intro">Hi</h2>
    CSS:
    .menu { color: green; }
    .menu { color: orange; } (a) yellow (b) green (c) white (d) orange
33. 33.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) space-between (c) flex-end (d) center
34. 34.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    }
35. 35.📋 Which list tag shows bullet points? (a) <li> (b) <ol> (c) <ul>
36. 36.True or false: <h1> has a closing tag. (a) False (b) True
37. 37.🔍 One closing tag is missing. Which one?
    <h3>Rain today</h3>
    <b>The red kite</b>
    <em>Our school trip (a) </h3> (b) </em> (c) </b> (d) </h1>
38. 38.💬 How many paragraphs show on the page?
    <p>The red kite</p>
    <!-- <p>Hello, world!</p> -->
    <p>My best friend</p>
39. 39.🖼️ Which attribute of <img> describes the picture? (a) height (b) width (c) src (d) alt
40. 40.What is <input type="submit"> for? (a) lets you pick only one (b) takes only numbers (c) is for one line of words (d) sends the form

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