← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 886 · 40 questions
TalentJR

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.

NameDateTime takenScore ___ / 40
  1. 1.🔗 Which address opens when you click this link?
    <a href="art.html">About us</a>
    (a) news.html (b) quiz.html (c) About us (d) art.html
  2. 2.🔗 Which words do you click on?
    <a href="maths.html">Contact us</a>
    (a) Contact us (b) maths.html (c) Visit the site (d) href
  3. 3.⚡ What number does this code print?
    let a = 11;
    let b = 2;
    console.log(a * b);
  4. 4.🔍 Which is the odd one out? (a) turns HTML into a page (b) colours code to help us (c) has an address bar (d) shows pages from the web
  5. 5.🧭 Is <div> semantic or not semantic? (a) semantic (b) not semantic
  6. 6.🚀 Which file should this code go in: p { color: red; } (a) index.html (b) style.css (c) script.js
  7. 7.Which of these is an opening tag? (a) </body> (b) </title> (c) <title> (d) </b>
  8. 8.🔡 Are HTML tag names usually written in small letters? (a) No (b) Yes
  9. 9.True or false: HTTPS asks for a web page. (a) True (b) False
  10. 10.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) center (c) flex-start (d) flex-end
  11. 11.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    }
    (a) No (b) Yes
  12. 12.💬 How does an HTML comment start? (a) # (b) /* (c) <!-- (d) //
  13. 13.🌈 Which colour is rgb(0, 255, 0)? (a) bright green (b) black (c) cyan (d) magenta
  14. 14.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 120px;
      padding: 5px;
      border: 2px solid black;
      margin: 0px;
    }
  15. 15.🔍 Which line is missing its closing tag?
    line 1: <h3>I love mangoes.
    line 2: <i>Cricket is fun.</i>
    line 3: <h2>Hello, world!</h2>
    (a) line 1 (b) line 3 (c) line 2
  16. 16.🎯 Which element does the selector #main style? (a) <h1 id="main"> (b) <h2 class="red"> (c) <h1 class="main"> (d) <h1 id="logo">
  17. 17.True or false: “add alt text to images” makes the page harder to use. (a) True (b) False
  18. 18.True or false: HTML on its own cannot run a game loop. (a) False (b) True
  19. 19.📄 Where does <title> go: in the head or in the body? (a) in the head (b) in the body
  20. 20.🌍 Which one asks for a web page? (a) the browser (b) HTTPS (c) the server (d) the URL
  21. 21.True or false: <input type="radio"> is for one line of words. (a) True (b) False
  22. 22.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 160px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 40px wide (no margins).
  23. 23.🌍 What is the domain name in this URL?
    http://www.example.net/news/today.html
    (a) /news/today.html (b) http (c) learn.example.com (d) www.example.net
  24. 24.Which of these is an empty tag? (a) <h1> (b) <title> (c) <b> (d) <meta>
  25. 25.🔁 What does this code print?
    let temp = 3;
    if (temp < 24) {
      console.log("Hot");
    } else {
      console.log("Cool");
    }
    (a) Cool (b) Hot
  26. 26.🧭 How many <main> parts should a page have? (a) three (b) none (c) ten (d) one
  27. 27.♿ Which link text is clearest? (a) link (b) click here (c) here (d) Read the fruit facts
  28. 28.True or false: <input type="number"> sends the form. (a) False (b) True
  29. 29.📄 What is the first line of an HTML5 page? (a) <head> (b) <body> (c) <!DOCTYPE html> (d) <html>
  30. 30.🌐 Which one stores a website’s files? (a) a code editor (b) a web browser (c) a web server
  31. 31.🖼️ Which tag puts a picture on a page? (a) <img> (b) <p> (c) <a> (d) <pic>
  32. 32.💬 How many paragraphs show on the page?
    <p>Hello, world!</p>
    <!-- <p>Cricket is fun.</p> -->
    <p>The red kite</p>
    <!-- <p>My best friend</p> -->
    <p>Fun facts</p>
  33. 33.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or narrower (d) 600px or wider
  34. 34.🔠 Which heading shows the BIGGEST text: <h6>, <h4>, <h1> or <h5>? (a) <h6> (b) <h5> (c) <h1> (d) <h4>
  35. 35.🔢 To build and share your first web page, what comes right after “add CSS styles”? (a) plan what to show (b) test in a browser (c) publish it online (d) write the HTML
  36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      text-align: center;
    }
  37. 37.📝 How many paragraphs does this code make?
    <p>I love mangoes.</p>
    <p>My best friend</p>
    <p>I love mangoes.</p>
  38. 38.True or false: to share your OTP is safe. (a) False (b) True
  39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
  40. 40.Which of these does CSS do? (a) puts a picture on a page (b) reacts to a button click (c) gives the page structure (d) rounds box corners

Answer key

  1. art.html
  2. Contact us
  3. 22
  4. colours code to help us
  5. not semantic
  6. style.css
  7. <title>
  8. Yes
  9. False
  10. center
  11. No
  12. <!--
  13. bright green
  14. 134
  15. line 1
  16. <h1 id="main">
  17. False
  18. True
  19. in the head
  20. the browser
  21. False
  22. 80
  23. www.example.net
  24. <meta>
  25. Hot
  26. one
  27. Read the fruit facts
  28. False
  29. <!DOCTYPE html>
  30. a web server
  31. <img>
  32. 3
  33. 600px or narrower
  34. <h1>
  35. test in a browser
  36. 1
  37. 3
  38. False
  39. 60
  40. rounds box corners

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