← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 370 · 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 word runs code only when something is true? (a) log (b) if (c) let (d) for
  2. 2.🚀 Should file names have spaces, like my page.html? (a) No (b) Yes
  3. 3.🚀 Which file should this code go in: h1 { font-size: 32px; } (a) index.html (b) script.js (c) style.css
  4. 4.Which colour pair is hard to read? (a) white on black (b) black on white (c) light grey on white (d) white on dark blue
  5. 5.🔁 How many times does this code print “Welcome”?
    for (let i = 0; i < 2; i++) {
      console.log("Welcome");
    }
  6. 6.True or false: JavaScript shows a pop-up message. (a) False (b) True
  7. 7.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
  8. 8.🌗 Is white on black easy or hard to read? (a) easy to read (b) hard to read
  9. 9.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the br tag (c) the viewport meta tag (d) the hr tag
  10. 10.📦 In the box model, which part is the gap round content? (a) margin (b) border (c) content (d) padding
  11. 11.🔁 Which loop repeats code a set number of times? (a) else (b) let (c) if (d) for
  12. 12.💬 How many paragraphs show on the page?
    <p>Good morning!</p>
    <p>I love mangoes.</p>
    <p>The red kite</p>
    <!-- <p>Our school trip</p> -->
  13. 13.💬 How many paragraphs show on the page?
    <p>Our school trip</p>
    <p>The red kite</p>
    <!-- <p>My best friend</p> -->
  14. 14.🖼️ Which attribute of <img> shows if the image fails? (a) alt (b) height (c) width (d) src
  15. 15.⚖️ What colour is the text of this element?
    <h2 class="menu" id="intro">Hi</h2>
    CSS:
    .menu { color: white; }
    #intro { color: blue; }     (a) red (b) green (c) blue (d) white
  16. 16.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
  17. 17.🌈 In #008600 the green part is the hex number 86. What is it as a normal number?
  18. 18.🌈 Which colour of light is strongest in rgb(23, 38, 207)? (a) blue (b) green (c) red
  19. 19.What does text-align do? (a) makes the text bold (b) colours behind the text (c) centres a heading (d) picks the font style
  20. 20.🔁 What does this code print?
    let temp = 15;
    if (temp > 39) {
      console.log("Hot");
    } else {
      console.log("Cool");
    }     (a) Cool (b) Hot
  21. 21.📋 Which list tag shows 1, 2, 3 numbers? (a) <li> (b) <ol> (c) <ul>
  22. 22.🔗 Which words do you click on?
    <a href="news.html">Contact us</a>     (a) news.html (b) Contact us (c) href (d) Visit the site
  23. 23.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 140px;
      padding: 25px;
      border: 1px solid black;
      margin: 15px;
    }
  24. 24.⚖️ 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
  25. 25.🖌️ Which CSS property sets the letter colour? (a) text-align (b) color (c) font-size (d) font-weight
  26. 26.🌍 Which one asks for a web page? (a) the URL (b) the server (c) the browser (d) HTTPS
  27. 27.🔒 Is the connection to this address scrambled (encrypted)?
    http://www.example.com/games/chess.html     (a) Yes (b) No
  28. 28.Which of these is an opening tag? (a) <h1> (b) </title> (c) </h1> (d) </body>
  29. 29.True or false: padding is space inside the border. (a) True (b) False
  30. 30.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 170px;
      padding: 30px;
      border: 2px solid black;
      margin: 20px;
    }
  31. 31.🔗 Which attribute holds the address of a link? (a) href (b) id (c) src (d) alt
  32. 32.🧭 Which semantic tag holds a side box of tips? (a) <aside> (b) <article> (c) <header> (d) <main>
  33. 33.Which of these is true of a code editor? (a) stores a website’s files (b) turns HTML into a page (c) answers page requests (d) saves our .html files
  34. 34.💪 Which flexbox property turns on flexbox? (a) align-items (b) flex-direction (c) justify-content (d) display: flex
  35. 35.🖌️ Which CSS property makes the text bold? (a) color (b) font-weight (c) background-color (d) font-family
  36. 36.🛡️ Online: is it safe to tell a trusted adult? (a) not safe (b) safe
  37. 37.🚀 Which file should this code go in: score = score + 1; (a) style.css (b) index.html (c) script.js
  38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 4 boxes, each 50px wide (no margins).
  39. 39.🛡️ Is it safe to use the same password on every site? (a) Yes (b) No
  40. 40.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h2> → <h3>     (a) No (b) Yes

Answer key

  1. if
  2. No
  3. style.css
  4. light grey on white
  5. 2
  6. True
  7. an id selector
  8. easy to read
  9. the viewport meta tag
  10. padding
  11. for
  12. 3
  13. 2
  14. alt
  15. blue
  16. 8
  17. 134
  18. blue
  19. centres a heading
  20. Cool
  21. <ol>
  22. Contact us
  23. 222
  24. the later one
  25. color
  26. the browser
  27. No
  28. <h1>
  29. True
  30. 274
  31. href
  32. <aside>
  33. saves our .html files
  34. display: flex
  35. font-weight
  36. safe
  37. script.js
  38. 30
  39. No
  40. Yes

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