Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 308 · 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 tag makes one data cell? (a) <caption> (b) <table> (c) <td> (d) <th>
2. 2.🖌️ How big is the text, in px?
   li {
     background-color: red;
     text-align: right;
     color: green;
     font-size: 40px;
   }
3. 3.🌈 Which colour of light is strongest in rgb(109, 90, 216)? (a) green (b) blue (c) red
4. 4.🧩 Which language changes the page live? (a) JavaScript (b) HTML (c) CSS
5. 5.🔠 Which tag is the least important heading? (a) <h3> (b) <p> (c) <h1> (d) <h6>
6. 6.What does justify-content: flex-end do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
7. 7.📝 How many paragraphs does this code make?
   <p>Fun facts</p>
   <h2>Rain today</h2>
   <p>Cricket is fun.</p>
   <p>Good morning!</p>
   <h2>Good morning!</h2>
   <p>Cricket is fun.</p>
8. 8.Which of these is true of a code editor? (a) has an address bar (b) saves our .html files (c) turns HTML into a page (d) opens web pages for us
9. 9.🖌️ How big is the text, in px?
   h2 {
     color: red;
     background-color: purple;
     text-align: right;
     font-size: 36px;
   }
10. 10.🔗 Which words do you click on?
    <a href="news.html">School news</a> (a) Take the quiz (b) School news (c) href (d) news.html
11. 11.True or false: CSS makes a form box. (a) True (b) False
12. 12.🏷️ Is <li> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
13. 13.🎯 Which element does the selector p style? (a) <li id="logo"> (b) <p class="star"> (c) <h1> (d) <h2 class="star">
14. 14.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Cricket Club</title>
    </head>
    <body>
      <h1>Match report</h1>
      <p>We won by 5 runs.</p>
    </body>
    </html> (a) body (b) Match report (c) Cricket Club (d) We won by 5 runs.
15. 15.🖌️ What colour are the letters?
    p {
      font-size: 32px;
      color: white;
      background-color: green;
      text-align: left;
    } (a) red (b) white (c) green
16. 16.True or false: the browser shows the page to you. (a) True (b) False
17. 17.🔗 Which address opens when you click this link?
    <a href="news.html">Art corner</a> (a) quiz.html (b) Art corner (c) games.html (d) news.html
18. 18.🔗 Which tag makes a clickable link? (a) <link> (b) <img> (c) <p> (d) <a>
19. 19.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the later one (d) the shorter one
20. 20.🚀 Which file should this code go in: .box { padding: 8px; } (a) index.html (b) script.js (c) style.css
21. 21.🎯 What kind of selector is .star? (a) a class selector (b) an id selector (c) an element selector
22. 22.⚖️ What colour is the text of this element?
    <p class="box" id="main">Hi</p>
    CSS:
    #main { color: yellow; }
    .box { color: green; }
    p { color: red; } (a) red (b) blue (c) green (d) yellow
23. 23.Which of these does HTML do? (a) sets colours and fonts (b) reacts to a button click (c) adds space around boxes (d) makes a form box
24. 24.🔠 Which heading shows the SMALLEST text: <h6>, <h1>, <h3> or <h4>? (a) <h1> (b) <h3> (c) <h4> (d) <h6>
25. 25.🔠 Which heading shows the BIGGEST text: <h3>, <h1>, <h2> or <h6>? (a) <h1> (b) <h2> (c) <h6> (d) <h3>
26. 26.🌍 What is the protocol in this URL?
    http://school.example.in/maths/tables.html (a) https (b) school.example.in (c) /maths/tables.html (d) http
27. 27.🔠 Which heading shows the BIGGEST text: <h1>, <h2>, <h5> or <h4>? (a) <h1> (b) <h5> (c) <h2> (d) <h4>
28. 28.🧭 Which semantic tag holds the main content? (a) <nav> (b) <main> (c) <footer> (d) <header>
29. 29.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    .note { color: white; }
    .note { color: green; } (a) white (b) purple (c) blue (d) green
30. 30.📝 How many paragraphs does this code make?
    <p>Fun facts</p>
    <h2>Good morning!</h2>
    <p>Hello, world!</p>
    <p>Hello, world!</p>
    <p>I love mangoes.</p>
31. 31.🖼️ Which attribute of <img> describes the picture? (a) alt (b) height (c) width (d) src
32. 32.📋 Which list tag lists steps in order? (a) <ol> (b) <li> (c) <ul>
33. 33.Which of these is true of <nav>? (a) holds the logo and title (b) is the page’s key part (c) holds the main content (d) helps you move around
34. 34.⚖️ What colour is the text of this element?
    <h2 class="big" id="logo">Hi</h2>
    CSS:
    #logo { color: green; }
    #logo { color: red; } (a) blue (b) orange (c) red (d) green
35. 35.🔐 Is S0lar!Pen#8 a strong or a weak password? (a) strong (b) weak
36. 36.⚖️ What colour is the text of this element?
    <p class="box" id="intro">Hi</p>
    CSS:
    .box { color: yellow; }
    #intro { color: purple; }
    p { color: red; } (a) green (b) red (c) purple (d) yellow
37. 37.💬 How many paragraphs show on the page?
    <!-- <p>Our school trip</p> -->
    <!-- <p>Rain today</p> -->
    <!-- <p>Hello, world!</p> -->
    <p>Cricket is fun.</p>
38. 38.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 9; i = i + 4) {
      console.log(i);
    }
39. 39.📱 What does a media query check? (a) the page title (b) the screen width (c) the battery level (d) the time of day
40. 40.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Creative Sheet System (c) Computer Style Sheets (d) Colourful Site Styles

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