Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 940 · 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 flexbox property turns on flexbox? (a) display: flex (b) align-items (c) flex-direction (d) justify-content
2. 2.🖌️ How big is the text, in px?
   p {
     background-color: orange;
     font-size: 20px;
     color: white;
     text-align: center;
   }
3. 3.⚡ What does this code print? (Look at the quotes!)
   let x = "6";
   let y = 9;
   console.log(x + y); (a) 69 (b) Error (c) 15
4. 4.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 150px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 50px wide (no margins).
5. 5.Which colour pair is hard to read? (a) dark grey on white (b) pink on red (c) black on white (d) yellow on black
6. 6.✍️ What value is given to padding in this rule?
   h2 {
     font-weight: bold;
     width: 300px;
     border: 2px solid;
     padding: 8px;
   } (a) 2px solid (b) padding (c) bold (d) 8px
7. 7.🔍 Which is the odd one out? (a) sends pages over the net (b) is where we type code (c) hosts websites online (d) stores a website’s files
8. 8.🧭 Is <div> semantic or not semantic? (a) not semantic (b) semantic
9. 9.🔠 How many headings are in this code?
   <h1>Fun facts</h1>
   <h2>I love mangoes.</h2>
   <p>My pets</p>
   <p>The red kite</p>
10. 10.📝 What does a password box show instead of letters? (a) capital letters (b) emojis (c) numbers (d) dots
11. 11.🔁 Which word runs code only when something is true? (a) for (b) let (c) log (d) if
12. 12.🖼️ Which attribute of <img> tells which image to load? (a) width (b) height (c) src (d) alt
13. 13.🔗 Which code links to about.html? (a) <a src="about.html"> (b) <link about.html> (c) <a href="about.html"> (d) <a alt="about.html">
14. 14.🧭 How many <main> parts should a page have? (a) none (b) three (c) one (d) ten
15. 15.📝 Which tag gives a form box a name you can click? (a) <hr> (b) <label> (c) <title> (d) <h1>
16. 16.💬 Why do coders write comments? (a) to add colour (b) to leave notes (c) to make links (d) to show pictures
17. 17.🛡️ Online: is it safe to use a strong password? (a) safe (b) not safe
18. 18.🚀 Which file should this code go in: <h1>My Site</h1> (a) script.js (b) index.html (c) style.css
19. 19.True or false: <ul> is one item of a list. (a) True (b) False
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      width: 300px;
      font-size: 20px;
      margin: 10px;
      text-align: center;
    }
21. 21.📛 In <a href="x.html">, what is href? (a) a closing tag (b) a comment (c) an element name (d) an attribute
22. 22.📄 Can HTML on its own run a game loop? (a) No (b) Yes
23. 23.🔍 Which line is missing its closing tag?
    line 1: <h3>Hello, world!
    line 2: <h1>My pets</h1>
    line 3: <i>Good morning!</i> (a) line 3 (b) line 2 (c) line 1
24. 24.🎯 What kind of selector is p? (a) an id selector (b) an element selector (c) a class selector
25. 25.True or false: <header> holds the logo and title. (a) True (b) False
26. 26.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    }
27. 27.What does color do? (a) makes the text bold (b) makes letters bigger (c) colours behind the text (d) sets the letter colour
28. 28.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    } (a) Yes (b) No
29. 29.True or false: HTML on its own cannot make tables. (a) True (b) False
30. 30.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
31. 31.🏷️ Is </b> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
32. 32.✍️ Which sign goes between a property and its value? (a) - (b) = (c) : (d) ;
33. 33.📱 What does a media query check? (a) the battery level (b) the screen width (c) the time of day (d) the page title
34. 34.🖌️ How big is the text, in px?
    h1 {
      background-color: black;
      text-align: left;
      color: orange;
      font-size: 28px;
    }
35. 35.✍️ CSS declarations go inside which brackets? (a) { } (b) [ ] (c) < > (d) ( )
36. 36.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
37. 37.🎨 Which attribute adds CSS inside one tag? (a) src (b) href (c) alt (d) style
38. 38.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
39. 39.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) exactly 1000px (c) 600px or narrower (d) 600px or wider
40. 40.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 140px;
      padding: 20px;
      border: 4px solid black;
      margin: 5px;
    }

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