Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 207 · 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 loop repeats code a set number of times? (a) if (b) for (c) let (d) else
2. 2.True or false: HTML on its own can make links to pages. (a) False (b) True
3. 3.🌈 Which hex code is black? (a) #000000 (b) #ffffff (c) #00ffff (d) #ff00ff
4. 4.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the head (b) in the body
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 320px;
     justify-content: center;
   }
   Inside are 3 boxes, each 100px wide (no margins).
6. 6.💬 Which text will NOT show on the page?
   <p>The red kite</p>
   <p>Rain today</p>
   <!-- <p>Fun facts</p> --> (a) Fun facts (b) Rain today (c) The red kite
7. 7.🔗 Which words do you click on?
   <a href="contact.html">Play games</a> (a) contact.html (b) About us (c) Play games (d) href
8. 8.🔗 Which address opens when you click this link?
   <a href="news.html">Visit the site</a> (a) quiz.html (b) games.html (c) Visit the site (d) news.html
9. 9.🔐 Is password a strong or a weak password? (a) strong (b) weak
10. 10.🔢 To build and share your first web page, what comes right after “plan what to show”? (a) publish it online (b) add CSS styles (c) write the HTML (d) test in a browser
11. 11.🔗 Which words do you click on?
    <a href="games.html">Take the quiz</a> (a) href (b) Play games (c) games.html (d) Take the quiz
12. 12.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
13. 13.🔗 Which address opens when you click this link?
    <a href="maths.html">About us</a> (a) maths.html (b) art.html (c) news.html (d) About us
14. 14.🔠 Which heading shows the BIGGEST text: <h1>, <h2>, <h5> or <h3>? (a) <h3> (b) <h1> (c) <h5> (d) <h2>
15. 15.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
16. 16.True or false: <th> makes a heading cell. (a) True (b) False
17. 17.🔁 What does this code print?
    let age = 15;
    if (age >= 28) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
18. 18.Which of these does JavaScript do? (a) rounds box corners (b) makes headings and lists (c) sets colours and fonts (d) counts down a timer
19. 19.📊 In a table, which tag is a row? (a) <tr> (b) <th> (c) <tb> (d) <td>
20. 20.📄 Where does <link rel="stylesheet"> go: in the head or in the body? (a) in the body (b) in the head
21. 21.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    h2 { color: green; }
    .note { color: blue; } (a) green (b) blue (c) red (d) purple
22. 22.🔍 Which is the odd one out? (a) changes the text size (b) reacts to a button click (c) counts down a timer (d) changes the page live
23. 23.♿ Which link text is clearest? (a) here (b) click here (c) Read the fruit facts (d) link
24. 24.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      margin: 10px;
      color: red;
    }
25. 25.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 140px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 50px wide (no margins).
26. 26.Which of these is a strong password? (a) 111111 (b) 123456 (c) Mango#Kite29! (d) qwerty
27. 27.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 32px;
      }
    }
28. 28.🔠 Which heading shows the SMALLEST text: <h1>, <h2>, <h6> or <h3>? (a) <h2> (b) <h1> (c) <h6> (d) <h3>
29. 29.🌈 In #f80000 the red part is the hex number f8. What is it as a normal number?
30. 30.⚖️ What colour is the text of this element?
    <h1 class="red" id="logo">Hi</h1>
    CSS:
    h1 { color: black; }
    .red { color: blue; }
    #logo { color: yellow; } (a) yellow (b) purple (c) blue (d) black
31. 31.🌈 Which colour is rgb(0, 255, 0)? (a) white (b) red (c) bright green (d) black
32. 32.🔁 How many numbers does this code print?
    for (let i = 0; i < 9; i = i + 2) {
      console.log(i);
    }
33. 33.What does text-align do? (a) makes letters bigger (b) colours behind the text (c) centres a heading (d) sets the letter colour
34. 34.🏷️ Is <p> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
35. 35.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 290px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 60px wide (no margins).
36. 36.💬 How many paragraphs show on the page?
    <p>I love mangoes.</p>
    <!-- <p>Hello, world!</p> -->
    <!-- <p>Good morning!</p> -->
    <!-- <p>Cricket is fun.</p> -->
37. 37.🎯 Which CSS selector matches this element?
    <li class="big" id="hero">Hello</li> (a) .red (b) #big (c) #top (d) #hero
38. 38.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 200px;
      padding: 5px;
      border: 1px solid black;
      margin: 20px;
    }
39. 39.🔁 What does i++ do? (a) prints i (b) adds 1 to i (c) doubles i (d) takes 1 from i
40. 40.Which of these is true of a web server? (a) answers page requests (b) is where we type code (c) shows pages from the web (d) colours code to help us

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