Continue Course

Nice Work!

You have completed Advanced Web Development Quiz

Are you enjoying this course?

| |

Advanced Web Development Quiz

Challenge your knowledge with a quiz on the advanced parts of web development! You’ll answer 30 questions spanning a wide range of front-end development concepts, from JavaScript and CSS to delving into the more complex areas of performance optimization, web security, and HTTP protocols. After each question, Lydia will explain the answer and dive deeper into the topic to give you a more extensive understanding.

Course Progress

Lessons Completed

0

Lessons Remaining

0

Time Remaining

0 hr 0 min

0% completed

0% remaining

Course Detail

Published: May 30, 2023

Learning Paths

JavaScript PerformanceExpert

Topics

javascript performance asynchronous security quiz

Lydia Hallie

Lydia Hallie

Lydia Hallie is on the Claude Code team at Anthropic, where she focuses on developer experience and technical education. Previously, she was Head of Developer Experience at Bun and DX engineer at Vercel.

More by Lydia Hallie

Test Your JavaScript Knowledge

Test Your JavaScript Knowledge

A Tour of JavaScript & React Patterns

A Tour of JavaScript & React Patterns

"},{id:"a2",value:"fetch("https://api.website.com/data")"},{id:"a3",value:"@font-face { url("fonts/my-font.woff2) }"},{id:"a4",value:"

"},{id:"a5",value:""},{id:"a6",value:""},{id:"a7",value:""},{id:"a8",value:"

"}],codeblocks:[{code:["default-src "none"; script-src "self"; img-src "self" example.com;"," style-src fonts.googleapis.com; font-src fonts.gstatic.com;"],language:"text"}],prompt:"Which resources will be allowed with the following CSP header?",type:"multi"},seconds:30}],"q16-refer-policies":[{correct:["a2","a4"],id:"16",question:{answers:[{id:"a1",value:"`rel=noopener` is used to prevent the original page from accessing the window object of the newly opened page."},{id:"a2",value:"`rel=noreferrer` can be used to prevent the newly opened page from accessing the window object of the original page."},{id:"a3",value:"`rel=noopener` and `rel=noreferrer` can only be used with HTTPS."},{id:"a4",value:"`rel=noopener` can be used to prevent tabnabbing."},{id:"a5",value:"The default value for the `Referrer-Policy` is `no-referrer-when-downgrade`."}],prompt:"Which statements are true?",type:"multi"},seconds:28}],"q17-generators":[{correct:"a3",id:"17",question:{answers:[{id:"a1",value:"`it.next()`"},{id:"a2",value:"`it.next("My input!"), it.next()`"},{id:"a3",value:"`it.next(), it.next("My input!")`"},{id:"a4",value:"`it.next(), it.next()`"}],codeblocks:[{code:["function* generatorFunction() {"," const result = yield "My input!";"," console.log("In log:", result);"," return "All done!";","}","const it = generatorFunction();"],language:"javascript"}],prompt:"When does `In log: My input!` get logged?",type:"single"},seconds:13}],"q18-promise-methods":[{correct:[["a1","b2"],["a2","b1","b4"],["a3","b1","b4"],["a4","b3"]],id:"18",question:{answers:[{id:"a1",value:"all"},{id:"a2",value:"race"},{id:"a3",value:"any"},{id:"a4",value:"allSettled"}],codeblocks:[{code:["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[METHOD](promises)"," .then(res => console.log("Result:", res))"," .catch(e => console.log("Error:", e))"],language:"javascript"}],matching:[{id:"b1",value:"Result: 2"},{id:"b2",value:"Error: 3"},{id:"b3",value:"Result: [{...}, {...}, {...}, {...}]"},{id:"b4",value:"Result: 2"}],prompt:"Connect the Promise methods to the right output",type:"match"},seconds:32}],"q19-back-forward-cache":[{correct:["a1"],id:"19",question:{answers:[{id:"a1",value:"unload"},{id:"a2",value:"pagehide"},{id:"a3",value:"onbeforeunload"},{id:"a4",value:"pageshow"},{id:"a5",value:"all of the above"},{id:"a6",value:"none of the above"}],prompt:"Which of the following values will always make your page ineligible for bfcache?",type:"multi"},seconds:16}],"q2-rendering-pipeline-compositing":[{correct:["a4"],id:"2",question:{answers:[{id:"a1",value:"The render tree contains all elements from the DOM and CSSOM combined"},{id:"a2",value:"Compositing is the process of separating layers based on elements z-index, which are then combined to form the final image displayed on the screen"},{id:"a3",value:"The layout process assigns colors and images to the visual elements in the render tree"},{id:"a4",value:"The compositing process happens on the compositor thread"},{id:"a5",value:"Elements that aren't visible on the page, for example display: none, aren't part of the DOM tree"}],prompt:"Which statements are true?",type:"multi"},seconds:37}],"q20-front-end-security":[{correct:[["a1","b1"],["a2","b3"],["a3","b2"],["a4","b4"]],id:"20",question:{answers:[{id:"a1",value:"XSS"},{id:"a2",value:"CSRF"},{id:"a3",value:"UI Redressing"},{id:"a4",value:"MITM"}],matching:[{id:"b1",value:"allows attackers to inject malicious scripts into web pages viewed by others"},{id:"b2",value:"tricks users into interacting with disguised or hidden elements"},{id:"b3",value:"tricks users into executing unwanted actions by exploiting their authenticated session"},{id:"b4",value:"allows attackers to intercept and modify communication between two parties without their knowledge"}],prompt:"Connect the terms with their definitions",type:"match"},seconds:27}],"q21-font-strategies":[{correct:[["a1","b1"],["a2","b5"],["a3","b2"],["a4","b3"],["a5","b4"]],id:"21",question:{answers:[{id:"a1",value:"font-display: block"},{id:"a2",value:"font-display: swap"},{id:"a3",value:"font-display: fallback"},{id:"a4",value:"font-display: optional"},{id:"a5",value:"font-display: auto"}],matching:[{id:"b1",value:"temporarily renders an invisible font until the custom font has been downloaded"},{id:"b2",value:"use a fallback font while the custom font is downloading, switch to the custom font when available"},{id:"b3",value:"only use the custom font if it's available, and use a fallback font if the custom font is not available"},{id:"b4",value:"allows the browser to determine the most appropriate behavior for font loading"},{id:"b5",value:"use the custom font if it's available, use a fallback font if the custom font is not available"}],prompt:"Connect the font strategies to their definition",type:"match"},seconds:33}],"q22-cookie-policy-header":[{correct:["a3","a4"],id:"22",question:{answers:[{id:"a1",value:"This cookie is accessible from www.website.com, but not from blog.website.com"},{id:"a2",value:"This cookie can only be set client-side on the website.com domain"},{id:"a3",value:"This cookie gets treated like a session cookie"},{id:"a4",value:"This cookie will be sent when navigating from another website to www.website.com"}],codeblocks:[{code:["Set-Cookie: my-cookie="value"; Domain="website.com"; Secure; HttpOnly;"],language:"text"}],prompt:"What statements are true about the following cookie header?",type:"multi"},seconds:25}],"q23-css-pseudo-selector":[{correct:["a1","a3"],id:"23",question:{answers:[{id:"a1",value:"`ul:first-child > li`"},{id:"a2",value:"`ul:first-child + li`"},{id:"a3",value:"`ul:first-child > li:first-child`"},{id:"a4",value:"`ul:first-of-type > li:first-of-type`"},{id:"a5",value:"`ul:first-child + li:first-child`"}],codeblocks:[{code:["

","

One

Two
Three

","

Four

","

"],language:"html"}],prompt:"Which of the CSS (pseudo) selectors can we use to only target the first list item

One

?",type:"multi"},seconds:27}],"q24-transport-security":[{correct:["a1","a3"],id:"24",question:{answers:[{id:"a1",value:"The header enforces HTTPS for one year on the domain and its subdomains"},{id:"a2",value:"When max-age expires, browsers will default to HTTP"},{id:"a3",value:"The max-age is refreshed every time the browser reads the header"},{id:"a4",value:"Insecure requests to subdomains are allowed"}],codeblocks:[{code:["Strict-Transport-Security: max-age=31536000; includeSubdomains;"],language:"text"}],prompt:"What is true about the following header?",type:"multi"},seconds:23}],"q25-render-layers":[{correct:["a2","a3","a4","a5"],id:"25",question:{answers:[{id:"a1",value:"z-index: 1"},{id:"a2",value:"translate3d: (0, 0, 0)"},{id:"a3",value:"will-change: transform"},{id:"a4",value:"transform: rotate(45deg)"},{id:"a5",value:"position: fixed"},{id:"a6",value:"position: absolute"}],prompt:"Which of the following properties causes the element to be promoted to its own RenderLayer?",type:"multi"},seconds:16}],"q26-image-formats":[{correct:[["a1","b4"],["a2","b3"],["a3","b2"],["a4","b1"]],id:"26",question:{answers:[{id:"a1",value:"JPEG"},{id:"a2",value:"PNG"},{id:"a3",value:"WebP"},{id:"a4",value:"AVIF"}],matching:[{id:"b1",value:"Both lossy and lossless compression, supports HDR and WCG, supports transparency"},{id:"b2",value:"Both lossy and lossless compression, supports transparency, supports progressive rendering"},{id:"b3",value:"Lossless compression, high quality, supports transparency, larger file size"},{id:"b4",value:"Lossy compression, supports progressive rendering"}],prompt:"Match the image formats to the correct descriptions",type:"match"},seconds:35}],"q27-cors-headers":[{correct:"a2",id:"27",question:{answers:[{id:"a1",value:"A preflight request is required"},{id:"a2",value:"Only requests from https://www.website.com are allowed"},{id:"a3",value:"Requests with cookies are allowed"},{id:"a4",value:"The actual response is cached for 600ms"},{id:"a5",value:"X-Custom-Header will be the only included response header"},{id:"a6",value:"GET, POST, PATCH and PUT methods are allowed, but not DELETE"}],codeblocks:[{code:["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"],language:"text"}],prompt:"What is true about the following CORS config?",type:"single"},seconds:24}],"q28-event-loop":[{correct:"a3",id:"28",question:{answers:[{id:"a1",value:"1 2 3 4"},{id:"a2",value:"2 4 3 1"},{id:"a3",value:"2 3 4 1"},{id:"a4",value:"2 3 1 4"}],codeblocks:[{code:["setTimeout(() => console.log(1))","","(async () => {"," console.log(2)"," await Promise.resolve()"," console.log(3)","})()","Promise.resolve()"," .then(() => Promise.resolve().then(() => console.log(4)))"],language:"javascript"}],prompt:"What gets logged?",type:"single"},seconds:10}],"q29-http-1-2-3":[{correct:["a1","a2","a3","a4"],id:"29",question:{answers:[{id:"a1",value:"HTTP/2 allows multiple requests and responses concurrently over a single TCP connection"},{id:"a2",value:"HTTP/3 can only be used with HTTPS"},{id:"a3",value:"HTTP/2 is backward compatible with HTTP/1.1"},{id:"a4",value:"HTTP/1.1 requires multiple TCP connections to process multiple requests simultaneously"}],prompt:"What statements are correct?",type:"multi"},seconds:22}],"q3-resolving-domain-requests":[{correct:[["a1","b1"],["a2","b2"],["a3","b4"],["a4","b5"],["a5","b3"]],id:"3",question:{answers:[{id:"a1",value:"[A]"},{id:"a2",value:"[B]"},{id:"a3",value:"[C]"},{id:"a4",value:"[D]"},{id:"a5",value:"[E]"}],codeblocks:[{code:["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]"],language:"text"}],matching:[{id:"b1",value:"Recursive DNS Resolver"},{id:"b2",value:"Root Name Server"},{id:"b3",value:"IP Address"},{id:"b4",value:"Top Level Domain Name Server"},{id:"b5",value:"Authoritative Name Server"}],prompt:"Fill in the correct terms",type:"match"},seconds:19}],"q30-invoking-object-methods-scope":[{correct:"a2",id:"30",question:{answers:[{id:"a1",value:"A B B"},{id:"a2",value:"B A A"},{id:"a3",value:"A A A"},{id:"a4",value:"A undefined B"},{id:"a5",value:"B undefined B"}],codeblocks:[{code:["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();"],language:"javascript"}],prompt:"What gets logged?",type:"single"},seconds:14}],"q4-call-stack-event-loop":[{correct:"a4",id:"4",question:{answers:[{id:"a1",value:"1 2 3 4 5"},{id:"a2",value:"1 5 2 4 3"},{id:"a3",value:"3 2 4 1 5"},{id:"a4",value:"4 2 1 5 3"},{id:"a5",value:"2 4 3 1 5"}],codeblocks:[{code:["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));"],language:"javascript"}],prompt:"What gets logged?",type:"single"},seconds:26}],"q5-resource-hints":[{correct:[["a1","b2"],["a2","b3"],["a3","b4"],["a4","b1"]],id:"5",question:{answers:[{id:"a1",value:"dns-prefetch"},{id:"a2",value:"preconnect"},{id:"a3",value:"prefetch"},{id:"a4",value:"preload"}],matching:[{id:"b1",value:"prioritizes fetching of critical resources needed for the current navigation"},{id:"b2",value:"perform domain name resolution in the background"},{id:"b3",value:"proactively performs DNS resolution and TCP/TLS handshake"},{id:"b4",value:"downloads resources that are likely to be needed in the future"}],prompt:"Match the resource hints with their definitions",type:"match"},seconds:26}],"q6-object-reference-destructuring":[{correct:"a2",id:"6",question:{answers:[{id:"a1",value:"{ name: "Jane", address: { street: "101 Main St" } }"},{id:"a2",value:"{ name: "Jane", address: { street: "102 Main St" } }"},{id:"a3",value:"{ name: "Sarah", address: { street: "101 Main St" } }"},{id:"a4",value:"{ name: "Sarah", address: { street: "102 Main St" } }"}],codeblocks:[{code:["const member = {"," name: "Jane","," address: { street: "101 Main St" }","};","const member2 = { ...member };","","member.address.street = "102 Main St"","member.name = "Sarah"","console.log(member2);"],language:"javascript"}],prompt:"What's the output?",type:"single"},seconds:16}],"q7-performancenavigationtiming":[{correct:["a4","a5","a6","a3","a2","a1"],id:"7",question:{answers:[{id:"a1",value:"loadEventStart"},{id:"a2",value:"domComplete"},{id:"a3",value:"domContentLoadedEventStart"},{id:"a4",value:"fetchStart"},{id:"a5",value:"connectEnd"},{id:"a6",value:"domInteractive"}],prompt:"Put the `PerformanceNavigationTiming`s in the right order",type:"sort"},seconds:12}],"q8-cache-directives":[{correct:[["a1","b4"],["a2","b1"],["a3","b3"],["a4","b5"],["a5","b2"]],id:"8",question:{answers:[{id:"a1",value:"no-cache"},{id:"a2",value:"must-revalidate"},{id:"a3",value:"no-store"},{id:"a4",value:"private"},{id:"a5",value:"stale-while-revalidate"}],matching:[{id:"b1",value:"validates a stale response with the origin server before using it"},{id:"b2",value:"serves stale content while validating the cached response with the origin server"},{id:"b3",value:"doesn't cache any part of the request or response"},{id:"b4",value:"validates a cached response with the origin server before using it, even if it's still fresh"},{id:"b5",value:"prevents caching on shared caches"}],prompt:"Match the caching directives to their definitions",type:"match"},seconds:35}],"q9-garbage-collection":[{correct:"a4",id:"9",question:{answers:[{id:"a1",value:"`obj1` and `obj2` objects will not be garbage collected, leading to a memory leak."},{id:"a2",value:"`obj1` and `obj2` objects will be garbage collected immediately after setting them to `null`."},{id:"a3",value:"`obj1` and `obj2` will only be garbage collected after closing the brower tab."},{id:"a4",value:"`obj1` and `obj2` objects can be garbage collected during the next garbage collection cycle."}],codeblocks:[{code:["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;"],language:"javascript"}],prompt:"What's true about this code block?",type:"single"},seconds:23}]}