Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 672 · 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 many headings are in this code?
   <h1>Rain today</h1>
   <p>Fun facts</p>
   <h2>Rain today</h2>
2. 2.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 10px;
     }
   } (a) Yes (b) No
3. 3.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) F (c) J (d) G
4. 4.📝 Which input type hides what you type? (a) text (b) number (c) submit (d) password
5. 5.What does color do? (a) sets the letter colour (b) colours behind the text (c) makes letters bigger (d) makes the text bold
6. 6.🖌️ Which CSS property centres a heading? (a) text-align (b) color (c) background-color (d) font-family
7. 7.Which of these does JavaScript do? (a) changes the page live (b) sets colours and fonts (c) lays out the page (d) puts a picture on a page
8. 8.🔁 What is the LAST number this code prints?
   for (let i = 0; i < 6; i = i + 4) {
     console.log(i);
   }
9. 9.True or false: <footer> holds copyright notes. (a) False (b) True
10. 10.🔠 How many headings are in this code?
    <h1>Cricket is fun.</h1>
    <h2>I love mangoes.</h2>
    <p>Our school trip</p>
    <h4>Cricket is fun.</h4>
11. 11.🚀 Which file should this code go in: p { color: red; } (a) style.css (b) script.js (c) index.html
12. 12.♿ A part of the page is under a <h1> heading. Which tag should its sub-heading use? (a) <h3> (b) <h5> (c) <h2> (d) <h4>
13. 13.🔗 Where does this link open?
    <a href="quiz.html">Maths fun</a> (a) in the same tab (b) in a new tab
14. 14.🏷️ Every HTML tag starts with which sign? (a) < (b) [ (c) { (d) (
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 50px wide (no margins).
16. 16.True or false: HTML makes a form box. (a) False (b) True
17. 17.🏷️ Which is the closing tag for <p>? (a) <p/> (b) <p> (c) <\p> (d) </p>
18. 18.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    #end { color: black; }
    p { color: white; }
    .big { color: blue; } (a) white (b) black (c) yellow (d) blue
19. 19.True or false: the URL stores the site’s files. (a) False (b) True
20. 20.True or false: in <img>, src sets how tall it is. (a) False (b) True
21. 21.🔗 Which words do you click on?
    <a href="art.html">Take the quiz</a> (a) href (b) art.html (c) Play games (d) Take the quiz
22. 22.Which of these is true of a web browser? (a) answers page requests (b) is where we type code (c) shows line numbers (d) opens web pages for us
23. 23.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-size: 20px;
    }
24. 24.⚡ What number does this code print?
    let a = 54;
    let b = 3;
    console.log(a + b);
25. 25.🔍 Which line is missing its closing tag?
    line 1: <h2>My best friend
    line 2: <em>The red kite</em>
    line 3: <p>My pets</p> (a) line 2 (b) line 3 (c) line 1
26. 26.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="colour"> Red
      <input type="checkbox" name="colour"> Pink
      <input type="checkbox" name="colour"> Blue
      <input type="checkbox" name="colour"> Orange
      <input type="checkbox" name="colour"> Green
    </form>
27. 27.True or false: to ask before downloading is not safe. (a) True (b) False
28. 28.⚖️ What colour is the text of this element?
    <h1 class="menu" id="hero">Hi</h1>
    CSS:
    h1 { color: blue; }
    h1 { color: white; } (a) blue (b) white (c) black (d) purple
29. 29.Which of these is a closing tag? (a) <h1> (b) <p> (c) </title> (d) <body>
30. 30.Which of these does HTML do? (a) shows a pop-up message (b) makes headings and lists (c) changes the page live (d) reacts to a button click
31. 31.Which of these is an opening tag? (a) </h1> (b) </b> (c) </li> (d) <li>
32. 32.Which of these is true of a web server? (a) stores a website’s files (b) opens web pages for us (c) is where we type code (d) colours code to help us
33. 33.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
34. 34.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 130px;
      padding: 30px;
      border: 1px solid black;
      margin: 5px;
    }
35. 35.💬 Which text will NOT show on the page?
    <p>The red kite</p>
    <p>Hello, world!</p>
    <p>Good morning!</p>
    <!-- <p>My pets</p> --> (a) The red kite (b) Hello, world! (c) Good morning! (d) My pets
36. 36.📄 Can HTML on its own pick a random number? (a) No (b) Yes
37. 37.🔠 Which tag is used for the main title on a page? (a) <p> (b) <h6> (c) <br> (d) <h1>
38. 38.📝 On how many lines does the browser show this paragraph?
    <p>Birds sing<br>Kites fly high<br>Rivers flow<br>Sky is blue<br>Stars shine</p>
39. 39.🚀 Which file should this code go in: .box { padding: 8px; } (a) script.js (b) style.css (c) index.html
40. 40.True or false: a web browser hosts websites online. (a) True (b) False

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