Skip to content
/ advanced-web-dev-quiz Public

🔥 Repo related to my FrontendMasters course. An Advanced Web Dev Quiz that covers a wide range of the things web devs get to deal with on a daily basis.

frontendmasters.com/courses/web-dev-quiz/
350 stars 61 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

lydiahallie/advanced-web-dev-quiz

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
README.md
README.md
 
 

Repository files navigation

Advanced Web Dev Quiz

This repo is related to my FrontendMasters course.
You'll find the questions and additional resources to get a better understanding of the concepts.

This Advanced Web Dev Quiz covers a wide range of the things web devs get to deal with on a daily basis. The goal is to (re)introduce you to certain concepts that you may have forgotten over the years or simply don't get exposed to that often 🙂

Have fun, and hopefully you'll learn something new today! Good luck! 💪

⚠️ This repo does not contain the answers(!), only the questions and useful resources on the question's topic!
To see the answers and watch visualized explanations for each question, please watch the FrontendMasters course! 🙏

Overview

All Questions

1. Put the scripts in the right order of execution

  • A. <script defer src="defer1.js" /> (loads in 300ms)
  • B. <script defer src="defer2.js" /> (loads in 200ms)
  • C. <script async src="async1.js" /> (loads in 300ms)
  • D. <script async src="async2.js" /> (loads in 50ms)
  • E. <script async defer src="asyncdefer1.js" /> (loads in 60ms)
💡 Resources

Answer:

Further reading:

2. Which statements are true?

  • A. The render tree contains all elements from the DOM and CSSOM combined
  • B. Compositing is the process of separating layers based on z-index, which are then combined to form the final image displayed on the screen
  • C. The layout process assigns colors and images to the visual elements in the render tree
  • D. The composting process happens on the compositor thread
  • E. Elements that aren't visible on the page, for example display: hidden, aren't part of the DOM tree
💡 Resources

Answer:

Further reading:

3. Fill in the gaps

- Browser sends request to [A]
- [A] queries [B]
- [B] responds with [C] IP address
- [A] queries [C]
- [C] responds with [D] IP address
- [A] queries [D]
- [D] responds with website's [E]
  1. Recursive DNS Resolver
  2. Root Name Server
  3. IP Address
  4. Top Level Domain Name Server
  5. Autoritative Name Server
💡 Resources

Answer:

Further reading:

4. What gets logged?

