Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 777 · 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 property is set to center in this rule?
   #top {
     padding: 8px;
     text-align: center;
   } (a) center (b) text-align (c) background-color (d) margin
2. 2.📋 How many items does this list show?
   <ol>
     <li>Banana</li>
     <li>Guava</li>
     <li>Mango</li>
     <li>Orange</li>
     <li>Litchi</li>
     <li>Jamun</li>
   </ol>
3. 3.📝 Which input type hides what you type? (a) email (b) password (c) number (d) checkbox
4. 4.Which colour pair is hard to read? (a) dark grey on white (b) black on white (c) blue on purple (d) white on black
5. 5.Which of these is an opening tag? (a) </b> (b) </body> (c) <p> (d) </p>
6. 6.⚖️ What colour is the text of this element?
   <h2 class="red" id="main">Hi</h2>
   CSS:
   .red { color: purple; }
   .red { color: red; } (a) purple (b) red (c) black (d) blue
7. 7.✍️ Which sign goes between a property and its value? (a) ; (b) : (c) - (d) =
8. 8.📝 Which input type lets you tick many? (a) radio (b) submit (c) email (d) checkbox
9. 9.Which of these is true of <header>? (a) holds the main content (b) holds the menu of links (c) holds the logo and title (d) sits at the bottom
10. 10.🌈 Which colour of light is strongest in rgb(58, 106, 199)? (a) green (b) red (c) blue
11. 11.🔍 Which is the odd one out? (a) sets colours and fonts (b) adds space around boxes (c) lays out the page (d) shows a pop-up message
12. 12.💬 How many paragraphs show on the page?
    <p>Good morning!</p>
    <p>My best friend</p>
    <p>Hello, world!</p>
    <!-- <p>My pets</p> -->
13. 13.🔗 Which tag makes a clickable link? (a) <link> (b) <img> (c) <p> (d) <a>
14. 14.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
15. 15.📱 What does a media query check? (a) the time of day (b) the battery level (c) the screen width (d) the page title
16. 16.🔠 Which heading shows the BIGGEST text: <h1>, <h5>, <h3> or <h2>? (a) <h1> (b) <h5> (c) <h2> (d) <h3>
17. 17.🔠 Which heading shows the BIGGEST text: <h1>, <h6>, <h3> or <h2>? (a) <h1> (b) <h3> (c) <h6> (d) <h2>
18. 18.True or false: HTML on its own cannot show paragraphs. (a) False (b) True
19. 19.🔢 In a basic web page file, which comes first: “<html>” or “<body>”? (a) <html> (b) <body>
20. 20.True or false: “use headings in order” makes the page harder to use. (a) False (b) True
21. 21.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Litchi
      <input type="checkbox" name="fruit"> Papaya
      <input type="checkbox" name="fruit"> Guava
      <input type="checkbox" name="fruit"> Banana
      <input type="checkbox" name="fruit"> Mango
    </form>
22. 22.Which of these is true of <nav>? (a) holds the logo and title (b) holds one blog post (c) holds extra side notes (d) helps you move around
23. 23.🚀 Which file should this code go in: h1 { font-size: 32px; } (a) index.html (b) style.css (c) script.js
24. 24.🎯 Which element does the selector .big style? (a) <li id="big"> (b) <li class="big"> (c) <div class="box"> (d) <li class="red">
25. 25.True or false: HTML on its own can make bullet lists. (a) False (b) True
26. 26.What is <input type="date"> for? (a) takes only numbers (b) lets you pick only one (c) picks a day (d) sends the form
27. 27.🔗 Which attribute holds the address of a link? (a) id (b) alt (c) href (d) src
28. 28.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 80px wide (no margins).
29. 29.🌍 What finds the server for a domain name like example.com? (a) HTML (b) alt (c) CSS (d) DNS
30. 30.True or false: CSS changes the text size. (a) False (b) True
31. 31.Which of these is true of a web browser? (a) is where we type code (b) colours code to help us (c) sends pages over the net (d) opens web pages for us
32. 32.True or false: “images with no alt” makes the page harder to use. (a) False (b) True
33. 33.🔁 How many times does this code print “Hi”?
    for (let i = 1; i <= 5; i++) {
      console.log("Hi");
    }
34. 34.Which of these is true of a web server? (a) shows line numbers (b) saves our .html files (c) opens web pages for us (d) hosts websites online
35. 35.✍️ What value is given to padding in this rule?
    li {
      font-size: 20px;
      padding: 8px;
      margin: 10px;
    } (a) 2px solid (b) padding (c) bold (d) 8px
36. 36.🏷️ Is </title> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
37. 37.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    }
38. 38.🛡️ Online: is it safe to type a password on http? (a) not safe (b) safe
39. 39.🔍 Which is the odd one out? (a) counts down a timer (b) makes a form box (c) makes a link (d) puts a picture on a page
40. 40.🔁 What does this code print?
    let score = 2;
    if (score < 32) {
      console.log("You win");
    } else {
      console.log("Play again");
    } (a) You win (b) Play again

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