Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 449 · 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.📊 Are <th> cells shown bold and centred by default? (a) Yes (b) No
2. 2.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 60px;
     padding: 20px;
     border: 1px solid black;
     margin: 20px;
   }
3. 3.True or false: HTML gives the page structure. (a) False (b) True
4. 4.🖼️ Why do we add alt text to an image? (a) to colour it (b) to make it bigger (c) to describe the image (d) to load it faster
5. 5.🚀 Which file should this code go in: <h1>My Site</h1> (a) script.js (b) index.html (c) style.css
6. 6.♿ Is this heading order correct (no level skipped)?
   <h1> → <h2> → <h2> → <h4> (a) Yes (b) No
7. 7.🛡️ Before typing a password on a site, check the address starts with ___. (a) www (b) https (c) http (d) ftp
8. 8.Which of these goes in the body? (a) <style> (b) <h1> (c) <meta charset="utf-8"> (d) <title>
9. 9.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 370px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 80px wide (no margins).
10. 10.🔠 Which heading shows the BIGGEST text: <h4>, <h6>, <h2> or <h3>? (a) <h6> (b) <h4> (c) <h3> (d) <h2>
11. 11.🌈 Which colour is rgb(0, 255, 255)? (a) black (b) yellow (c) cyan (d) blue
12. 12.🖌️ Which CSS property makes letters bigger? (a) font-size (b) text-align (c) color (d) font-family
13. 13.⚡ What number does this code print?
    let a = 50;
    let b = 24;
    console.log(a + b);
14. 14.🔠 How many headings are in this code?
    <h1>Cricket is fun.</h1>
    <h3>Cricket is fun.</h3>
    <h4>Hello, world!</h4>
15. 15.📝 Which tag makes a drop-down list? (a) <ul> (b) <select> (c) <li> (d) <ol>
16. 16.True or false: <tr> makes one table row. (a) True (b) False
17. 17.🔗 Where does this link open?
    <a href="https://example.com">Maths fun</a> (a) in a new tab (b) in the same tab
18. 18.True or false: <style> goes in the head. (a) False (b) True
19. 19.🎯 What kind of selector is #hero? (a) a class selector (b) an element selector (c) an id selector
20. 20.🚀 Should file names have spaces, like my page.html? (a) No (b) Yes
21. 21.True or false: let score = 0; goes in script.js. (a) False (b) True
22. 22.✍️ What is the selector in this CSS rule?
    .box {
      text-align: center;
      font-style: italic;
      padding: 8px;
    } (a) italic (b) h2 (c) text-align (d) .box
23. 23.🔍 Which line is missing its closing tag?
    line 1: <h1>Our school trip</h1>
    line 2: <em>Fun facts
    line 3: <p>Hello, world!</p> (a) line 3 (b) line 1 (c) line 2
24. 24.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or wider (c) exactly 1000px (d) 600px or narrower
25. 25.✍️ What value is given to padding in this rule?
    #top {
      padding: 8px;
      color: red;
      font-style: italic;
      font-weight: bold;
    } (a) bold (b) 2px solid (c) 8px (d) padding
26. 26.🖌️ Where does the text sit on its line?
    h1 {
      color: orange;
      background-color: black;
      text-align: left;
      font-size: 16px;
    } (a) in the middle (b) on the left (c) on the right
27. 27.✍️ What is the selector in this CSS rule?
    li {
      margin: 10px;
      width: 300px;
      text-align: center;
    } (a) margin (b) 300px (c) body (d) li
28. 28.🚀 What is the home page file of a website usually called? (a) start.js (b) main.png (c) home.css (d) index.html
29. 29.🖼️ Which attribute of <img> tells which image to load? (a) alt (b) src (c) width (d) height
30. 30.✍️ Which property is set to yellow in this rule?
    body {
      font-style: italic;
      background-color: yellow;
      font-size: 20px;
      border: 2px solid;
    } (a) padding (b) margin (c) yellow (d) background-color
31. 31.🧭 Is <section> semantic or not semantic? (a) not semantic (b) semantic
32. 32.🔗 Which code links to about.html? (a) <a href="about.html"> (b) <link about.html> (c) <a alt="about.html"> (d) <a src="about.html">
33. 33.True or false: the content is the line round the box. (a) False (b) True
34. 34.True or false: <ul> has a closing tag. (a) True (b) False
35. 35.⚡ What number does this code print?
    let a = 60;
    let b = 11;
    console.log(a - b);
36. 36.🔁 Which word runs code only when something is true? (a) let (b) if (c) for (d) log
37. 37.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    h2 { color: purple; }
    #top { color: yellow; } (a) purple (b) yellow (c) white (d) black
38. 38.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="dog.jpg" alt="A happy dog" width="50"> (a) width (b) A happy dog (c) dog.jpg (d) The full moon
39. 39.🏷️ HTML marks up text using ___. (a) wires (b) keys (c) tags (d) pixels
40. 40.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No

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