Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 608 · 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.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 200px;
     padding: 5px;
     border: 3px solid black;
     margin: 10px;
   }
2. 2.What is <input type="date"> for? (a) lets you tick many (b) sends the form (c) is for one line of words (d) picks a day
3. 3.✍️ What is the selector in this CSS rule?
   p {
     text-align: center;
     color: red;
     padding: 8px;
   } (a) p (b) .note (c) text-align (d) red
4. 4.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 150px;
     padding: 20px;
     border: 5px solid black;
     margin: 10px;
   }
5. 5.🏷️ Is <body> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
6. 6.🔁 What does this code print?
   let temp = 50;
   if (temp > 13) {
     console.log("Hot");
   } else {
     console.log("Cool");
   } (a) Cool (b) Hot
7. 7.🌍 What is the domain name in this URL?
   http://kids.example.org/news/today.html (a) /news/today.html (b) kids.example.org (c) http (d) school.example.in
8. 8.⚡ What does JavaScript add to a web page? (a) only colours (b) the domain name (c) actions and changes (d) the page title
9. 9.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 300px;
     justify-content: flex-start;
   }
   Inside are 4 boxes, each 60px wide (no margins).
10. 10.True or false: <header> holds a news story. (a) False (b) True
11. 11.Which of these goes in the head? (a) <img> (b) <a> (c) <style> (d) <h1>
12. 12.Which of these is an opening tag? (a) </body> (b) </h1> (c) <body> (d) </title>
13. 13.🔗 Where does this link open?
    <a href="contact.html">School news</a> (a) in the same tab (b) in a new tab
14. 14.Which of these is true of <nav>? (a) sits at the very top (b) holds extra side notes (c) helps you move around (d) holds the logo and title
15. 15.💪 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).
16. 16.True or false: <input type="radio"> lets you pick only one. (a) False (b) True
17. 17.🎨 Which tag connects an outside CSS file? (a) <a> (b) <img> (c) <link> (d) <css>
18. 18.True or false: <th> makes a heading cell. (a) False (b) True
19. 19.🖼️ Which tag puts a picture on a page? (a) <pic> (b) <p> (c) <img> (d) <a>
20. 20.📋 How many items does this list show?
    <ul>
      <li>Litchi</li>
      <li>Banana</li>
      <li>Mango</li>
    </ul>
21. 21.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 230px;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
22. 22.🔢 To build and share your first web page, which comes first: “plan what to show” or “write the HTML”? (a) plan what to show (b) write the HTML
23. 23.⚡ What number does this code print?
    let books = 12;
    books = books + 14;
    books = books - 2;
    console.log(books);
24. 24.📄 Where does <h1> go: in the head or in the body? (a) in the body (b) in the head
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      text-align: center;
      font-style: italic;
      margin: 10px;
      width: 300px;
    }
26. 26.🔍 Which line is missing its closing tag?
    line 1: <small>My pets</small>
    line 2: <u>Fun facts</u>
    line 3: <strong>Rain today (a) line 2 (b) line 1 (c) line 3
27. 27.True or false: to tell a trusted adult is safe. (a) False (b) True
28. 28.🔍 Which is the odd one out? (a) turns HTML into a page (b) opens web pages for us (c) is where we type code (d) has an address bar
29. 29.✍️ What value is given to font-style in this rule?
    h2 {
      padding: 8px;
      font-size: 20px;
      font-style: italic;
    } (a) font-style (b) red (c) italic (d) 20px
30. 30.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <h2>Good morning!</h2>
    <h3>My pets</h3>
31. 31.Which colour pair is hard to read? (a) white on black (b) red on green (c) black on white (d) yellow on black
32. 32.Which of these is a strong password? (a) password (b) qwerty (c) iloveyou (d) Kite_Fl1es@Dawn
33. 33.True or false: CSS lays out the page. (a) False (b) True
34. 34.💬 How many paragraphs show on the page?
    <p>Cricket is fun.</p>
    <p>Our school trip</p>
    <!-- <p>Rain today</p> -->
    <!-- <p>My pets</p> -->
    <!-- <p>My best friend</p> -->
35. 35.📝 How many paragraphs does this code make?
    <p>The red kite</p>
    <h2>Good morning!</h2>
    <p>My pets</p>
36. 36.🧭 Is <div> semantic or not semantic? (a) not semantic (b) semantic
37. 37.📝 On how many lines does the browser show this paragraph?
    <p>Birds sing<br>Roses are red<br>Sky is blue</p>
38. 38.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is a game (b) the site is free (c) the site is fast (d) the data is scrambled
39. 39.True or false: li is an id selector. (a) False (b) True
40. 40.🔁 What does i++ do? (a) prints i (b) adds 1 to i (c) doubles i (d) takes 1 from i

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