Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 679 · 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 code links to about.html? (a) <a href="about.html"> (b) <link about.html> (c) <a alt="about.html"> (d) <a src="about.html">
2. 2.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 70px;
     padding: 25px;
     border: 2px solid black;
     margin: 5px;
   }
3. 3.🧭 How many <main> parts should a page have? (a) ten (b) three (c) none (d) one
4. 4.Which of these goes in the head? (a) <p> (b) <title> (c) <table> (d) <h1>
5. 5.⚡ Which JavaScript word repeats code? (a) console.log() (b) for (c) alert() (d) if
6. 6.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 18px;
     }
   }
7. 7.🔍 One closing tag is missing. Which one?
   <p>I love mangoes.</p>
   <i>Our school trip</i>
   <h2>Good morning! (a) </p> (b) </i> (c) </u> (d) </h2>
8. 8.⚖️ What colour is the text of this element?
   <h1 class="box" id="hero">Hi</h1>
   CSS:
   h1 { color: orange; }
   #hero { color: blue; }
   .box { color: white; } (a) white (b) green (c) blue (d) orange
9. 9.💪 Which flexbox property picks row or column? (a) align-items (b) gap (c) flex-direction (d) display: flex
10. 10.True or false: JavaScript checks a quiz answer. (a) False (b) True
11. 11.🌈 Which colour of light is strongest in rgb(91, 168, 128)? (a) blue (b) red (c) green
12. 12.🌈 In #160000 the red part is the hex number 16. What is it as a normal number?
13. 13.💪 Which flexbox property sets space between boxes? (a) align-items (b) display: flex (c) gap (d) justify-content
14. 14.🖼️ Which attribute of <img> describes the picture? (a) width (b) height (c) alt (d) src
15. 15.🌍 Which one asks for a web page? (a) the server (b) the URL (c) the browser (d) HTTPS
16. 16.What does text-align do? (a) colours behind the text (b) makes letters bigger (c) centres a heading (d) picks the font style
17. 17.📋 What number does the browser show next to “Orange”?
    <ol start="2">
      <li>Mango</li>
      <li>Orange</li>
      <li>Papaya</li>
    </ol>
18. 18.🔍 One closing tag is missing. Which one?
    <u>Good morning!</u>
    <p>Cricket is fun.
    <b>I love mangoes.</b> (a) </u> (b) </b> (c) </p> (d) </em>
19. 19.📝 How many paragraphs does this code make?
    <p>The red kite</p>
    <h2>I love mangoes.</h2>
    <p>I love mangoes.</p>
    <h2>Fun facts</h2>
20. 20.🖌️ What colour are the letters?
    li {
      font-size: 24px;
      color: purple;
      text-align: right;
      background-color: white;
    } (a) white (b) black (c) purple
21. 21.True or false: img is an element selector. (a) False (b) True
22. 22.🌈 Which colour of light is strongest in rgb(178, 23, 3)? (a) green (b) blue (c) red
23. 23.✍️ What is the selector in this CSS rule?
    body {
      font-style: italic;
      margin: 10px;
      text-align: center;
      padding: 8px;
    } (a) .box (b) 10px (c) body (d) font-style
24. 24.🔢 In a basic web page file, which comes first: “<!DOCTYPE html>” or “</html>”? (a) </html> (b) <!DOCTYPE html>
25. 25.Which of these is an opening tag? (a) </title> (b) <h1> (c) </p> (d) </b>
26. 26.🔠 Which heading shows the SMALLEST text: <h1>, <h2>, <h4> or <h5>? (a) <h5> (b) <h2> (c) <h1> (d) <h4>
27. 27.⚡ What does this code show?
    let name = "Riya";
    alert("Well done, " + name + "!"); (a) Well done, Riya! (b) Riya (c) name (d) Well done, name!
28. 28.⚖️ What colour is the text of this element?
    <h2 class="big" id="logo">Hi</h2>
    CSS:
    h2 { color: green; }
    h2 { color: black; } (a) yellow (b) blue (c) green (d) black
29. 29.🔗 Which attribute holds the address of a link? (a) src (b) href (c) id (d) alt
30. 30.🌐 Which one stores a website’s files? (a) a code editor (b) a web browser (c) a web server
31. 31.📝 Which input type is for one line of words? (a) date (b) email (c) text (d) submit
32. 32.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Art Gallery</title>
    </head>
    <body>
      <h1>My drawings</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) Art Gallery (b) My drawings (c) index.html (d) Mars is red.
33. 33.Which of these is an empty tag? (a) <img> (b) <p> (c) <h1> (d) <li>
34. 34.♿ Does this help everyone, or make the page harder to use: write clear link text? (a) makes it harder (b) helps everyone
35. 35.📝 On how many lines does the browser show this paragraph?
    <p>Roses are red<br>Kites fly high<br>Stars shine<br>Sky is blue</p>
36. 36.🔠 Which heading shows the BIGGEST text: <h3>, <h5>, <h6> or <h2>? (a) <h6> (b) <h2> (c) <h3> (d) <h5>
37. 37.🧩 Which language sets colours and fonts? (a) JavaScript (b) HTML (c) CSS
38. 38.📋 What number does the browser show next to “Orange”?
    <ol start="9">
      <li>Guava</li>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Mango</li>
    </ol>
39. 39.🖌️ Where does the text sit on its line?
    h2 {
      background-color: red;
      text-align: left;
      font-size: 24px;
      color: white;
    } (a) in the middle (b) on the left (c) on the right
40. 40.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) gap (c) align-items (d) justify-content

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