Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 435 · 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.True or false: .note is a class selector. (a) True (b) False
2. 2.🌈 Which colour is rgb(0, 255, 255)? (a) red (b) blue (c) cyan (d) black
3. 3.🔍 One closing tag is missing. Which one?
   <em>Fun facts</em>
   <h3>My best friend</h3>
   <h2>Our school trip (a) </h3> (b) </h2> (c) </em> (d) </h1>
4. 4.🔢 In a basic web page file, which comes first: “</html>” or “<body>”? (a) </html> (b) <body>
5. 5.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) type the password (b) close it, tell an adult (c) share it with friends (d) click it twice
6. 6.🖌️ Which CSS property centres a heading? (a) background-color (b) text-align (c) color (d) font-family
7. 7.What is <input type="number"> for? (a) lets you pick only one (b) takes only numbers (c) is for an email address (d) is for one line of words
8. 8.🔠 Which heading shows the SMALLEST text: <h1>, <h6>, <h4> or <h5>? (a) <h5> (b) <h1> (c) <h6> (d) <h4>
9. 9.🎯 Which CSS selector matches this element?
   <h2 class="star" id="logo">Hello</h2> (a) li (b) .logo (c) h2 (d) .menu
10. 10.✍️ In color: blue; which part is the value? (a) color (b) ; (c) : (d) blue
11. 11.🔢 To build and share your first web page, what comes right after “add CSS styles”? (a) test in a browser (b) publish it online (c) write the HTML (d) plan what to show
12. 12.True or false: <h1>My Site</h1> goes in index.html. (a) True (b) False
13. 13.📝 What does a password box show instead of letters? (a) emojis (b) capital letters (c) dots (d) numbers
14. 14.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    } (a) No (b) Yes
15. 15.📋 What number does the browser show next to “Guava”?
    <ol>
      <li>Jamun</li>
      <li>Papaya</li>
      <li>Grapes</li>
      <li>Mango</li>
      <li>Guava</li>
      <li>Litchi</li>
    </ol>
16. 16.🏷️ Every HTML tag starts with which sign? (a) < (b) { (c) [ (d) (
17. 17.🔍 Which is the odd one out? (a) sends pages over the net (b) shows pages from the web (c) opens web pages for us (d) has an address bar
18. 18.What does justify-content: flex-start do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
19. 19.📋 Which list tag is an ordered list? (a) <ol> (b) <ul> (c) <li>
20. 20.⚖️ What colour is the text of this element?
    <p class="star" id="logo">Hi</p>
    CSS:
    p { color: orange; }
    p { color: green; } (a) orange (b) white (c) yellow (d) green
21. 21.⚖️ What colour is the text of this element?
    <p class="menu" id="top">Hi</p>
    CSS:
    p { color: green; }
    p { color: yellow; } (a) yellow (b) red (c) black (d) green
22. 22.🔗 Where does this link open?
    <a href="news.html">Take the quiz</a> (a) in a new tab (b) in the same tab
23. 23.🏷️ Which is the closing tag for <h1>? (a) <h1/> (b) <\h1> (c) <h1> (d) </h1>
24. 24.📄 Can HTML on its own run a game loop? (a) Yes (b) No
25. 25.🌐 Which one answers page requests? (a) a web server (b) a web browser (c) a code editor
26. 26.Which colour pair is easy to read? (a) black on white (b) light grey on white (c) yellow on white (d) red on green
27. 27.♿ Which link text is clearest? (a) here (b) link (c) Read the fruit facts (d) click here
28. 28.True or false: <h1> is an empty tag. (a) True (b) False
29. 29.✍️ How does a CSS comment start? (a) // (b) <!-- (c) # (d) /*
30. 30.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 17; i = i + 2) {
      console.log(i);
    }
31. 31.🎯 Which element does the selector #top style? (a) <li id="top"> (b) <li class="top"> (c) <div class="box"> (d) <li id="intro">
32. 32.⚡ What number does this code print?
    let a = 57;
    let b = 40;
    console.log(a - b);
33. 33.🔠 Which heading shows the BIGGEST text: <h1>, <h6>, <h2> or <h4>? (a) <h2> (b) <h1> (c) <h4> (d) <h6>
34. 34.🔗 Which code links to about.html? (a) <a href="about.html"> (b) <a alt="about.html"> (c) <a src="about.html"> (d) <link about.html>
35. 35.True or false: <li> shows bullet points. (a) True (b) False
36. 36.🔁 Which loop repeats code a set number of times? (a) else (b) if (c) let (d) for
37. 37.🖼️ Which attribute of <img> names the picture file? (a) height (b) src (c) alt (d) width
38. 38.📱 What does a media query check? (a) the time of day (b) the page title (c) the screen width (d) the battery level
39. 39.🔠 How many heading levels does HTML have? (a) 4 (b) 6 (c) 10 (d) 3
40. 40.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 5px;
      border: 2px solid black;
      margin: 20px;
    }

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