setTimeout(() => console.log(1));
Promise.resolve().then(() => console.log(2));
Promise.resolve().then(() => setTimeout(() => console.log(3));
new Promise(() => console.log(4));
setTimeout(() => console.log(5));
  • A. 1 2 3 4 5
  • B. 1 5 2 4 3
  • C. 3 2 4 1 5
  • D. 4 2 1 5 3
  • E. 2 4 3 1 5
💡 Resources

Answer:

Further reading:

5. Match the resource hints with their definitions

  • A. dns-prefetch
  • B. preconnect
  • C. prefetch
  • D. preload
  1. prioritizes fetching of critical resources needed for the current navigation
  2. performs domain name resolution in the background
  3. proactively performs DNS resolution and TCP/TLS handshake
  4. requests non-critical resources in the background
💡 Resources

Answer:

Further reading:

6. What's the output?

const member = { 
  name: "Jane", 
  address: { street: "101 Main St" }
};
const member2 = { ...member };
member.address.street = "102 Main St";
member.name = "Sarah";

console.log(member2);
  • A. { name: "Jane", address: { street: "101 Main St" }}
  • B. { name: "Jane", address: { street: "102 Main St" }}
  • C. { name: "Sarah", address: { street: "101 Main St" }}
  • D. { name: "Sarah", address: { street: "102 Main St" }}
💡 Resources

Answer:

Further reading:

7. Put the PerformanceNavigationTimings in the right order

  • A. loadEventStart
  • B. domComplete
  • C. domContentLoadedEventStart
  • D. fetchStart
  • E. connectEnd
  • F. domInteractive
💡 Resources

Answer:

Further reading:

8. Match the caching directives to their definitions

  • A. no-cache
  • B. must-revalidate
  • C. no-store
  • D. private
  • E. stale-while-revalidate
  1. validates a stale response with the origin server before using it
  2. serves stale content while validating the cached response with the origin server
  3. doesn't cache any part of the request or response
  4. validates a cached response with the origin server before using it, even if it is still fresh
  5. prevents caching on shared caches
💡 Resources

Answer:

Further reading:

9. What statements are true about this code block?

function addMember(name) {
  return { name, createdAt: Date.now() }
}

let obj1 = addMember("John");
let obj2 = addMember("Sarah");

obj1.friend = obj2;
obj2.friend = obj1;

obj1 = null;
obj2 = null;
  • A. obj1 and obj2 cannot be garbage collected, leading to a memory leak
  • B. obj1 and obj2 will be garbage collected immediately after setting them to null
  • C. obj1 and obj2 will only be garbage collected after closing the browser tab
  • D. obj1 and obj2 can be garbage collected during the next garbage collection cycle
💡 Resources

Answer:

Further reading:

10. When animating the following properties, which have the correctly listed rendering costs?

  • A. width: Layout, Paint, Composite
  • B. opacity: Paint, Composite
  • C. background-image: Composite
  • D. left: Layout, Paint, Composite
  • E. transform: Paint, Composite
💡 Resources

Answer:

Further reading:

11. What gets logged when clicking button?

<div class="outer">
  <div class="inner">
    <button>Click me!</button>
  </div>
</div>
outer.addEventListener("click", () => log("A"), true);
outer.addEventListener("click", () => log("B"));
inner.addEventListener("click", () => log("C"), true);
inner.addEventListener("click", (e) => {
   log("D");
   e.stopPropagation();
   log("E");
});
button.addEventListener("click", () => log("F"));
button.addEventListener("click", () => log("G"), true);
  • A. A B C D E F G
  • B. A C G F D
  • C. B D E F G C A
  • D. A C G F
  • E. A C G F D E
💡 Resources

Answer:

Further reading:

12. Order the CSS selectors by ascending specificity

  • A. div h1.large-text::before
  • B. div h1:first-child
  • C. h1:not(.small-text)
  • D. .large-text:nth-child(1)
  • E. h1.large-text[id="title"]
  • F. h1.large-text#title
💡 Resources

Answer:

Further reading:

13. What statements are true?

const userTokenMap = new WeakMap();

let user = { 
  name: "Jane Doe", 
  age: 24 
};

userTokenMap.set(user, "secret_token");
  • A. userTokenMap implements the iterator protocol
  • B. When setting user to null, userTokenMap returns 0
  • C. If the user object is set to null, its userTokenMap  entry can be be garbage collected.
  • D. [...userTokenMap] returns an array of userTokenMap entries
💡 Resources

Answer:

Further reading:

14. Match the Web Vitals to the correct descriptions

  • A. TTFB
  • B. FID
  • C. TTI
  • D. TBT
  • E. CLS
  • F. INP
  1. the time it takes for a webpage to respond to a user's first interaction.
  2. the time that the main thread is blocked from responding to user input.
  3. the average time it takes for a webpage to update its visuals after a user interacts with it. 
  4. the time it takes for the server to respond to a request and start sending data back to the client
  5. the time it takes for a webpage to be fully loaded and responsive to user input.
  6. the stability of a webpage's layout, or the unexpected layout shifts that occur on a webpage as it loads.
💡 Resources

Answer:

Further reading:

15. Which resources will be allowed with the following CSP header?

default-src "none"; script-src "self"; img-src "self" example.com; style-src fonts.googleapis.com; font-src fonts.gstatic.com;
  • A. <script src="/js/app.js"></script>
  • B. fetch("https://api.website.com/data")
  • C. @font-face { url("fonts/my-font.woff") }
  • D. <img src="data:image/svg+xml;..." />
  • E. <style>body { font-family: 'Roboto' }</style>
  • F. <iframe src="https://embed.example.com"></iframe>
  • G. <link rel="stylesheet" href="https://fonts.googleapis.com..>
  • H. <video src="https://videos.example.com/..."></video>
💡 Resources

Answer:

Further reading:

16. Which statements are true?

  • A. rel="noopener" is used to prevent the original page from accessing the window object of the newly opened page
  • B. rel="noreferrer" can be used to prevent the newly opened page from accessing the window object of the original page
  • C. rel="noopener" and rel="noreferrer" can only be used with HTTPS
  • D. rel="noopener" can be used to prevent tabnabbing
  • E. The default Referrer-Policy is no-referrer-when-downgrade
💡 Resources

Answer:

Further reading:

17. When does "In log: My input!" get logged?

function* generatorFunc() {
  const result = yield "My input!";
  console.log("In log:", result);
  return "All done!"
};

const it = generatorFunc();
  • A. it.next()
  • B. it.next("My input!") it.next()
  • C. it.next() it.next("My input!")
  • D. it.next() it.next()
💡 Resources

Answer:

Further reading:

18. Connect the Promise methods to the right output

const promises = [
   new Promise(res => setTimeout(() => res(1), 200),
   new Promise(res => setTimeout(() => res(2), 100),
   new Promise((_, rej) => setTimeout(() => rej(3), 100),
   new Promise(res => setTimeout(() => res(4), 300)
];

Promise[❓]
   .then(res => console.log("Result: ", res))
   .catch(err => console.log("Error: ", err)
  • A. all
  • B. any
  • C. race
  • D. allSettled
  1. Result: 2
  2. Error: 3
  3. Result: [{}, {}, {}, {}]
  4. Result: 2
💡 Resources

Answer:

Further reading:

19. Which of the following values will always make your page ineligible for bfcache?

  • A. unload
  • B. pagehide
  • C. onbeforeunload
  • D. pageshow
  • E. All of the above
  • F. None of the above
💡 Resources

Answer:

Further reading:

20. Connect the terms with their definitions

  • A. XSS
  • B. CSRF
  • C. UI Redressing
  • D. MITM
  1. allows attackers to inject malicious scripts into web pages viewed by others
  2. tricks users into interacting with disguised or hidden elements
  3. tricks users into executing unwanted actions by exploiting their authenticated session
  4. allows attackers to intercept and modify communication between two parties without their knowledge
💡 Resources

Answer:

Further reading:

21. Connect the font strategies to their definition

  • A. font-display: block
  • B. font-display: swap
  • C. font-display: fallback
  • D. font-display: optional
  • E. font-display: auto
  1. temporarily render an invisible font until the custom font has been downloaded
  2. use a fallback font while the custom font is downloading, switch to the custom font when available
  3. only use the custom font if it is available, otherwise use a fallback font
  4. allows the browser to determine the most appropriate behavior for font loading
  5. use the custom font if it is available, use a fallback font if the custom font is not available
💡 Resources

Answer:

Further reading:

22. What statements are true about the following cookie header?

Set-Cookie: my-cookie="value"; Domain="website.com"; Secure; HttpOnly;
  • A. This cookie is accessible from www.website.com, but not from blog.website.com
  • B. This cookie can only be set client-side on the website.com domain
  • C. This cookie gets treated like a session cookie
  • D. This cookie will be sent when navigating from another website to www.website.com
💡 Resources

Answer:

Further reading:

23. Which of the CSS (pseudo)selectors can we use to only target the first list item <li>One</li>?

<div>
  <ul>
    <li>One</li>
    <ul>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </ul>
  <ul>
    <li>Four</li>
  </ul>
</div>
  • A. ul:first-child > li
  • B. ul:first-child + li
  • C. ul:first-child > li:first-child
  • D. ul:first-of-type > li:first-of-type
  • E. ul:first-child + li:first-child
💡 Resources

Answer:

Further reading:

24. What is true about the following header?

Strict-Transport-Security: max-age=31536000; includeSubdomains;
  • A. The header enforces HTTPS for one year on the domain and its subdomains
  • B. When max-age expires, browsers will default to HTTP
  • C. The max-age is refreshed every time the browser reads the header
  • D. Insecure requests to subdomains are allowed
💡 Resources

Answer:

Further reading:

25. Which of the following properties causes the element to be promoted to its own RenderLayer?

  • A. z-index: 1
  • B. translate3d: (0, 0, 0)
  • C. will-change: transform
  • D. transform: rotate(45deg)
  • E. position: fixed
  • F. position: absolute
💡 Resources

Answer:

Further reading:

26. Match the image formats to the descriptions

  • A. JPEG
  • B. PNG
  • C. WebP
  • D. AVIF
  1. Both lossy and lossless compression, supports HDR and WCG, supports transparency
  2. Both lossy and lossless compression, supports transparency, supports progressive rendering
  3. Lossless compression, high quality, supports transparency, larger file size
  4. Lossy compression, supports progressive rendering
💡 Resources

Answer:

Further reading:

27. What is true about the following CORS config?

Access-Control-Allow-Origin: https://www.website.com
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: *
Access-Control-Expose-Headers: X-Custom-Header
Access-Control-Max-Age: 600
  • A. A preflight request is required
  • B. Only requests from https://www.website.com are allowed
  • C. Requests with cookies are allowed
  • D. The actual response is cached for 600ms
  • E. X-Custom-Header will be the only included response header
  • F. GET, POST, PATCH and PUT methods are allowed, but not DELETE
💡 Resources

Answer:

Further reading:

28. What gets logged?

setTimeout(() => console.log(1));

(async () => {
  console.log(2);
  await Promise.resolve();
  console.log(3);
})()

Promise.resolve().then(() => Promise.resolve().then(() => console.log(4)))
  • A. 1 2 3 4
  • B. 2 4 3 1
  • C. 2 3 4 1
  • D. 2 3 1 4
💡 Resources

Answer:

Further reading:

29. What statements are correct?

  • A. HTTP/2 allows multiple requests and responses concurrently over a single TCP connection
  • B. HTTP/3 can only be used with HTTPS
  • C. HTTP/2 is backward compatible with HTTP/1.1
  • D. HTTP/1.1 requires multiple TCP connections to process multiple requests simultaneously
💡 Resources

Answer:

Further reading:

30. What gets logged?

const objA = { 
  type: "A",
  foo() { 
    console.log(this.type) 
  }
}

const objB = { 
  type: "B",
  foo: objA.foo,
  bar: () => objA.foo(),
  baz() { objA.foo() }
}

objB.foo();
objB.bar();
objB.baz();
  • A. A B B
  • B. B A A
  • C. A A A
  • D. A undefined A
  • E. B undefined B
💡 Resources

Answer:

Further reading:

About

🔥 Repo related to my FrontendMasters course. An Advanced Web Dev Quiz that covers a wide range of the things web devs get to deal with on a daily basis.

frontendmasters.com/courses/web-dev-quiz/

Topics

javascript css html security performance web rendering xss csrf

Resources

Readme
Activity

Stars

350 stars

Watchers

9 watching

Forks

61 forks
Report repository