Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 726 · 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 heading shows the SMALLEST text: <h1>, <h2>, <h4> or <h5>? (a) <h5> (b) <h2> (c) <h1> (d) <h4>
2. 2.🖌️ What colour is behind the letters?
   li {
     background-color: white;
     text-align: right;
     font-size: 32px;
     color: green;
   } (a) yellow (b) green (c) white
3. 3.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 24px;
     }
   } (a) No (b) Yes
4. 4.⚡ What does JavaScript add to a web page? (a) only colours (b) the domain name (c) the page title (d) actions and changes
5. 5.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the shorter one (c) the first one (d) neither
6. 6.🏷️ Which is the closing tag for <h2>? (a) <h2/> (b) <\h2> (c) </h2> (d) <h2>
7. 7.🔢 In a basic web page file, which comes LAST? (a) <head> (b) </html> (c) <html> (d) </body>
8. 8.⚡ What does this code print? (Look at the quotes!)
   let x = "8";
   let y = 1;
   console.log(x + y); (a) 81 (b) 9 (c) Error
9. 9.💬 Which text will NOT show on the page?
   <!-- <p>Good morning!</p> -->
   <p>My best friend</p>
   <p>Fun facts</p>
   <p>I love mangoes.</p> (a) My best friend (b) Fun facts (c) I love mangoes. (d) Good morning!
10. 10.True or false: <aside> holds the main content. (a) True (b) False
11. 11.What does color do? (a) colours behind the text (b) makes letters bigger (c) sets the letter colour (d) centres a heading
12. 12.🔠 How many <h1> headings should a page usually have? (a) 10 (b) 1 (c) 3 (d) 6
13. 13.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
14. 14.🔢 On a typical page, from top to bottom, which comes FIRST? (a) <main> (b) <header> (c) <footer> (d) <nav>
15. 15.True or false: <a> goes in the head. (a) False (b) True
16. 16.🔍 One closing tag is missing. Which one?
    <strong>Rain today
    <b>The red kite</b>
    <h2>Fun facts</h2> (a) </b> (b) </h2> (c) </strong> (d) </u>
17. 17.✍️ What value is given to border in this rule?
    h2 {
      font-style: italic;
      border: 2px solid;
    } (a) border (b) 300px (c) italic (d) 2px solid
18. 18.True or false: CSS adds space around boxes. (a) True (b) False
19. 19.🌈 Which hex code is yellow? (a) #00ffff (b) #ffffff (c) #ff0000 (d) #ffff00
20. 20.🔍 Which is the odd one out? (a) sends pages over the net (b) hosts websites online (c) saves our .html files (d) stores a website’s files
21. 21.🖼️ Why do we add alt text to an image? (a) to describe the image (b) to colour it (c) to make it bigger (d) to load it faster
22. 22.💬 How many paragraphs show on the page?
    <!-- <p>Rain today</p> -->
    <p>Our school trip</p>
    <p>The red kite</p>
    <p>Cricket is fun.</p>
23. 23.What does font-weight do? (a) colours behind the text (b) makes letters bigger (c) makes the text bold (d) picks the font style
24. 24.💬 How many paragraphs show on the page?
    <!-- <p>Rain today</p> -->
    <!-- <p>Our school trip</p> -->
    <p>My best friend</p>
25. 25.🔍 Which line is missing its closing tag?
    line 1: <small>The red kite</small>
    line 2: <b>Our school trip
    line 3: <h2>Rain today</h2> (a) line 3 (b) line 2 (c) line 1
26. 26.🖌️ Which CSS property makes the text bold? (a) font-size (b) font-weight (c) color (d) font-family
27. 27.💬 How many paragraphs show on the page?
    <!-- <p>The red kite</p> -->
    <p>Good morning!</p>
    <p>Hello, world!</p>
28. 28.🖼️ Which attribute of <img> describes the picture? (a) width (b) src (c) alt (d) height
29. 29.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as one space (b) as 5 spaces (c) as a dot (d) as a new line
30. 30.🔠 How many headings are in this code?
    <h1>Cricket is fun.</h1>
    <h2>Rain today</h2>
    <h2>My pets</h2>
31. 31.True or false: <table> goes in the head. (a) False (b) True
32. 32.📝 Which input type sends the form? (a) submit (b) checkbox (c) number (d) text
33. 33.💬 Which text will NOT show on the page?
    <p>Good morning!</p>
    <p>My best friend</p>
    <!-- <p>My pets</p> -->
    <p>I love mangoes.</p> (a) Good morning! (b) I love mangoes. (c) My pets (d) My best friend
34. 34.⚖️ What colour is the text of this element?
    <p class="big" id="main">Hi</p>
    CSS:
    #main { color: green; }
    .big { color: white; }
    p { color: orange; } (a) orange (b) white (c) yellow (d) green
35. 35.🎯 Which CSS selector matches this element?
    <h2 class="big" id="intro">Hello</h2> (a) .intro (b) #big (c) #main (d) h2
36. 36.📋 Which list tag is one item of a list? (a) <ol> (b) <li> (c) <ul>
37. 37.📊 Which tag makes a heading cell? (a) <tr> (b) <caption> (c) <td> (d) <th>
38. 38.♿ What does good colour contrast mean? (a) no colours at all (b) text stands out clearly (c) many bright colours (d) only red text
39. 39.🔠 How many heading levels does HTML have? (a) 10 (b) 4 (c) 6 (d) 3
40. 40.🔢 When you open a web page, which comes LAST? (a) DNS finds the server (b) you type the URL (c) the browser asks it (d) the browser shows it

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