Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 206 · 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 paragraphs does this code make?
   <p>Hello, world!</p>
   <p>Fun facts</p>
   <p>My best friend</p>
2. 2.🔍 Which is the odd one out? (a) rounds box corners (b) puts a picture on a page (c) makes a form box (d) makes headings and lists
3. 3.🛡️ Online: is it safe to use a nickname in games? (a) safe (b) not safe
4. 4.🖌️ What colour are the letters?
   p {
     text-align: left;
     color: blue;
     background-color: purple;
     font-size: 20px;
   } (a) blue (b) purple (c) green
5. 5.📋 Which list tag is an unordered list? (a) <li> (b) <ol> (c) <ul>
6. 6.🖼️ How many pixels wide is the picture drawn?
   <img src="moon.png" alt="The full moon" width="100">
7. 7.⚖️ What colour is the text of this element?
   <h2 class="note" id="intro">Hi</h2>
   CSS:
   .note { color: yellow; }
   .note { color: black; } (a) green (b) orange (c) black (d) yellow
8. 8.🏷️ Is </p> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
9. 9.🔢 To build and share your first web page, which comes FIRST? (a) add CSS styles (b) write the HTML (c) test in a browser (d) plan what to show
10. 10.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 350px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 100px wide (no margins).
11. 11.💬 How many paragraphs show on the page?
    <!-- <p>The red kite</p> -->
    <!-- <p>Fun facts</p> -->
    <p>Hello, world!</p>
    <!-- <p>Cricket is fun.</p> -->
    <!-- <p>Good morning!</p> -->
12. 12.🧭 Which semantic tag holds extra side notes? (a) <nav> (b) <aside> (c) <header> (d) <footer>
13. 13.Which of these has a closing tag? (a) <br> (b) <hr> (c) <img> (d) <li>
14. 14.🌈 Which colour is rgb(255, 0, 0)? (a) red (b) magenta (c) bright green (d) black
15. 15.🎯 Which element does the selector #logo style? (a) <h1 class="big"> (b) <p id="end"> (c) <p id="logo"> (d) <p class="logo">
16. 16.🖼️ Which attribute of <img> tells which image to load? (a) width (b) src (c) height (d) alt
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      background-color: yellow;
    }
18. 18.Which colour pair is hard to read? (a) white on black (b) light grey on white (c) white on dark blue (d) yellow on black
19. 19.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: white; } (a) green (b) blue (c) white (d) red
20. 20.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Orange</td><td>Grapes</td></tr>
      <tr><td>Papaya</td><td>Banana</td></tr>
    </table>
21. 21.📝 Which input type lets you pick only one? (a) radio (b) checkbox (c) password (d) date
22. 22.🔁 How many times does this code print “Hi”?
    for (let i = 1; i < 4; i++) {
      console.log("Hi");
    }
23. 23.🌍 Which one is the page’s address? (a) the server (b) the URL (c) the browser (d) HTTPS
24. 24.🌍 What is the protocol in this URL?
    https://www.example.net/maths/tables.html (a) http (b) /maths/tables.html (c) https (d) www.example.net
25. 25.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
26. 26.✍️ What is the selector in this CSS rule?
    body {
      width: 300px;
      margin: 10px;
    } (a) width (b) .box (c) body (d) 10px
27. 27.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 32px;
      }
    }
28. 28.⚡ Which JavaScript word shows a pop-up box? (a) if (b) for (c) alert() (d) let
29. 29.🔠 Which heading shows the BIGGEST text: <h1>, <h5>, <h4> or <h6>? (a) <h5> (b) <h1> (c) <h4> (d) <h6>
30. 30.🎯 What kind of selector is img? (a) an id selector (b) a class selector (c) an element selector
31. 31.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 120px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }
32. 32.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      margin: 10px;
    }
34. 34.🧭 Why use <nav> instead of <div> for a menu? (a) it makes text red (b) it loads faster (c) it tells its meaning (d) it adds pictures
35. 35.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
36. 36.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) exactly 1000px (d) 600px or narrower
37. 37.⚡ What number does this code print?
    let books = 24;
    books = books + 7;
    books = books - 13;
    console.log(books);
38. 38.📝 What does <hr> draw? (a) a line across the page (b) a picture (c) a link (d) a table
39. 39.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 19; i = i + 2) {
      console.log(i);
    }
40. 40.Which of these is true of <article>? (a) holds a side box of tips (b) holds a news story (c) sits at the bottom (d) holds the logo and title

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