element should have id=\"main-content\"."],"companies":["Accenture","Boston Institute of Analytics","Codegene Technologies Private Limited","Tekwissen"],"starterCode":{"html":"","css":"","javascript":""},"solutionCode":{"html":"\n\n

Welcome

This is the main content of the page.

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\nnav a { margin-right: 12px; }\n.skip-link { position: absolute; left: -9999px; padding: 8px 16px; background: white; border-radius: 6px; }\n.skip-link:focus { left: 16px; top: 16px; }","javascript":""},"hints":["The skip link needs to come before the

, not after it.","It should point to a matching id, like href=\"#main-content\" pointing at id=\"main-content\"."],"tests":[{"id":"first-element","type":"selector-exists","selector":"body > a:first-child","message":"The skip link should be the first element on the page."},{"id":"text","type":"text-includes","selector":"body > a:first-child","expected":"Skip to main content","message":"Use the exact text \"Skip to main content\"."},{"id":"href","type":"attribute-equals","selector":"body > a:first-child","attribute":"href","expected":"#main-content","message":"Link to \"#main-content\"."},{"id":"target","type":"selector-exists","selector":"main#main-content","message":"Give

id=\"main-content\"."}],"tutorialSlug":"html","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a843bbfedb274756db17e6e","slug":"fix-the-box-that-wont-center","title":"Fix the box that won't center","summary":"text-align alone doesn't center a block box — find and fix the real centering bug.","description":"The .box is supposed to be centered inside .frame, both ways. Instead it only shifts inline content and sits at the top-left. Fix the centering.","language":"CSS","difficulty":"easy","mode":"bug-fix","estimatedMinutes":10,"tags":["flexbox","centering","debugging"],"skills":["Flexbox alignment","Common CSS mistakes"],"requirements":["Make .frame a real flex container.","Center content horizontally with justify-content.","Center content vertically with align-items."],"companies":["Appscrip","Hexon Global","Zedex Info Pvt Ltd","Accenture","Autovyn Consultancy","Codeflies Technologies Pvt. Ltd"],"starterCode":{"html":"

Centered

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.frame { height: 240px; border: 1px dashed #94a3b8; text-align: center; }\n.box { width: 120px; height: 60px; background: #007a96; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; }","javascript":""},"solutionCode":{"html":"

Centered

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.frame { height: 240px; border: 1px dashed #94a3b8; display: flex; align-items: center; justify-content: center; }\n.box { width: 120px; height: 60px; background: #007a96; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; }","javascript":""},"hints":["text-align only affects inline content — .box is a block-level div.","Replace text-align with a real flex container: display, align-items, and justify-content."],"tests":[{"id":"flex","type":"computed-style-one-of","selector":".frame","attribute":"display","values":["flex"],"message":"Make .frame a flex container."},{"id":"align","type":"computed-style","selector":".frame","attribute":"align-items","expected":"center","message":"Center vertically with align-items."},{"id":"justify","type":"computed-style","selector":".frame","attribute":"justify-content","expected":"center","message":"Center horizontally with justify-content."}],"tutorialSlug":"css","lessonSlug":"$undefined","status":"published","explanation":"text-align: center only centers inline content within a block, it never centers the block itself, and it does nothing for vertical centering. Flexbox's align-items and justify-content solve both axes at once.","unlocked":true,"previewWidth":"$undefined"},{"id":"6a843bbfedb274756db17e68","slug":"center-box-with-flexbox","title":"Center a box with Flexbox","summary":"A classic layout task: center one element both horizontally and vertically inside its container.","description":"Center the .box element both horizontally and vertically within its .frame container, using Flexbox.","language":"CSS","difficulty":"easy","mode":"exercise","estimatedMinutes":10,"tags":["flexbox","centering","layout"],"skills":["Flexbox alignment"],"requirements":["Make .frame a flex container.","Center its content horizontally with justify-content.","Center its content vertically with align-items."],"companies":["Appscrip","Hexon Global","Zedex Info Pvt Ltd","Accenture","Autovyn Consultancy","Codeflies Technologies Pvt. Ltd"],"starterCode":{"html":"","css":"","javascript":""},"solutionCode":{"html":"

Centered

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.frame { height: 240px; border: 1px dashed #94a3b8; display: flex; align-items: center; justify-content: center; }\n.box { width: 120px; height: 60px; background: #007a96; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; }","javascript":""},"hints":["display: flex on the parent unlocks align-items and justify-content.","align-items centers vertically, justify-content centers horizontally, in a row-direction flex container."],"tests":[{"id":"flex","type":"computed-style-one-of","selector":".frame","attribute":"display","values":["flex"],"message":"Make .frame a flex container."},{"id":"align","type":"computed-style","selector":".frame","attribute":"align-items","expected":"center","message":"Center vertically with align-items."},{"id":"justify","type":"computed-style","selector":".frame","attribute":"justify-content","expected":"center","message":"Center horizontally with justify-content."}],"tutorialSlug":"css","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a843bbfedb274756db17e6b","slug":"toggle-faq-answer","title":"Toggle a FAQ answer","summary":"Wire up a button so clicking it flips a status between open and closed.","description":"Clicking the question should open the answer, and clicking it again should close it. Track the state in the #status text.","language":"JavaScript","difficulty":"easy","mode":"exercise","estimatedMinutes":12,"tags":["dom","events","state"],"skills":["Event listeners","Toggling state"],"requirements":["Clicking #toggle once should set #status to \"Open\".","Clicking #toggle a second time should set #status back to \"Closed\"."],"companies":["Northcorp Software","Accenture","Helpshift","Mundrisoft Solutions","Nielsen","PayPay Corporation"],"starterCode":{"html":"","css":"","javascript":""},"solutionCode":{"html":"

\n \n

Closed

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\nbutton { padding: 8px 16px; border: 0; border-radius: 8px; background: #007a96; color: white; font-weight: 700; cursor: pointer; }","javascript":"const toggle = document.querySelector('#toggle');\nconst status = document.querySelector('#status');\nlet open = false;\ntoggle.addEventListener('click', () => {\n open = !open;\n status.textContent = open ? 'Open' : 'Closed';\n});"},"hints":["Keep a boolean variable for whether it's open.","Flip the boolean and update the text inside the same click handler."],"tests":[{"id":"open","type":"interaction-text","selector":"#toggle","target":"#status","action":"click","expected":"Open","message":"Clicking once should show \"Open\"."},{"id":"closed-again","type":"interaction-sequence-text","selector":"#toggle","target":"#status","action":"click","repeat":1,"expected":"Closed","message":"Clicking it again should return to \"Closed\"."}],"tutorialSlug":"javascript","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a843bbfedb274756db17e6f","slug":"fix-the-button-that-does-nothing","title":"Fix the button that does nothing","summary":"The click handler is wired to a selector that doesn't match anything on the page.","description":"Clicking the question is supposed to toggle #status between \"Open\" and \"Closed\", but nothing happens. Find the mismatched selector and fix it.","language":"JavaScript","difficulty":"easy","mode":"bug-fix","estimatedMinutes":10,"tags":["dom","debugging","selectors"],"skills":["DOM selectors","Event listeners"],"requirements":["Clicking the button should set #status to \"Open\".","Clicking it again should set #status back to \"Closed\"."],"companies":["Northcorp Software","Accenture","Helpshift","Mundrisoft Solutions","Nielsen","PayPay Corporation"],"starterCode":{"html":"

\n \n

Closed

\n \n

Closed

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\nbutton { padding: 8px 16px; border: 0; border-radius: 8px; background: #007a96; color: white; font-weight: 700; cursor: pointer; }","javascript":"const toggle = document.querySelector('#toggle');\nconst status = document.querySelector('#status');\nlet open = false;\ntoggle.addEventListener('click', () => {\n open = !open;\n status.textContent = open ? 'Open' : 'Closed';\n});"},"hints":["Compare the id used in querySelector against the button's real id in the HTML."],"tests":[{"id":"open","type":"interaction-text","selector":"#toggle","target":"#status","action":"click","expected":"Open","message":"Clicking should show \"Open\"."}],"tutorialSlug":"javascript","lessonSlug":"$undefined","status":"published","explanation":"document.querySelector('#toggle-btn') matched nothing, since the button's real id is \"toggle\" — so the listener was silently never attached at all.","unlocked":true,"previewWidth":"$undefined"},{"id":"6a843bbfedb274756db17e69","slug":"responsive-grid-gallery","title":"Build a 3-column grid gallery","summary":"Arrange a set of tiles into an even, gapped grid using CSS Grid.","description":"Arrange the four .tile elements inside .gallery into a 3-column grid with consistent spacing between tiles.","language":"CSS","difficulty":"medium","mode":"exercise","estimatedMinutes":15,"tags":["css-grid","layout","responsive-design"],"skills":["CSS Grid columns","Gap spacing"],"requirements":["Make .gallery a grid container.","Use exactly 3 equal-width columns.","Add visible spacing between tiles with gap."],"companies":["Appscrip","Autovyn Consultancy","CleVision Technologies","Streak AI","AccioJob","Apexon"],"starterCode":{"html":"","css":"","javascript":""},"solutionCode":{"html":"

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.tile { background: #e2e8f0; height: 80px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; }","javascript":""},"hints":["grid-template-columns: repeat(3, 1fr) creates three equal columns.","gap adds space between both rows and columns at once."],"tests":[{"id":"tiles","type":"element-count","selector":".gallery .tile","minimum":4,"message":"Keep all four tiles."},{"id":"grid","type":"computed-style-one-of","selector":".gallery","attribute":"display","values":["grid"],"message":"Make .gallery a grid container."},{"id":"gap","type":"computed-style-min","selector":".gallery","attribute":"gap","minimum":8,"message":"Add at least 8px of gap."}],"tutorialSlug":"css","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a843bbfedb274756db17e6a","slug":"truncate-text-with-ellipsis","title":"Truncate overflowing text with an ellipsis","summary":"A long title breaks a fixed-width card's layout — clip it to one line with an ellipsis instead.","description":"This card's title is too long and wraps onto multiple lines, breaking the layout. Truncate it to a single line with an ellipsis when it overflows.","language":"CSS","difficulty":"medium","mode":"exercise","estimatedMinutes":12,"tags":["text-overflow","layout","typography"],"skills":["Single-line text truncation"],"requirements":["Prevent the title from wrapping onto a new line.","Hide the overflowing text instead of letting it spill out.","Show an ellipsis where the text is cut off."],"companies":["Ant Group","Digiryte","Ignxt Technologies","Mahe Technologies","muVerity","Neerx Technovation"],"starterCode":{"html":"","css":"","javascript":""},"solutionCode":{"html":"

This is a very long product title that will not fit on one line

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.card { width: 220px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 8px; background: white; }\n.title { margin: 0; font-size: 1rem; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; }","javascript":""},"hints":["Three properties work together here: white-space, overflow, and text-overflow.","white-space: nowrap stops the wrap; overflow: hidden clips it; text-overflow: ellipsis shows the …"],"tests":[{"id":"nowrap","type":"computed-style","selector":".title","attribute":"white-space","expected":"nowrap","message":"Stop the text from wrapping with white-space: nowrap."},{"id":"hidden","type":"computed-style","selector":".title","attribute":"overflow-x","expected":"hidden","message":"Hide the overflow."},{"id":"ellipsis","type":"computed-style","selector":".title","attribute":"text-overflow","expected":"ellipsis","message":"Show an ellipsis with text-overflow."}],"tutorialSlug":"css","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a843bbfedb274756db17e6c","slug":"build-a-tab-switcher","title":"Build a tab switcher","summary":"Three buttons, one status line — clicking a tab should update which one is shown as active.","description":"Wire up the three .tab buttons so clicking any one of them updates #active-tab to that tab's name.","language":"JavaScript","difficulty":"medium","mode":"exercise","estimatedMinutes":15,"tags":["dom","events","data-attributes"],"skills":["Event delegation basics","data-* attributes"],"requirements":["Clicking the \"Settings\" tab should set #active-tab to \"settings\".","Clicking the \"Billing\" tab should set #active-tab to \"billing\"."],"companies":["Northcorp Software","Accenture","Helpshift","Mundrisoft Solutions","Nielsen","PayPay Corporation"],"starterCode":{"html":"","css":"","javascript":""},"solutionCode":{"html":"

\n \n \n \n

profile

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.tab { padding: 8px 14px; border: 1px solid #cbd5e1; background: white; border-radius: 6px; cursor: pointer; margin-right: 6px; }","javascript":"document.querySelectorAll('.tab').forEach((button) => {\n button.addEventListener('click', () => {\n document.querySelector('#active-tab').textContent = button.dataset.tab;\n });\n});"},"hints":["Loop over every .tab with querySelectorAll(...).forEach(...).","Each button's own data-tab value is available as button.dataset.tab."],"tests":[{"id":"settings","type":"interaction-text","selector":".tab[data-tab=\"settings\"]","target":"#active-tab","action":"click","expected":"settings","message":"Clicking Settings should show \"settings\"."},{"id":"billing","type":"interaction-text","selector":".tab[data-tab=\"billing\"]","target":"#active-tab","action":"click","expected":"billing","message":"Clicking Billing should show \"billing\"."}],"tutorialSlug":"javascript","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a843bbfedb274756db17e70","slug":"fix-the-overflowing-grid","title":"Fix the overflowing grid","summary":"Fixed-width tiles are wider than their container — swap them for a real responsive grid.","description":"The four .tile elements are supposed to sit neatly inside .gallery, but their fixed widths make them spill outside the container. Fix the layout so all four tiles fit.","language":"CSS","difficulty":"medium","mode":"bug-fix","estimatedMinutes":12,"tags":["css-grid","debugging","responsive-design"],"skills":["CSS Grid columns","Diagnosing overflow"],"requirements":["Make .gallery a grid container.","Use 3 equal-width columns instead of fixed pixel widths.","Add gap spacing between tiles."],"companies":["CleVision Technologies","Streak AI","Appscrip","Autovyn Consultancy","La Net Team Software Solutions","Pepper Cloud"],"starterCode":{"html":"

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.gallery { width: 400px; border: 1px dashed #94a3b8; }\n.tile { width: 300px; height: 80px; background: #e2e8f0; border-radius: 8px; display: inline-block; margin: 4px; text-align: center; line-height: 80px; font-weight: 700; }","javascript":""},"solutionCode":{"html":"

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.gallery { width: 400px; border: 1px dashed #94a3b8; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.tile { height: 80px; background: #e2e8f0; border-radius: 8px; text-align: center; line-height: 80px; font-weight: 700; }","javascript":""},"hints":["A 300px fixed width per tile can't fit three-plus across a 400px container.","Switch .gallery to display: grid with repeat(3, 1fr) and drop the fixed width from .tile."],"tests":[{"id":"grid","type":"computed-style-one-of","selector":".gallery","attribute":"display","values":["grid"],"message":"Make .gallery a grid container."},{"id":"columns","type":"computed-style-parts","selector":".gallery","attribute":"grid-template-columns","count":3,"equal":true,"message":"Use 3 equal-width columns."},{"id":"gap","type":"computed-style-min","selector":".gallery","attribute":"gap","minimum":8,"message":"Add at least 8px of gap."},{"id":"tiles","type":"element-count","selector":".gallery .tile","minimum":4,"message":"Keep all four tiles."}],"tutorialSlug":"css","lessonSlug":"$undefined","status":"published","explanation":"Fixed pixel widths don't shrink to fit their container. Grid's fr unit divides the available space proportionally instead, so the tiles always fit regardless of container width.","unlocked":true,"previewWidth":"$undefined"},{"id":"6a843bbfedb274756db17e6d","slug":"validate-required-field","title":"Validate a required field on submit","summary":"Clicking submit on an empty required field should show a real error, not fail silently.","description":"Clicking Submit should check the email field. Since it starts empty, clicking Submit should show an error in #form-status.","language":"JavaScript","difficulty":"medium","mode":"exercise","estimatedMinutes":15,"tags":["dom","forms","validation"],"skills":["Reading input values","Basic form validation"],"requirements":["Clicking #submit-btn while #email is empty should set #form-status to \"Email is required.\""],"companies":["Accenture","Ameriprise Financial","Appscrip","Betterhalf.ai","Chetu","Codegene Technologies Private Limited"],"starterCode":{"html":"","css":"","javascript":""},"solutionCode":{"html":"","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\ninput { display: block; margin: 8px 0; padding: 6px 10px; }\nbutton { padding: 8px 16px; border: 0; border-radius: 8px; background: #007a96; color: white; font-weight: 700; cursor: pointer; }","javascript":"document.querySelector('#submit-btn').addEventListener('click', () => {\n const email = document.querySelector('#email');\n const status = document.querySelector('#form-status');\n status.textContent = email.value.trim() ? 'Submitted!' : 'Email is required.';\n});"},"hints":["Read the input's current value with email.value.","Trim it before checking, so spaces alone don't count as filled in."],"tests":[{"id":"empty-error","type":"interaction-text","selector":"#submit-btn","target":"#form-status","action":"click","expected":"Email is required.","message":"Submitting an empty field should show the error."}],"tutorialSlug":"javascript","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a854457a68f96986fbebe64","slug":"interview-event-delegation-list","title":"Handle a list with one listener (event delegation)","summary":"A classic screening task: attach a single listener to the parent instead of one per item.","description":"Add exactly one click listener, on #list, so that clicking any item updates #picked to that item's data-name. Do not attach a listener to each

.","language":"JavaScript","difficulty":"medium","mode":"exercise","estimatedMinutes":12,"tags":["dom","events","delegation"],"skills":["Event delegation","event.target","data-* attributes"],"requirements":["Clicking \"Beta\" sets #picked to \"beta\".","Clicking \"Gamma\" sets #picked to \"gamma\"."],"companies":["Northcorp Software","Accenture","Helpshift","Mundrisoft Solutions","Nielsen","PayPay Corporation"],"starterCode":{"html":"","css":"","javascript":""},"solutionCode":{"html":"

Alpha
Beta
Gamma

none

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n#list { list-style: none; padding: 0; }\n#list li { padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px; margin-bottom: 6px; cursor: pointer; background: #fff; }","javascript":"document.querySelector('#list').addEventListener('click', (event) => {\n const item = event.target.closest('li');\n if (!item) return;\n document.querySelector('#picked').textContent = item.dataset.name;\n});"},"hints":["Listen on #list, then read event.target inside the handler.","event.target.closest('li') protects you if the click lands on inner markup."],"tests":[{"id":"beta","type":"interaction-text","selector":"#list li[data-name=\"beta\"]","target":"#picked","action":"click","expected":"beta","message":"Clicking \"Beta\" should set #picked to \"beta\"."},{"id":"gamma","type":"interaction-text","selector":"#list li[data-name=\"gamma\"]","target":"#picked","action":"click","expected":"gamma","message":"Clicking \"Gamma\" should set #picked to \"gamma\"."}],"tutorialSlug":"javascript","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a854458a68f96986fbebe65","slug":"interview-fix-var-loop-closure","title":"Fix the loop that always reports the last number","summary":"The single most-asked JavaScript closure bug: every button in a var loop reports the same value.","description":"Each button should report its own number, but every one of them currently shows 3. Fix the loop so button 1 reports 1, button 2 reports 2, and button 3 reports 3.","language":"JavaScript","difficulty":"medium","mode":"bug-fix","estimatedMinutes":10,"tags":["closures","scope","events"],"skills":["Closures","let vs var","Block scope"],"requirements":["Clicking the second button sets #chosen to 2.","Clicking the third button sets #chosen to 3."],"companies":["Deloitte","Neerx Technovation","Photon Technologies","TO THE NEW","Zepto","DotStark Technologies"],"starterCode":{"html":"

\n \n \n \n

none

\n \n \n \n

none

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.pick { padding: 8px 14px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; cursor: pointer; margin-right: 6px; }","javascript":"const buttons = document.querySelectorAll('.pick');\nfor (let i = 0; i < buttons.length; i++) {\n buttons[i].addEventListener('click', function () {\n document.querySelector('#chosen').textContent = String(i + 1);\n });\n}"},"hints":["`var` is function-scoped, so all three handlers share one binding.","Switching the loop variable to `let` gives each iteration its own binding."],"tests":[{"id":"second","type":"interaction-text","selector":".pick:nth-of-type(2)","target":"#chosen","action":"click","expected":"2","message":"The second button should report 2, not 3."},{"id":"first","type":"interaction-text","selector":".pick:nth-of-type(1)","target":"#chosen","action":"click","expected":"1","message":"The first button should report 1, not 3."}],"tutorialSlug":"javascript","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a854458a68f96986fbebe66","slug":"interview-star-rating-widget","title":"Build a star rating widget","summary":"A staple take-home warm-up: five stars, click one, the score updates.","description":"Wire up the five .star buttons so clicking one writes its data-value into #rating.","language":"JavaScript","difficulty":"easy","mode":"exercise","estimatedMinutes":10,"tags":["dom","events","components"],"skills":["DOM events","data-* attributes","Component state"],"requirements":["Clicking the 4th star sets #rating to 4.","Clicking the 1st star sets #rating to 1."],"companies":["Northcorp Software","Accenture","Helpshift","Mundrisoft Solutions","Nielsen","PayPay Corporation"],"starterCode":{"html":"","css":"","javascript":""},"solutionCode":{"html":"

\n \n \n \n \n \n

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.star { font-size: 24px; border: none; background: none; cursor: pointer; color: #f59e0b; }","javascript":"document.querySelectorAll('.star').forEach((star) => {\n star.addEventListener('click', () => {\n document.querySelector('#rating').textContent = star.dataset.value;\n });\n});"},"hints":["querySelectorAll('.star') gives you all five buttons.","Each button's score is in button.dataset.value."],"tests":[{"id":"four","type":"interaction-text","selector":".star[data-value=\"4\"]","target":"#rating","action":"click","expected":"4","message":"Clicking the 4th star should show 4."},{"id":"one","type":"interaction-text","selector":".star[data-value=\"1\"]","target":"#rating","action":"click","expected":"1","message":"Clicking the 1st star should show 1."}],"tutorialSlug":"javascript","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a854458a68f96986fbebe67","slug":"interview-accordion-toggle","title":"Toggle an accordion panel open and closed","summary":"Clicking the same trigger twice must close it again — the part candidates most often miss.","description":"Make the trigger toggle #panel-state between \"open\" and \"closed\" on each click. It starts closed.","language":"JavaScript","difficulty":"easy","mode":"exercise","estimatedMinutes":10,"tags":["dom","events","components"],"skills":["Toggling state","DOM events"],"requirements":["The first click sets #panel-state to \"open\".","A second click sets it back to \"closed\"."],"companies":["Northcorp Software","Accenture","Helpshift","Mundrisoft Solutions","Nielsen","PayPay Corporation"],"starterCode":{"html":"","css":"","javascript":""},"solutionCode":{"html":"\n

closed

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n#trigger { padding: 8px 14px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; cursor: pointer; }","javascript":"const state = document.querySelector('#panel-state');\ndocument.querySelector('#trigger').addEventListener('click', () => {\n state.textContent = state.textContent.trim() === 'open' ? 'closed' : 'open';\n});"},"hints":["Read the current text before deciding what to write back.","A ternary keeps it to one line: text === 'open' ? 'closed' : 'open'."],"tests":[{"id":"opens","type":"interaction-text","selector":"#trigger","target":"#panel-state","action":"click","expected":"open","message":"The first click should set the panel to \"open\"."},{"id":"closes-again","type":"interaction-text","selector":"#trigger","target":"#panel-state","action":"click","expected":"closed","message":"Clicking again should set it back to \"closed\"."}],"tutorialSlug":"javascript","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a854458a68f96986fbebe68","slug":"interview-fix-specificity-override","title":"Fix the style that refuses to apply","summary":"\"My CSS isn't working\" — the specificity question that comes up in almost every CSS round.","description":"The .alert rule should make the message red, but it is being overridden. Make the alert text render red without using !important.","language":"CSS","difficulty":"medium","mode":"bug-fix","estimatedMinutes":10,"tags":["specificity","cascade","selectors"],"skills":["CSS specificity","The cascade"],"requirements":["#notice .alert text must compute to rgb(220, 38, 38)."],"companies":["Aaizel International Technologies Private Limited","Cognizant","Fabulous Media","Sapiens","Sebstrone Industries"],"starterCode":{"html":"

Your session is about to expire.

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n#notice p { color: #0f172a; }\n.alert { color: #dc2626; }","javascript":""},"solutionCode":{"html":"

Your session is about to expire.

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n#notice p { color: #0f172a; }\n#notice .alert { color: #dc2626; }","javascript":""},"hints":["Count specificity: an id selector beats a lone class selector.","Raising the alert rule's specificity (e.g. #notice .alert) wins without !important."],"tests":[{"id":"alert-red","type":"computed-style","selector":".alert","attribute":"color","expected":"rgb(220, 38, 38)","message":"The alert text should compute to red."}],"tutorialSlug":"css","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a854458a68f96986fbebe69","slug":"interview-responsive-grid-no-media-queries","title":"Build a responsive card grid with no media queries","summary":"The auto-fit / minmax answer interviewers look for when they ask about modern responsive layout.","description":"Lay the six cards out in a grid that reflows on its own, using repeat(auto-fit, minmax(...)) — without writing a single media query.","language":"CSS","difficulty":"medium","mode":"exercise","estimatedMinutes":12,"tags":["grid","responsive","layout"],"skills":["CSS Grid","auto-fit and minmax","Intrinsic responsive design"],"requirements":[".cards must use display: grid.","Its columns must be defined with repeat(auto-fit, minmax(...))."],"companies":["Appscrip","Autovyn Consultancy","CleVision Technologies","Streak AI","AccioJob","Apexon"],"starterCode":{"html":"","css":"","javascript":""},"solutionCode":{"html":"

One

Two

Three

Four

Five

Six

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }\n.card { padding: 20px; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; }","javascript":""},"hints":["grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));","auto-fit collapses empty tracks; auto-fill keeps them."],"tests":[{"id":"is-grid","type":"computed-style","selector":".cards","attribute":"display","expected":"grid","message":".cards should use display: grid."},{"id":"has-cards","type":"element-count","selector":".card","minimum":6,"message":"All six cards should still be present."}],"tutorialSlug":"css","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a854458a68f96986fbebe6a","slug":"interview-sticky-header","title":"Make the header stick to the top on scroll","summary":"position: sticky versus fixed — a question that separates people who have shipped layouts from people who have read about them.","description":"Make .site-header remain pinned to the top of the viewport as the page scrolls, using position: sticky (not fixed, which would remove it from the flow).","language":"CSS","difficulty":"easy","mode":"exercise","estimatedMinutes":8,"tags":["positioning","layout","sticky"],"skills":["position: sticky","Stacking and offsets"],"requirements":[".site-header must compute to position: sticky.","It must have a top offset so it knows where to stick."],"companies":["Accenture","CallHippo","Infra.Market","Insignia Solutions","Kiaan Technology","Marmeto"],"starterCode":{"html":"","css":"","javascript":""},"solutionCode":{"html":"\n

Scroll to test the header.

Long content…

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.site-header { position: sticky; top: 0; background: #0f172a; color: #fff; padding: 14px 18px; border-radius: 8px; }","javascript":""},"hints":["Sticky elements do nothing without an offset — set `top: 0`.","Unlike fixed, sticky keeps the element in the normal document flow."],"tests":[{"id":"sticky","type":"computed-style","selector":".site-header","attribute":"position","expected":"sticky","message":"The header should use position: sticky."},{"id":"offset","type":"computed-style","selector":".site-header","attribute":"top","expected":"0px","message":"Sticky needs a top offset of 0 to pin correctly."}],"tutorialSlug":"css","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a854459a68f96986fbebe6b","slug":"interview-accessible-form-labels","title":"Associate every input with a real label","summary":"The accessibility question that comes up in nearly every frontend screen.","description":"Connect each label to its input using for/id, so clicking the label focuses the field and screen readers announce it.","language":"HTML","difficulty":"easy","mode":"exercise","estimatedMinutes":10,"tags":["accessibility","forms","semantics"],"skills":["Label/input association","Accessible forms"],"requirements":["The email label must carry for=\"email\".","The password label must carry for=\"password\"."],"companies":["Accenture","Codegene Technologies Private Limited","Tekwissen","Ameriprise Financial","Appscrip","Betterhalf.ai"],"starterCode":{"html":"","css":"","javascript":""},"solutionCode":{"html":"","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\nlabel { display: block; margin-top: 12px; font-weight: 600; }\ninput { padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; }","javascript":""},"hints":["A label's `for` must match the input's `id` exactly.","Placeholders are not labels — they vanish as soon as the user types."],"tests":[{"id":"email-label","type":"attribute-equals","selector":"label[for=\"email\"]","attribute":"for","expected":"email","message":"The email label needs for=\"email\"."},{"id":"password-label","type":"attribute-equals","selector":"label[for=\"password\"]","attribute":"for","expected":"password","message":"The password label needs for=\"password\"."}],"tutorialSlug":"html","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"},{"id":"6a854459a68f96986fbebe6c","slug":"interview-fix-div-used-as-button","title":"Replace the clickable div with a real button","summary":"\"Why not just use a div with an onclick?\" — the accessibility follow-up interviewers wait for.","description":"The action is a

, so it is not focusable and not announced as a control. Replace it with a real ","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.action { display: inline-block; padding: 9px 16px; background: #0f172a; color: #fff; border-radius: 6px; cursor: pointer; border: none; font: inherit; }","javascript":""},"hints":["A div gets no keyboard focus, no Enter/Space activation and no button role.","Inside a form, an untyped \n

\n Pen — 5\n \n

","css":"body { margin: 0; padding: 32px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.6; }\n.item { margin-bottom: 10px; }\n.add { padding: 6px 12px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; cursor: pointer; margin-left: 8px; }","javascript":"let total = 0;\ndocument.querySelectorAll('.add').forEach((button) => {\n button.addEventListener('click', () => {\n total += Number(button.dataset.price);\n document.querySelector('#total').textContent = String(total);\n });\n});"},"hints":["dataset values are strings — Number(...) them before adding.","Keep the running total in a variable outside the handler."],"tests":[{"id":"first-add","type":"interaction-text","selector":".add[data-price=\"20\"]","target":"#total","action":"click","expected":"20","message":"Adding the 20 item once should show 20."},{"id":"accumulates","type":"interaction-text","selector":".add[data-price=\"20\"]","target":"#total","action":"click","expected":"40","message":"Adding it again should accumulate to 40, not reset to 20."}],"tutorialSlug":"javascript","lessonSlug":"$undefined","status":"published","explanation":"","unlocked":true,"previewWidth":"$undefined"}],"initialMode":"exercise","initialSlug":"interview-accordion-toggle","authenticated":false}]]

Toggle an accordion panel open and closed — practice exercise

Acceptance criteria