Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 304 · 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.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 140px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 60px wide (no margins).
2. 2.💬 How many paragraphs show on the page?
   <p>Our school trip</p>
   <!-- <p>Hello, world!</p> -->
   <p>My best friend</p>
3. 3.🔗 Which words do you click on?
   <a href="art.html">Art corner</a> (a) School news (b) href (c) art.html (d) Art corner
4. 4.Which colour pair is easy to read? (a) blue on purple (b) black on white (c) yellow on white (d) pink on red
5. 5.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 220px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 60px wide (no margins).
6. 6.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 14px;
     }
   }
7. 7.🚀 What is the home page file of a website usually called? (a) main.png (b) home.css (c) start.js (d) index.html
8. 8.🔠 Which heading shows the BIGGEST text: <h1>, <h2>, <h6> or <h4>? (a) <h2> (b) <h6> (c) <h4> (d) <h1>
9. 9.📋 Which tag goes around each item of a list? (a) <ol> (b) <p> (c) <li> (d) <ul>
10. 10.✍️ What value is given to border in this rule?
    .note {
      color: red;
      border: 2px solid;
    } (a) italic (b) 2px solid (c) border (d) 300px
11. 11.💬 How does an HTML comment end? (a) --> (b) >> (c) // (d) */
12. 12.What does text-align do? (a) makes letters bigger (b) centres a heading (c) sets the letter colour (d) colours behind the text
13. 13.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 20px;
      border: 1px solid black;
      margin: 15px;
    }
14. 14.🔍 Which line is missing its closing tag?
    line 1: <h3>My pets</h3>
    line 2: <i>Rain today
    line 3: <b>Good morning!</b> (a) line 1 (b) line 3 (c) line 2
15. 15.🧭 Is <div> semantic or not semantic? (a) not semantic (b) semantic
16. 16.⚡ What number does this code print?
    let books = 10;
    books = books + 2;
    books = books - 6;
    console.log(books);
17. 17.✍️ What value is given to margin in this rule?
    #top {
      padding: 8px;
      margin: 10px;
      text-align: center;
      font-style: italic;
    } (a) 10px (b) 8px (c) bold (d) margin
18. 18.📋 Which list shows the steps of a recipe best? (a) <hr> (b) <br> (c) <ul> (d) <ol>
19. 19.✍️ What is the selector in this CSS rule?
    .note {
      font-style: italic;
      background-color: yellow;
      border: 2px solid;
    } (a) #top (b) .note (c) yellow (d) font-style
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 10px;
      border: 4px solid black;
      margin: 0px;
    }
21. 21.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h4> → <h5> (a) Yes (b) No
22. 22.True or false: <tr> makes one table row. (a) False (b) True
23. 23.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) 600px or wider (c) turned off (d) exactly 1000px
24. 24.🧩 An opening tag + content + a closing tag together make an ___. (a) editor (b) address (c) attribute (d) element
25. 25.📝 How many paragraphs does this code make?
    <p>My pets</p>
    <h2>Rain today</h2>
    <h2>Good morning!</h2>
    <p>Good morning!</p>
    <h2>My pets</h2>
    <h2>I love mangoes.</h2>
26. 26.🚀 Which file should this code go in: .box { padding: 8px; } (a) script.js (b) style.css (c) index.html
27. 27.🧩 Which language changes the page live? (a) JavaScript (b) HTML (c) CSS
28. 28.Which of these goes in the head? (a) <style> (b) <p> (c) <h1> (d) <table>
29. 29.🔠 How many headings are in this code?
    <h1>My best friend</h1>
    <h4>Hello, world!</h4>
    <p>Cricket is fun.</p>
    <p>Good morning!</p>
    <h3>Hello, world!</h3>
30. 30.⚡ What does this code show?
    let name = "Kabir";
    console.log("Hello, " + name + "!"); (a) Hello, Kabir! (b) Kabir (c) Hello, name! (d) name
31. 31.🖌️ Where does the text sit on its line?
    li {
      font-size: 20px;
      text-align: center;
      background-color: green;
      color: red;
    } (a) on the left (b) in the middle (c) on the right
32. 32.True or false: “skipping heading levels” helps everyone use the page. (a) True (b) False
33. 33.True or false: h1 { font-size: 32px; } goes in style.css. (a) False (b) True
34. 34.🌐 Which one turns HTML into a page? (a) a code editor (b) a web server (c) a web browser
35. 35.🔁 How many times does this code print “Hello”?
    for (let i = 0; i <= 9; i++) {
      console.log("Hello");
    }
36. 36.⚡ Which JavaScript word writes in the console? (a) for (b) if (c) alert() (d) console.log()
37. 37.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>Match report</h1>
      <p>Here is my best one.</p>
    </body>
    </html> (a) Match report (b) index.html (c) My Hobbies (d) Here is my best one.
38. 38.🌈 Which colour is rgb(255, 0, 0)? (a) blue (b) bright green (c) red (d) black
39. 39.Which of these goes in the head? (a) <p> (b) <a> (c) <meta charset="utf-8"> (d) <h1>
40. 40.💬 How many paragraphs show on the page?
    <p>Good morning!</p>
    <!-- <p>My pets</p> -->
    <!-- <p>I love mangoes.</p> -->

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