← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 600 · 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.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) green (c) red (d) blue
  2. 2.📝 Which input type picks a day? (a) text (b) radio (c) date (d) submit
  3. 3.🧭 Why use <nav> instead of <div> for a menu? (a) it makes text red (b) it adds pictures (c) it tells its meaning (d) it loads faster
  4. 4.📝 What does <p> make? (a) a paragraph (b) a picture (c) a link (d) a table
  5. 5.True or false: a web browser shows pages from the web. (a) True (b) False
  6. 6.💬 Which text will NOT show on the page?
    <!-- <p>Fun facts</p> -->
    <p>My pets</p>
    <p>Good morning!</p>     (a) Fun facts (b) Good morning! (c) My pets
  7. 7.📄 Can HTML on its own add up two numbers? (a) No (b) Yes
  8. 8.True or false: CSS makes a link. (a) False (b) True
  9. 9.🧭 Is <article> semantic or not semantic? (a) not semantic (b) semantic
  10. 10.Which of these is true of <article>? (a) helps you move around (b) holds extra side notes (c) holds one blog post (d) sits at the very top
  11. 11.⚡ Which tag holds JavaScript in a page? (a) <js> (b) <code> (c) <script> (d) <style>
  12. 12.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or narrower (c) exactly 100px (d) 800px or wider
  13. 13.✍️ Which property is set to 2px solid in this rule?
    .box {
      border: 2px solid;
      font-weight: bold;
    }     (a) font-style (b) width (c) border (d) 2px solid
  14. 14.⚖️ What colour is the text of this element?
    <h1 class="big" id="end">Hi</h1>
    CSS:
    #end { color: green; }
    h1 { color: blue; }     (a) green (b) yellow (c) blue (d) white
  15. 15.💬 How many paragraphs show on the page?
    <!-- <p>Rain today</p> -->
    <p>The red kite</p>
    <!-- <p>Our school trip</p> -->
  16. 16.⚡ What number does this code print?
    let books = 5;
    books = books + 13;
    books = books - 4;
    console.log(books);
  17. 17.🌍 Which one shows the page to you? (a) HTTPS (b) the browser (c) the URL (d) the server
  18. 18.⚖️ What colour is the text of this element?
    <h1 class="star" id="hero">Hi</h1>
    CSS:
    .star { color: white; }
    h1 { color: purple; }     (a) orange (b) white (c) purple (d) black
  19. 19.🎯 Can many elements share the same class? (a) No (b) Yes
  20. 20.🌍 Which one stores the site’s files? (a) HTTPS (b) the URL (c) the server (d) the browser
  21. 21.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      width: 300px;
    }
  22. 22.🔢 When you open a web page, which comes first: “you type the URL” or “DNS finds the server”? (a) DNS finds the server (b) you type the URL
  23. 23.🖼️ Which picture file does the browser load?
    <img src="cake.jpg" alt="Birthday cake" width="250">     (a) dog.jpg (b) Birthday cake (c) moon.png (d) cake.jpg
  24. 24.⚡ What does this code show?
    let name = "Zoya";
    console.log("Hi, " + name + "!");     (a) Zoya (b) name (c) Hi, Zoya! (d) Hi, name!
  25. 25.📋 Which tag goes around each item of a list? (a) <ul> (b) <p> (c) <ol> (d) <li>
  26. 26.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
  27. 27.🖌️ Which CSS property makes the text bold? (a) font-weight (b) color (c) background-color (d) font-family
  28. 28.📊 Are <th> cells shown bold and centred by default? (a) No (b) Yes
  29. 29.🔗 Which words do you click on?
    <a href="contact.html">Art corner</a>     (a) School news (b) Art corner (c) contact.html (d) href
  30. 30.True or false: the server asks for a web page. (a) True (b) False
  31. 31.🌐 Which one opens web pages for us? (a) a web server (b) a web browser (c) a code editor
  32. 32.✍️ CSS declarations go inside which brackets? (a) [ ] (b) ( ) (c) < > (d) { }
  33. 33.💬 How many paragraphs show on the page?
    <!-- <p>My best friend</p> -->
    <!-- <p>My pets</p> -->
    <p>Our school trip</p>
  34. 34.⚡ What does JavaScript add to a web page? (a) the domain name (b) the page title (c) only colours (d) actions and changes
  35. 35.📋 Which list tag lists things in any order? (a) <ul> (b) <ol> (c) <li>
  36. 36.🎯 Which CSS selector matches this element?
    <p class="star" id="top">Hello</p>     (a) .menu (b) .top (c) p (d) #intro
  37. 37.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <p>Our school trip</p>
    <p>Our school trip</p>
    <p>My pets</p>
    <p>Rain today</p>
  38. 38.🔁 What does this code print?
    let temp = 29;
    if (temp < 24) {
      console.log("Hot");
    } else {
      console.log("Cool");
    }     (a) Cool (b) Hot
  39. 39.🎯 Which CSS selector matches this element?
    <p class="box" id="end">Hello</p>     (a) #hero (b) #box (c) p (d) .end
  40. 40.🌗 Is white on black easy or hard to read? (a) hard to read (b) easy to read

Answer key

  1. red
  2. date
  3. it tells its meaning
  4. a paragraph
  5. True
  6. Fun facts
  7. No
  8. False
  9. semantic
  10. holds one blog post
  11. <script>
  12. 800px or wider
  13. border
  14. green
  15. 1
  16. 14
  17. the browser
  18. white
  19. Yes
  20. the server
  21. 1
  22. you type the URL
  23. cake.jpg
  24. Hi, Zoya!
  25. <li>
  26. 12
  27. font-weight
  28. Yes
  29. Art corner
  30. False
  31. a web browser
  32. { }
  33. 1
  34. actions and changes
  35. <ul>
  36. p
  37. 1
  38. Cool
  39. p
  40. easy to read

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