Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 993 · 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.🧭 Is <nav> semantic or not semantic? (a) semantic (b) not semantic
2. 2.🏷️ Which is the closing tag for <u>? (a) </u> (b) <\u> (c) <u/> (d) <u>
3. 3.✍️ What value is given to font-weight in this rule?
   li {
     font-style: italic;
     font-weight: bold;
   } (a) 2px solid (b) font-weight (c) 300px (d) bold
4. 4.🔠 Which heading shows the BIGGEST text: <h5>, <h1>, <h2> or <h3>? (a) <h2> (b) <h5> (c) <h1> (d) <h3>
5. 5.True or false: the content is the line round the box. (a) False (b) True
6. 6.True or false: the border is space outside the border. (a) True (b) False
7. 7.🔠 Which heading shows the SMALLEST text: <h4>, <h3>, <h5> or <h6>? (a) <h3> (b) <h6> (c) <h5> (d) <h4>
8. 8.💬 How many paragraphs show on the page?
   <!-- <p>Fun facts</p> -->
   <p>The red kite</p>
   <p>My pets</p>
   <p>Cricket is fun.</p>
9. 9.🔐 Is abcd1234 a strong or a weak password? (a) strong (b) weak
10. 10.What does font-size do? (a) makes letters bigger (b) picks the font style (c) makes the text bold (d) centres a heading
11. 11.📝 Does <input> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
12. 12.True or false: <ul> is one item of a list. (a) True (b) False
13. 13.📝 On how many lines does the browser show this paragraph?
    <p>Birds sing<br>Roses are red<br>Kites fly high</p>
14. 14.🔢 In a basic web page file, which comes first: “<body>” or “</html>”? (a) </html> (b) <body>
15. 15.🖌️ What colour is behind the letters?
    h1 {
      text-align: left;
      background-color: white;
      font-size: 36px;
      color: orange;
    } (a) orange (b) yellow (c) white
16. 16.⚖️ What colour is the text of this element?
    <h1 class="box" id="logo">Hi</h1>
    CSS:
    #logo { color: blue; }
    #logo { color: red; } (a) blue (b) purple (c) yellow (d) red
17. 17.🚀 Which file should this code go in: console.log(5 + 2); (a) style.css (b) script.js (c) index.html
18. 18.📋 Which list shows the steps of a recipe best? (a) <hr> (b) <br> (c) <ul> (d) <ol>
19. 19.📱 What does a media query check? (a) the time of day (b) the battery level (c) the screen width (d) the page title
20. 20.Which of these is a closing tag? (a) <li> (b) <title> (c) </p> (d) <b>
21. 21.📝 How many paragraphs does this code make?
    <p>Cricket is fun.</p>
    <h2>Hello, world!</h2>
    <p>The red kite</p>
    <p>My best friend</p>
22. 22.📋 Which list suits a shopping list in any order? (a) <ol> (b) <br> (c) <hr> (d) <ul>
23. 23.🔠 How many headings are in this code?
    <h1>Fun facts</h1>
    <p>I love mangoes.</p>
    <h2>My best friend</h2>
    <p>Our school trip</p>
    <h2>My best friend</h2>
24. 24.⚡ What does this code print? (Look at the quotes!)
    let x = "6";
    let y = 7;
    console.log(x + y); (a) 67 (b) 13 (c) Error
25. 25.🎯 Which sign starts an id selector? (a) # (b) @ (c) . (d) &
26. 26.🖼️ Which attribute of <img> describes the picture? (a) alt (b) width (c) src (d) height
27. 27.⚡ What number does this code print?
    let a = 8;
    let b = 5;
    console.log(a * b);
28. 28.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="fort.jpg" alt="An old fort" width="50"> (a) fort.jpg (b) width (c) An old fort (d) A tiger asleep
29. 29.🎯 Which CSS selector matches this element?
    <h2 class="note" id="top">Hello</h2> (a) .big (b) li (c) .note (d) #intro
30. 30.🔍 Which line is missing its closing tag?
    line 1: <i>I love mangoes.</i>
    line 2: <strong>Our school trip
    line 3: <u>Cricket is fun.</u> (a) line 3 (b) line 2 (c) line 1
31. 31.💬 How does an HTML comment start? (a) # (b) // (c) /* (d) <!--
32. 32.✍️ In color: blue; which part is the value? (a) blue (b) color (c) : (d) ;
33. 33.⚡ What does this code print? (Look at the quotes!)
    let x = "3";
    let y = 1;
    console.log(x + y); (a) Error (b) 4 (c) 31
34. 34.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-end (c) space-between (d) flex-start
35. 35.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 420px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
36. 36.⚡ What does this code show?
    let name = "Zoya";
    alert("Well done, " + name + "!"); (a) Well done, Zoya! (b) name (c) Zoya (d) Well done, name!
37. 37.🎯 What kind of selector is body? (a) a class selector (b) an id selector (c) an element selector
38. 38.Which of these is the border? (a) the line round the box (b) the gap round content (c) space inside the border (d) the gap to other boxes
39. 39.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the later one (d) the shorter one
40. 40.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 90px;
      padding: 30px;
      border: 4px solid black;
      margin: 5px;
    }

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