Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 401 · 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 does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
2. 2.🌍 Which one shows the page to you? (a) the URL (b) the server (c) the browser (d) HTTPS
3. 3.📝 How many paragraphs does this code make?
   <p>Fun facts</p>
   <p>The red kite</p>
   <h2>Rain today</h2>
   <h2>The red kite</h2>
4. 4.True or false: p is an id selector. (a) True (b) False
5. 5.🌗 Is red on green easy or hard to read? (a) easy to read (b) hard to read
6. 6.🔠 How many headings are in this code?
   <h1>My best friend</h1>
   <p>My pets</p>
   <h2>My best friend</h2>
   <p>Fun facts</p>
   <p>Rain today</p>
7. 7.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) exactly 1000px (c) 600px or wider (d) turned off
8. 8.✍️ What value is given to font-size in this rule?
   p {
     margin: 10px;
     font-size: 20px;
   } (a) font-size (b) yellow (c) center (d) 20px
9. 9.💬 Which text will NOT show on the page?
   <!-- <p>The red kite</p> -->
   <p>My best friend</p>
   <p>My pets</p> (a) My best friend (b) My pets (c) The red kite
10. 10.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 150px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 60px wide (no margins).
11. 11.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Computer Style Sheets (c) Colourful Site Styles (d) Creative Sheet System
12. 12.🔁 How many times does this code print “Hi”?
    for (let i = 2; i <= 11; i++) {
      console.log("Hi");
    }
13. 13.🎯 Which sign starts an id selector? (a) . (b) @ (c) & (d) #
14. 14.True or false: “colour as the only clue” makes the page harder to use. (a) True (b) False
15. 15.📝 Which tag holds a whole form? (a) <input> (b) <table> (c) <form> (d) <ol>
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 30px;
      border: 2px solid black;
      margin: 0px;
    }
17. 17.📊 Are <th> cells shown bold and centred by default? (a) No (b) Yes
18. 18.🖌️ What colour is behind the letters?
    h1 {
      background-color: blue;
      font-size: 40px;
      text-align: right;
      color: red;
    } (a) purple (b) blue (c) red
19. 19.🖌️ What colour is behind the letters?
    h1 {
      font-size: 24px;
      background-color: black;
      color: blue;
      text-align: right;
    } (a) red (b) blue (c) black
20. 20.📝 How many paragraphs does this code make?
    <p>My best friend</p>
    <p>Good morning!</p>
    <h2>My pets</h2>
21. 21.💬 How many paragraphs show on the page?
    <!-- <p>Hello, world!</p> -->
    <!-- <p>Our school trip</p> -->
    <p>My pets</p>
    <!-- <p>Rain today</p> -->
22. 22.🧭 Which semantic tag holds the main content? (a) <aside> (b) <header> (c) <main> (d) <article>
23. 23.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
24. 24.What is <input type="date"> for? (a) hides what you type (b) is for an email address (c) lets you tick many (d) picks a day
25. 25.True or false: the border is the line round the box. (a) True (b) False
26. 26.📋 What number does the browser show next to “Papaya”?
    <ol>
      <li>Guava</li>
      <li>Jamun</li>
      <li>Papaya</li>
      <li>Mango</li>
    </ol>
27. 27.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is a game (b) the site is free (c) the site is fast (d) the data is scrambled
28. 28.✍️ How does a CSS comment start? (a) <!-- (b) # (c) // (d) /*
29. 29.Which of these is an opening tag? (a) </h1> (b) </p> (c) </body> (d) <li>
30. 30.🧭 Is <aside> semantic or not semantic? (a) not semantic (b) semantic
31. 31.📋 Which list tag is an ordered list? (a) <li> (b) <ol> (c) <ul>
32. 32.📋 Which list tag goes inside ul or ol? (a) <li> (b) <ol> (c) <ul>
33. 33.🔒 Is the connection to this address scrambled (encrypted)?
    http://www.example.com/news/today.html (a) Yes (b) No
34. 34.True or false: .menu is an element selector. (a) True (b) False
35. 35.True or false: <li> has a closing tag. (a) False (b) True
36. 36.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 3; i++) {
      total = total + 9;
    }
    console.log(total);
37. 37.📝 How many paragraphs does this code make?
    <p>The red kite</p>
    <p>I love mangoes.</p>
    <h2>Cricket is fun.</h2>
    <h2>Rain today</h2>
    <h2>Fun facts</h2>
38. 38.📄 Can HTML on its own keep a high score? (a) No (b) Yes
39. 39.🚀 Which tag loads script.js into a page? (a) <a href="script.js"> (b) <js src="script.js"> (c) <script src="script.js"> (d) <link script.js>
40. 40.Which of these is true of <footer>? (a) holds copyright notes (b) helps you move around (c) holds the main content (d) holds the menu of links

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