Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 235 · 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.🌍 Which one sends the page back? (a) the URL (b) the browser (c) HTTPS (d) the server
2. 2.🖼️ Why do we add alt text to an image? (a) to describe the image (b) to load it faster (c) to make it bigger (d) to colour it
3. 3.✍️ Which property is set to 2px solid in this rule?
   .note {
     font-style: italic;
     border: 2px solid;
   } (a) 2px solid (b) font-style (c) width (d) border
4. 4.⚡ What number does this code print?
   let a = 18;
   let b = 9;
   console.log(a + b);
5. 5.🌐 Which one has an address bar? (a) a web browser (b) a web server (c) a code editor
6. 6.📝 On how many lines does the browser show this paragraph?
   <p>Stars shine<br>Roses are red</p>
7. 7.True or false: in <img>, alt tells which image to load. (a) False (b) True
8. 8.🔁 What does this code print?
   let age = 25;
   if (age > 41) {
     console.log("teen");
   } else {
     console.log("child");
   } (a) child (b) teen
9. 9.🚀 Where in index.html does the link to style.css go? (a) inside a <p> (b) after </html> (c) in the footer (d) in the head
10. 10.🔠 Which tag is the least important heading? (a) <h3> (b) <h1> (c) <p> (d) <h6>
11. 11.📊 Which tag makes a heading cell? (a) <table> (b) <th> (c) <tr> (d) <td>
12. 12.True or false: <ol> shows 1, 2, 3 numbers. (a) True (b) False
13. 13.♿ A part of the page is under a <h2> heading. Which tag should its sub-heading use? (a) <h2> (b) <h5> (c) <h3> (d) <h6>
14. 14.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) has no pictures (d) fits every screen
15. 15.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
16. 16.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
17. 17.🖼️ Which attribute of <img> sets how tall it is? (a) src (b) alt (c) height (d) width
18. 18.🖼️ Which tag puts a picture on a page? (a) <a> (b) <p> (c) <pic> (d) <img>
19. 19.🚀 Which file should this code go in: score = score + 1; (a) script.js (b) index.html (c) style.css
20. 20.🔗 Which attribute holds the address of a link? (a) alt (b) id (c) src (d) href
21. 21.True or false: a web browser opens web pages for us. (a) False (b) True
22. 22.🔠 Which heading shows the SMALLEST text: <h4>, <h2>, <h6> or <h1>? (a) <h2> (b) <h6> (c) <h4> (d) <h1>
23. 23.🏷️ Which is the closing tag for <h2>? (a) <h2/> (b) <h2> (c) <\h2> (d) </h2>
24. 24.📋 Which list tag lists steps in order? (a) <ul> (b) <li> (c) <ol>
25. 25.🔁 Which word runs code only when something is true? (a) for (b) let (c) log (d) if
26. 26.🔗 Which address opens when you click this link?
    <a href="news.html">Take the quiz</a> (a) games.html (b) quiz.html (c) Take the quiz (d) news.html
27. 27.Which colour pair is easy to read? (a) pink on red (b) red on green (c) light grey on white (d) white on black
28. 28.⚡ What number does this code print?
    let score = 17;
    score = score + 7;
    score = score - 1;
    console.log(score);
29. 29.🖌️ What colour are the letters?
    h1 {
      font-size: 40px;
      background-color: purple;
      color: white;
      text-align: center;
    } (a) white (b) purple (c) blue
30. 30.♿ A part of the page is under a <h3> heading. Which tag should its sub-heading use? (a) <h4> (b) <h1> (c) <h6> (d) <h2>
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-size: 20px;
      font-weight: bold;
      font-style: italic;
    }
32. 32.📄 Where does <h1> go: in the head or in the body? (a) in the head (b) in the body
33. 33.⚡ What number does this code print?
    let marks = 11;
    marks = marks + 6;
    marks = marks - 14;
    console.log(marks);
34. 34.⚖️ What colour is the text of this element?
    <h2 class="note" id="hero">Hi</h2>
    CSS:
    #hero { color: white; }
    #hero { color: red; } (a) white (b) red (c) green (d) black
35. 35.🌈 Which colour of light is strongest in rgb(140, 109, 151)? (a) green (b) blue (c) red
36. 36.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 12px;
      }
    } (a) No (b) Yes
37. 37.🔠 How many heading levels does HTML have? (a) 10 (b) 6 (c) 4 (d) 3
38. 38.🌈 Which colour of light is strongest in rgb(234, 120, 82)? (a) blue (b) green (c) red
39. 39.🔍 Which line is missing its closing tag?
    line 1: <u>The red kite
    line 2: <b>Rain today</b>
    line 3: <h1>Hello, world!</h1> (a) line 2 (b) line 3 (c) line 1
40. 40.Which of these goes in the head? (a) <p> (b) <link rel="stylesheet"> (c) <table> (d) <ul>

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